[리팩토링] 환경 설정

기존에 script type module로 사용했던 것을 webpack을 적용해 번들링하고 webpack설정에 babel을 같이 설정해주었다.

환경 설정 관련 트러블 슈팅

babel 오류

async, await를 사용하니까 regeneratorRuntime is not defined라는 오류가 났다.
babel/preset-env를 설정해놓긴 했지만 async, await은 ES8에 속해있어서 변환되지 않는 것 같다.
plugin에 plugin-transform-runtime를 추가해주었다.

  presets: ['@babel/preset-env'], // ES6 문법 트랜스파일
  plugins: [
              '@babel/plugin-proposal-object-rest-spread',
              '@babel/plugin-transform-runtime', // async-await 문법 트랜스파일
           ],

webpack 경로 오류

웹팩 사용 시 2단계 이상의 경로를 사용하면 오류가 났다.
https://js-notion-clone-project/pages/23755
dev server에서는 404오류, 배포 링크에서는 unexpected token '<'오류가 났다.
이유는 webpack설정에서 publicPath를 루트로 지정해주지 않았기 때문이다.

해결법

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    publicPath: '/',
  },

output.path
모든 출력 파일을 저장할 로컬 디스크 디렉토리 (절대 경로) .

output.publicPath
번들 파일을 업로드 한 위치 (서버 루트에 상대적).
빌드(서버) 환경에서 파일을 요청할 때의 기본 경로.
배포 빌드 할 때 CSS나 HTML파일 안에 URL들을 배포 환경의 경로로 또한 변경해준다.

의문점

왜 2단계 이상의 경로에서만 오류가 났을까?

• dev-server사용 시 historyApiFallback에서 적용이 안됐다.
• 하지만 publicPath를 루트로 설정해주니 잘 동작했다.
• historyApiFallback의 경로 기준은 publicPath로 정해지는 것이었다. (자동으로 루트로 변경해주는 줄 알았다..)

왜 dev-server를 이용했을 때와 배포환경에서 오류가 다를까?

• dev-server publicPath를 루트로 설정하지 않아 historyApiFallback적용이 안되어서 404오류가 났고,
• 배포 환경에서는 vercel.json에 리다이렉트 설정이 되어있어서
  루트 경로로 요청은 잘 갔지만 publicPath설정을 안해줘서 html안의 연결된 파일들의 경로가 맞지 않아서였다.

두 기능의 관계는 어떻게 되는 걸까?

• historyApiFallback은 루트 외의 다른 경로로 서버 요청이 갈 때 루트 경로로 우회해주는 기능.(webpack dev-server사용 시)
• publicPath는 그 우회할 경로를 지정하는 것.