창 크기를 처음부터 맞춰서 브라우저에 띄우는 방법

오늘은 내 할 일은

로그인, 아이디 찾기, 비밀번호 찾기, 회원가입

ui를 구현하는 것이었다.

 

내가 클론코딩 하려는 사이트인

'티켓링크'에 접속해서 만들 ui들을 보니

모두 좌측 화면에 완전히 붙어있었다..

 

ui들 모두 인풋이 차지하는 부분보다

빈 부분이 더 많기 때문에

나도 그 사람들처럼 개발하고 싶었다.

 

그래서 구글에 찾아봤는데

검색하는 방법이 잘못되었는지

나오지 않았다..ㅠㅠ

어떤 검색어로 검색했어야 하는걸까..

 

결국 튜터님을 찾아뵀는데

window.open함수를 쓰라고 하셨다.

 

 

window.open() 함수는

웹에서 새 창을 열기 위해

가장 쉽게 사용할 수 있는 방법이라고 한다.

 

문법은

window.open(url, target, features);

1. url:

   1) 열고자하는 웹 페이지의 url

   2) 컴포넌트인 경우, route path를 입력

 

2. target:

새롭게 여는 창을 어디에 열 것인지 지정하는 속성

 1) _blank: 새 탭이나 새 창

 2) _self: 같은 창

 3) _parent: 부모 프레임

4) _top: 최상위 프레임

 

3. features:

새롭게 여는 창의 속성을 결정하는 속성

 

 

나는 LocalMenuItem.jsx에서 '로그인'을 클릭하면

Login.jsx컴포넌트를 작은 로그인 창으로

뜨게 하려는 작업을 해냈다. 그 과정은 이러했다.

 

1. App.jsx

 <Route path="/login" element={<Login />} />

        <Route path="/join" element={<Join />} />

        <Route path="/findid" element={<FindId />} />

        <Route path="/findpw" element={<FindPw />} />

      </Routes>

    </BrowserRouter>

 

 

 

2. Login.jsx

<OtherLoginServices onClick={() => navigate("/findid")}>

          아이디 찾기

        </OtherLoginServices>

        <OtherLoginServices onClick={() => navigate("/findpw")}>

          비밀번호 찾기

        </OtherLoginServices>

        <OtherLoginServices onClick={() => navigate("/join")}>

          회원 가입

(이 컴포넌트에서

아이디 찾기, 비밀번호 찾기, 회원가입을

클릭하면 각 브라우저로 넘어감)

 

여기까지가 리액트 라우터 돔으로

이어주는 부분이고

 <RightMenuBtn

            onClick={() =>

              window.open(

                "/login",

                "popupWindow",

                "width=600,height=400,resizable=yes,scrollbars=yes"

              )

            }

          >

            로그인

          </RightMenuBtn>

<RightMenuBtn

            onClick={() =>

              window.open(

                "/join",

                "popupWindow",

                "width=600,height=400,resizable=yes,scrollbars=yes"

              )

            }

          >

            회원가입

          </RightMenuBtn>

이 부분이 창 크기를 처음부터 맞춰서

브라우저에 띄우는 방법이다.