🙆🏻‍♀️ CRA + Typescript 절대 경로 설정하기 (feat. Craco) 🙆🏻‍♀️

// 상대 경로 지옥
import Somthing from "../../../Something"

점점... 멀어지나봐...
폴더의 깊이가 깊어질수록 상대 경로의 import는 무수한 ..을 찍어야 한다.
귀찮을뿐더러 코드가 지저분해진다.
그렇기에 eject 없이 절대 경로를 설정해보자.

어떻게 할까요~

Craco 설치

Craco는 Create React App Configuration Override의 약자로 CRA 프로젝트를 eject 없이 환경 설정이 가능하다.
(다른 대체로는 react-app-rewired도 있다.)
원하는 패키지 매니저로 Craco를 설치한다.

yarn add @craco/craco
yarn add craco-alias -D (tsconfig paths 설정을 바로 사용)

craco.config.js

그 후 root 경로에 craco.config.js를 생성 후 다음과 같이 작성한다.

const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: './src',
        tsConfigPath: './tsconfig.paths.json',
    },
   },
  ],
 }

• source: jsconfig, tsconfig 두 가지 옵션
• baseUrl: root 폴더 경로
• tsConfigPath: 우리가 커스텀할 파일 경로

tsconfig.path.json

마찬가지로 root 경로에 tsconfig.paths.json을 생성 후 다음과 같이 작성한다.

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

"원하는 경로 이름": "해당 파일이나 폴더의 경로"로 작성하면 된다.

tsconfig.json 수정

tsconfig.path.json 파일을 extends 시켜준다.

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

package.json 수정

적용한 설정을 사용하기 위해 package.json의 scripts부분을 다음과 같이 수정한다.

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

import 해보자

// ✨
import Somthing from "@test/Something"

본인이 설정한 alias로 import하면 끄-읏!

여담

위의 사진과 같이 빨간 줄이 그어져서 세상 고군분투 했는데 VScode를 껐다가 켜니 사라졌다...^^
허탈하고 괴로워-☆
껐다 켜는 것. 가장 단순하면서도 확실한 방법.