[React / ts] Craco로 절대 경로(allias) 사용하기

https://craco.js.org/

Configure CRA without ejecting. | CRACO

Craco란 Create React App Configuration Override의 약자로, Create React App(CRA)로 생성한 React 프로젝트에서 eject 하지 않고도 설정을 커스터마이징할 수 있게 해주는 도구이다.

Craco를 사용하여 상대 경로가 아닌 절대 경로를 사용하여 파일을 import할 수 있도록 설정해보자.

 

먼저 다음 명령어들을 통해 craco를 설치해준다.

npm i -D @craco/craco

npm i -D @craco/types // 타입스크립트

 

다음으로 src폴더에 tsconfig.paths.json을 만들고 다음을 입력해준다.

// tsconfig.paths.json

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

이제 @를 통해 src/ 경로를 나타낼 수 있다.

이외에도 다른 문자를 통해 자주 사용하는 경로를 지정해줄 수 있다.

 

다음으로 src폴더에 craco.config.js를 만들어준다.

// craco.config.js

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

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

tsconfig.paths.json을 적용한 craco-alias를 사용하기 위해 위 파일이 필요하다.

 

마지막으로 tsconfig.json을 수정해준다.

"extends": "./tsconfig.paths.json",
"include": ["src", "craco.config.js"]

이제 절대 경로를 사용할 준비가 끝났다.

기존에 ../../models 와 같이 지정되어있던 상대 경로들은 @/models와 같이 사용이 가능해진다.