우아한테크코스 프로젝트: Webpack의 historyApiFallback 설정으로 라우팅 문제 해결하기

라우팅은 웹 애플리케이션에서 특정 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을 반환하므로, 애플리케이션은 라우팅 경로에 따라 적절한 컴포넌트를 렌더링할 수 있게 됩니다. 따라서 브라우저의 주소 표시줄에 직접 경로를 입력하거나 페이지를 새로고침할 때도 올바른 라우팅 동작을 확인할 수 있습니다.

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