인턴기록1: 라우팅

이은지·2022년 2월 27일
2

인턴회고록

목록 보기
1/6
post-thumbnail

🙏🏻 Git wiki 작성 겸 정리하는 글
인턴 회고록까지 작성하고 글 모아서 Git wiki 완성하는 게 목표 👊
코드 짤 땐 전체적인 그림도 안보이고 헤매가며 짜서 되게 복잡해보였는데
완성된 걸 정리하니 생각보다 간단하다.

페이지 구성

전체 프로덕트는 크게 다음 네 가지 기능을 가진다.

  • 회원가입

  • 비밀번호 재설정

  • 로그인

  • 네오 홈: 일종의 마이페이지로서, 유저별 도메인이 존재한다.
    (인스타그램의 프로필과 유사하다.)

    네오 홈의 경우 유저의 로그인 여부에 따라 다른 페이지를 보여준다.
    - Guest용 : 캐릭터 방 탭만 존재
    - Owner용 : 캐릭터 방 , 네오 방 두 가지 탭이 존재

라우팅 방식

  • react-router-dom 라이브러리를 사용했다.
  • 우선 App.js에 위에서 기술한 기능별로 메인 라우트를 구성했다.
    또한 한 가지 기능에 여러 개의 페이지가 필요했기 때문에, 각 기능별로 서브 라우트를 만들었다.
  • 📁 src > 📁 pages 폴더 내부에 기능별로 폴더를 구성했기 때문에, 각 폴더에 index.js를 생성해 서브 라우팅을 했다.

상세설명 ① : 메인 라우트

📁 src > App.js

  • Switch문을 사용해 각 url에 맞는 컴포넌트를 렌더링했다.

  • 유저가 baseurl(https://lastneo.io/) 뒤에 자신의 닉네임을 입력하면 해당 유저의 네오 홈으로 이동해야 했다. 따라서 라우트에서 지정한 것 이외의 url을 모두 유저의 닉네임으로 간주했다.

    이 경우 우선 NeoHome 컴포넌트를 렌더링 한 다음, NeoHome 컴포넌트에서 match props를 통해 유저가 입력한 닉네임을 받아왔다. 그 다음 해당 닉네임을 서버로 전송하여 닉네임의 존재 여부를 확인했다. 존재하는 닉네임의 경우 해당 유저의 네오 홈 페이지로 이동, 존재하지 않는 닉네임의 경우 404 Not Found 페이지로 리다이렉트 하였다.

상세설명 ② : 서브 라우트

(예시)📁 src > 📁 pages > 📁 Register > index.js

  • 한 기능에 여러 가지 페이지가 필요한 경우, 기능별로 구성해놓은 각 폴더에 index.js를 두어 서브 라우트를 작성했다.

  • 회원가입과 비밀번호 재설정 기능의 경우 페이지들의 순서가 정해져있다. 따라서 서브 라우트에 url을 지정해두고, 각 페이지에서 useHistory 훅을 이용하여 다음 순서인 페이지로 이동시켰다.

  • 순차성을 띄지 않는 페이지인 경우에도, 기능과 연관된 페이지라면 해당 기능의 서브 라우트 내에서 라우팅을 했다.

  • 네오홈 내의 탭 메뉴의 경우 서브 라우트로 처리하기 보단 컴포넌트의 state값에 따라 각기 다른 컴포넌트를 렌더링하는 방식을 택했다. 탭 메뉴 간 이동이 잦기 때문에 이동할 때마다 url을 변경하는 것보다 컴포넌트를 교체하는 방식이 적합하다고 판단했다.

0개의 댓글