문제 현상
react router로 url depth /~/~로 깊어졌을 때 발생하였다.
/ path부터 index.html로 순서대로 url을 들어갔을 땐 page가 출력되었으나, refresh로 바로 url을 요청할 경우 page가 출력되지 않았다.
문제는 index.js를 가져오지 못하였는데, 그 경로와 오류는 다음과 같았다.
GET http://localhost:9000/@user/index.js net::ERR_ABORTED 404 (Not Found)알아서 localhost:9000/index.html과 index.js를 가져올줄 알았는데 그렇지 않았다.
원인
조금 찾아보니 원래 SPA의 문제라고 한다.
client side에서 router를 사용하여 하다보니 서버로 바로 요청하면 보여줄 page를 모른다고 한다. 그래서 서버에서 리다이렉트 페이지를 준다거나 클라이언트에서 webpack 설정을 수정하는 것으로 보인다.
해결방법
그래서 개발 환경에서 해결하는 방법은,
webpack dev server에서 historyAPIFallback을 사용하는 것이다.
그런데 이미 설정되어 있었고 다른 문제가 있었다.
devServer: {
port: 9000,
hot: true, // HMR 기능 활성화
open: true,
historyApiFallback: true,
},GET http://localhost:9000/@user/index.js net::ERR_ABORTED 404 (Not Found)위쪽에서 설명한 문제는 index.js 경로와 관련된 것이었다.
webpack 설정은, index.js의 output publicPath였다.
output: {
path: path.resolve(__dirname, '..', 'dist'),
publicPath: '/',
filename: 'index.js',
},path는 번들된 결과 파일들의 저장 위치이고, publicPath는 webpack plugin으로 생성되는 index.html 내부에서 index.js 파일의 path와 관련있었다.
// publicPath 적용 전
<script defer src="index.js"></script>
// publicPath 적용 후
<script defer src="/index.js"></script>그래서 localhost/depth1/depth2를 하면,
historyApiFallback 동작으로 한 depth 위의 상위 url에서 index.js를 찾은 것이다.
결론적으로 publicPath와 historyApiFallback을 설정하고 잘 호출되었다.
