Webpack의 historyApiFallback에 대하여

요약: historyApiFallback이란? 개발중인 프로젝트의 라우팅의 작동하지 않는 문제를 해결하는 webpack.config.js파일의 속성

출처: https://velog.io/@wusi-hub/%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC%EC%BD%94%EC%8A%A4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Webpack%EC%9D%98-historyApiFallback-%EC%84%A4%EC%A0%95%EC%9C%BC%EB%A1%9C-%EB%9D%BC%EC%9A%B0%ED%8C%85-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

라우팅은 웹 애플리케이션에서 특정 URL 경로에 대한 요청을 처리하는 방법을 결정하는 과정입니다. 일반적으로 단일 페이지 애플리케이션(SPA)에서는 라우팅을 사용하여 사용자가 다른 경로로 이동할 때 페이지를 다시 로드하지 않고도 해당 컴포넌트를 동적으로 변경할 수 있습니다.

하지만 개발 중인 프로젝트에서는 라우팅이 작동하지 않는 문제를 겪었을 것입니다. 이 문제를 해결하기 위해 webpack.config.js 파일에서 historyApiFallback 옵션을 사용하였습니다. 이를 통해 단일 페이지 애플리케이션에서 라우팅을 지원할 수 있습니다.

해당 설정을 사용하기 위해서는 webpack-dev-server를 사용하고 있어야 합니다. webpack-dev-server는 개발 서버를 제공하여 실시간으로 애플리케이션을 빌드하고 업데이트할 수 있도록 도와줍니다.

import CopyPlugin from 'copy-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

/** @type {import('webpack').Configuration} */
export default {
  mode: 'development',
  entry: './src/index',
  output: {
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.[tj]sx?$/i,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      filename: 'index.html',
    }),
    new CopyPlugin({
      patterns: [{ from: 'public', to: '' }],
    }),
  ],
  devServer: {
    hot: true,
    port: 3000,
    allowedHosts: 'all',
    historyApiFallback: true,
  },
};

위의 코드에서 webpack.config.js 파일에는 devServer 객체가 있습니다. 이 객체 안에 historyApiFallback 속성을 true로 설정해주었습니다. 이 옵션은 개발 서버에서 라우팅 경로를 처리할 때 사용됩니다.

보통 개발 서버에서는 요청된 경로에 대한 정적 파일을 제공하는데, 라우팅을 사용하는 SPA의 경우에는 정적 파일이 아니라 동적으로 생성된 컴포넌트를 제공해야 합니다. 그렇기 때문에 historyApiFallback 옵션을 활성화하여 개발 서버에서 요청된 모든 경로에 대해 항상 index.html 파일을 제공하도록 설정합니다.

이렇게 설정하면 개발 서버는 모든 경로에 대해 index.html을 반환하므로, 애플리케이션은 라우팅 경로에 따라 적절한 컴포넌트를 렌더링할 수 있게 됩니다. 따라서 브라우저의 주소 표시줄에 직접 경로를 입력하거나 페이지를 새로고침할 때도 올바른 라우팅 동작을 확인할 수 있습니다.

위의 설정을 적용하면 라우팅이 되지 않는 문제를 해결할 수 있으며, 단일 페이지 애플리케이션에서 원활한 라우팅을 구현할 수 있게 됩니다.

 

==========================================================================================

내 Sleact과정에서의 예

원래 새로운 주소가 붙고 새로고침을 하면 리엑트는 알아먹지 못합니다. 그런데 여기서는 알아먹는데 이것은 바로 webpack.config.ts에 있는 historyApiFallback코드 때문입니다.

 

 

historyApiFallback 이란? 주소를 사기쳐 주는놈입니다. SPA(Single Page Application)에서는 url이란건 없습니다. SPA에서는 오직 index.html만 있을 뿐입니다(index.html에 접근할 수 있는 방법은 localhost:3030, 혹은 localhost:3030/ 과 같이 접근합니다.이와 같이  / 가 있는거랑 없는게 같음). 여기서 localhost:3090/login 이라는 가짜 주소를 만들어 주는 애가 history Api입니다. 이주소( localhost:3090/login)를 입력하고 새로고침을 누르면 이 주소는 서버로 가게 됩니다. 그런데 서버는 오직하나의 주소(localhost:3090)만 알고 있습니다. 그래서 서버는 localhost:3090/login이든, localhost:3090/signup이든 오직 하나의 주소(localhost:3090/)에 해당하는 index.html페이지 만을 보내는 겁니다. 근데 webpack.config.js에 있는 historyApiFallback을 true로 설정하면 주소창에 가짜 주소를 입력(서버에는 없는 주소. 서버에는 오직 index.html에 해당하는 localhost:3090만 있음)하고 새로고침해도  devServer가 localhost:3090/login, localhost:3090/signup 와 같은 가짜 주소를 있는 것 처럼 해주어서 오류가 나지 않는것입니다. 참고로 새로고침을 할때 localhost:8080이란 주소는 프론트로 가지않고 서버로 갑니다.