React Typescript 절대 경로 설정하기 (Craco)

Goal

craco를 통해 CRA로 만든 프로젝트에서 절대 경로를 설정하는 방법에 대해 알아본다.

CRA + Typescript 절대경로 설정

폴더 구조가 복잡한 경우 상대경로로 import를 한다면 코드가 너무 길어지고 보기 어렵다.

import Button from "../../../../button" 
// 이런식으로 되어있다면 찾기도 원하는 파일을 찾는 것도 힘들것이고 보기 어렵다.

Craco(Create React App Configuration Override)는 eject를 하지 않아도 root 폴더에 craco.config.js를 추가함으로써 eslint, babel, postcss 등을 쉽게 설정할 수 있다.

터미널에서 아래와 같은 명령어로 craco 패키지를 설치할 수 있다.

$ yarn add @craco/craco
$ yarn add craco-alias -D

Craco.config.js

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

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        tsConfigPath: "tsconfig.paths.json",
      },
    },
  ],
};

위와 같이 craco.config.js 파일을 세팅하고 나면 tsconfig.json과 tsconfig.paths.json 파일을 세팅하면 끝이다.

tsconfig.json

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

tsconfig.paths.json

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