새로고침 오류, 왜 이런거지?

이슈

React로 만든 웹 애플리케이션에서 간단한 테스트를 하던 그 때
'/diary' 경로로 일기를 확인하는 도중, 문제에 부딪혔는데

일기를 읽는 페이지에서 처음 렌더링을 잘 되다가 새로고침을 하면, 갑자기 404에러가 뜨고 있었다.

그래서 네트워크 탭에서 살펴보니 처음에는 '/diary/id'라는 요청을 잘 보내다가 새로고침만 하면 브라우저가 '/diary/index.bundle.js'라는 경로로 요청을 보내고 있었다.

???

알고보니 이런 문제는 React Router로 클라이언트 사이드 라우팅을 구현한 웹 애플리케이션에서 흔히 발생하는 문제라고 한다.

클라이언트 사이드 라우팅은 페이지 전환 없이 URL을 변경할 수 있는 브라우저의 히스토리 API를 활용하는데, 이때 새로고침하면 문제가 생긴다고 한다.

문제 원인

이런 문제의 근본 원인은 브라우저가 새로고침할 때마다 서버에 현재 URL에 해당하는 리소스를 요청하기 때문인데. '/diary/:id' 같은 서브 경로에서 새로고침을 하면, 브라우저는 해당 서브 경로에 대한 리소스를 서버에 요청하게 된다. 그런데 이 서버에는 그런 경로에 대한 파일이 없어서 404 에러를 반환하게 되는 것이다.

문제 해결

알고보니 프로젝트에서 웹팩을 직접 설정하여 사용하고 있는데 이 문제를 해결하려면, 웹팩의 output.publicPath 옵션을 '/'로 설정해야 한다.
이 옵션은 빌드한 결과물이 위치할 경로를 지정하는 옵션이고 publicPath를 '/'로 설정하면, 브라우저는 항상 루트에서 빌드한 결과물을 로드하려고 시도하게 된. 이렇게 하면 서브 경로에서도 문제 없이 빌드한 결과물을 로드할 수 있다!

또한 웹팩의 devServer 설정에서도 publicPath를 '/'로 설정해야 하며. 이 설정은 웹팩 개발 서버가 빌드한 결과물을 제공하는 경로를 지정한다.

해당 코드는 다음과 같다.

module.exports = {
  // ... 기타 설정들
  output: {
    // ... 기타 설정들
    publicPath: '/',
  },
  devServer: {
    // ... 기타 설정들
    devMiddleware: {
      publicPath: '/',
    },
  },
};

이렇게 설정하시면 '/diary/:id' 같은 서브 경로에서도 새로고침을 했을 때 404 에러 없이 정상적으로 페이지를 로드할 수 있다.

틀린 내용이 있다면 피드백 부탁드립니다. 🙇‍♂️