작성자 : 최시운
작성일시: 221207
주제: URL Parmeter Routing 

목차

1. 개요
2. 문제의 발생
3. 문제 원인 파악
   1. 에러가 나는 원인 index.js
   2. 네트워크탭에서 동작확인
   3. 에러가 나는 원인. Node_Modules.
4. 이를 해결하기 위해
   1. index.html에 base 경로을 설정하여 경로를 고정
   2. Webpack에서 publicPath를 설정하여 경로를 고정
5. 트러블 슈팅 과정에서 학습한 것
6. 후기
7. 참고자료

개요

프로필 레이아웃을 만들고 URL Parameter를 사용해서 파라미터에 해당하는 유저 프로필 페이지를 보여주고자 했습니다.

그래서 기존 App.tsx의 라우팅을 아래와 같이 설정해서 중첩 라우팅이 가능하게 하였습니다.

            <Route path={`${RoutePath.PROFILE}`}>
              <Route path=":userId" element={<ProfilePage />} />
              <Route path="" element={<ProfilePage />} />
            </Route>

구현 방식으로는 뒤에 파라미터가 붙지 않는 디폴트 페이지로 이동시

const { userId } = useParams();
  const profileUserId = userId ? 
		parseInt(userId as string, 10) : authStorage.get();

//authStorage.get()은 현재 로그인한 유저의 id를 가져오는 코드.

해당 코드를 사용해서 파라미터가 있으면 파라미터의 유저 아이디를, 없으면 authStorage.get을 통해 현재 로그한 유저의 아이디를 profileUserId로 설정하게 하였습니다.