[VanillaJS로 블로그 만들기] 2. Client Side Rendering 구현

우선 webpack.config.js에

devServer: {
    port: 3000,
    historyApiFallback: true // this!
  },

를 추가해준다. 하지않을경우 webpack-dev-server는 /로 올 경우는 index.html을 로드하지만 예를 들어 /post를 요청할경우 해당 위치에 있는 리소스를 로드하려고 한다.

historyApiFallback을 추가하면 404에러가 발생할 때 index.html을 로드한다.

하지만 현재 상태로는 webpack-dev-server는 nested route를 지원하지 않는다. 즉, localhost:3000/post은 동작하지만 localhost:3000/post/answer는 동작하지 않는다.

localhost:3000/post/answer를 입력하면 localhost:3000/post/answer/index.js를 찾으려고 하거나 404 Error가 발생한다. 이를 해결하기 위해 stackoverflow를 찾다보니 여러가지 해결방법이 나왔다.

  1. webpack.config.js의 output에 publicPath: '/'를 추가하는 것
  2. index.js를 import하는 index.html에서 import하는 방식을 src='index.js'에서 src='/index.js'로 바꾸는 것

이었다. 이 중 나는 1번 해결방법은 동작하지 않았고 2번으로 해결했다.

AS-IS

<html>
  <head>
    <title>JS Choi</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="index.js"></script>
  </body>
</html>

TO-BE

<html>
  <head>
    <title>JS Choi</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="/index.js"></script>
  </body>
</html>

이렇게 바꾸어주면 주소창의 경로가 아니라 항상 root(/)에서 index.js를 탐색하기때문에 원하는 결과가 나온다.

[PROJECT-JULABO-JavaScript] e.currentTarget
Chapter 5 배열

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage