[React] Webpack 프로젝트가 페이지 이동 시 404 에러가 뜬다!

0. 사건의 발단 

평화로운 어느날....

cra(create-react-app)이 아닌 webpack으로 만든 프로젝트에서 react-router-dom을 사용하니 이동한 페이지에서 

새로고침을 했을 때 404 에러가 나타났다...

 

1. 문제 이유

브라우저가 React 서버에게 "/경로"에 GET을 보내지만 실제 서버에서는 "/경로"에 대한 정보가 없기 때문이다. 

 

이런 오류를 connect-history-api-fallback 현상이라고 한다. 

 

SPA는 보통 웹 브라우저에서 액세스할 수 있는 하나의 색인 파일(index.html)만 사용한다. 

그래서 특정 경로에서 새로고침 등을 했을 경우 서버가 해당 파일을 찾을 수 없어 발생한 문제이다. 

 

2. 해결 방법

historyApiFallback: true 추가하기

historyApoFallback는 HTML5의 history API를 사용할 경우 설정해놓은 url 이외의 url 경로로 접근할 때 

404 responses를 받게 되는데 이때도 index.html을 서빙할 지 경정하는 옵션이다. 

 

즉, React에서 react-router-dom이 내부적으로 HTML5 Histroy API를 사용하기 때문에 새로고침을 했을 때도  

index.html을 넘겨 원하던 페이지를 보여주게된다. 

 

webpack.config.js에 해당 옵션을 추가해주면 된다. 

module.exports = {
  
  ...
  
  devServer: {
    historyApiFallback: true,
  },
  
  ...
}