리액트에서 라우팅을 제대로 했는데 404에러가 난다고?

프로젝트를 진행하던 중, 웹팩을 직접 설정하여 사용하면서 리액트에서 라우팅을 진행하다가 에러가 계속 발생했다. 분명히 경로 설정과 그 외 작업은 제대로 진행했는데도 불구하고, 브라우저에서는 404 에러가 계속 나타나서 렌더링이 제대로 되지 않았다.

문제를 해결하기 위해 인터넷을 뒤져보니, 웹팩 설정 파일인 'webpack.config'에 아래와 같은 코드를 추가해야 한다는 것을 알게 되었다.

  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public", "index.html"),
    }),
  ],

그런데, 왜 이 코드가 뭐길래 날 이렇게 고통받게 한거지? 라는 생각에 살펴보니

먼저 'HtmlWebpackPlugin'이란 웹팩이 HTML 파일을 생성해주는 플러그인으로, 특히 SPA(Single Page Application)에서 유용하게 사용된다고 한다.

결국 이 플러그인이 웹팩으로 빌드한 자바스크립트를 자동으로 HTML에 연결해주는 역할을 하고 'public' 폴더 내의 'index.html'을 템플릿으로 사용하여, 빌드 과정에서 웹팩이 생성하는 자바스크립트 번들을 자동으로 이 HTML에 연결하도록 설정하는 것..!

이런 것 하나하나 정해줘야 하다니,,, 그래도 해보길 잘했다,,