React CRA에서 Path alias 설정

나나콘·2024년 5월 15일

문제

import { MovieData } from "../../../apis";

상대경로 대신 절대경로로 바꿔 사용하기

문제 해결

tsconfig 설정

compile시 path alias를 인식할 수 있도록 typescript compiler에게 알려줘야 합니다.

cra start시 tsconfig.json에서 몇몇 설정만 남겨놓고 초기화 되는데 이 때 path 설정은 지워지기 때문에 기존 tsconfig.json 파일이 아닌 같은 위치에 tsconfig.paths.json이라는 파일을 생성하여 path를 정의합니다.

// tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

tsconfig.json에 확장 경로 파일을 추가합니다.

// tsconfig.json

{
  "extends": "./tsconfig.paths.json"
}

craco 설치

craco(Create React App Configuration Override)

eject 없이 cra의 편리함과 자유로운 커스터마이징이 가능한 라이브러리입니다.

Craco를 사용하면 CRA 프로젝트의 Webpack, Babel 등의 설정을 변경할 수 있습니다.
예를들어, Webpack의 loader를 추가하거나 plugin을 적용하거나 Webpack 설정 파일을 직접 수정하지 않고도 가능합니다.
상대 경로를 절대 경로로 변환하기 위해 Craco를 사용하여 CRA 프로젝트의 Webpack 설정을 변경해보겠습니다.

프로젝트 build시에도 path alias를 보고 올바른 경로를 찾을 수 있도록 Webpack에도 path alias 설정을 해야 합니다.

Webpack에서 alias 설정은 webpack.config.js 파일에서 변경해야 하지만
CRA로 만든 프로젝트라면 eject를 해야 해당 파일이 나타납니다.

eject를 하지 않고 craco 라이브러리를 사용하면 됩니다.

craco 설치

npm install -D @craco/craco

plugin 설치

webpack plugin tsconfig-paths-webpack-plugin 설치하여 path alias 간편 설정
: tsconfig에서 설정한 path를 Webpack에 그대로 설정해주는 플러그인

npm install -D tsconfig-paths-webpack-plugin

craco.config.js 파일 생성

package.json과 동일한 위치에 craco.config.js 파일 생성합니다.

package.json 수정

package.json 파일의 script에서 react-script를 craco로 변경합니다.

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

carco 설정 파일 수정

❌
~~craco.config.js에서 Webpack 설정 재정의~~

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));
          return webpackConfig;
        },
      },
    },
  ],
};

⭕
위의 tsconfig-paths-webpack-plugin 말고 craco-alias를 사용하여 더 쉽게 가능하다.

const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig', // tsconfig 파일에서 경로 정보를 가져와서 사용한다
        baseUrl: './', // 기본경로
        tsConfigPath: './tsconfig.paths.json', // tsconfig.paths.json 파일의 경로
      },
    },
  ],
};