문제 상황
상품 리스트 페이지 개발 중,
카테고리번호 별로 다른 상품리스트를 렌더링 하기 위해 리액트 라우터의 URL 파라미터를 사용했는데
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/categories/:categoryNumber" component={CategoriesContainer} />
</Switch>
같은 방식으로 파라미터를 사용하던 다른 프로젝트에선 볼 수 없었던 아래와 같은 404 오류가 떴다.
/categories 까지는 오류 없이 페이지가 잘 나타났지만
/categories 뒤에 '/'와 함께 파라미터를 붙이거나 '/'만 붙여도 해당 오류가 발생했다
해결 방법
이전 프로젝트들에서는 마주친 적 없던 오류였고, 공식문서를 봐도 리액트 라우터의 URL 파라미터 사용법엔 문제가 없었기 때문에
프로젝트 자체의 환경설정 부분이 잘못되었을 확률이 높았다.
관련 키워드로 열심히 검색해본 결과
웹팩에서 사용하는 HtmlWebpackPlugin에 publicPath가 설정되어 있지 않아 발생하는 문제였다.
plugins: [
new HtmlWebpackPlugin({
filename: './index.html',
template: './public/index.html',
favicon: './public/favicon.ico',
}),
],
아래와 같이 publicPath를 추가해준 뒤 다시 빌드 → 실행하니 버그 해결 !
plugins: [
new HtmlWebpackPlugin({
publicPath: '/',
filename: './index.html',
template: './public/index.html',
favicon: './public/favicon.ico',
}),
],
마무리
사실상 리액트 라우터에서 일어난 버그가 아니라 웹팩 설정에서 일어난 버그지만 라우팅 과정에서 일어난 버그라 타이틀을 그냥 리액트 라우터로 해뒀다
이번에 프로젝트를 새로 시작하면서 기존 프로젝트 보일러 플레이팅 코드를 사용하지 않고 처음부터 다시 새롭게 보일러 플레이팅 코드를 짜뒀는데, 그 과정에서 저 publicPath 설정이 빠진 것 같다🥲
보통 SPA에서 라우팅 관련 에러가 나는 건 서버쪽 에러였어서 프론트의 개발서버에서 이런 버그가 생겨 살짝 당황스러웠었지만
역시나 영문 키워드를 이용해 stack overflow에서 잘 검색해보면 언제나 결국엔 해결방법을 찾을 수 있는 것 같다 !
