Craco Alias 설정을 통해 relative path hell 벗어나기

Craco는 Create Reacrt App Configuration override 약어로, CRA에 Webpack 설정을 eject할 필요없이 설정 파일을 새로 만들어서 웹팩 설정을 덮어쓰는데에 도움을 주는 패키지이다.
그 중, craco-alias는 import App from "../../../../App.js 같은 alias를 막기 위해 사용되는 node module 패키지이다.

1. craco 관련 패키지 설치

yarn add -D @craco/craco craco-alias

2. tsconfig.paths.json 파일 만들기

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"],
            "@components/*": ["src/components/*"],
          // alias를 주고 싶은 폴더를 추가하면 된다.
        }
    }
}

3. craco.config.js 파일 만들기

const CracoAlias = require('craco-alias')

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

4. tsconfig.json에 tsconfig.paths.js의 존재를 알게 해주기

"extends": "./tsconfig.paths.json"와 "tsconfig.paths.json"를 추가한다.

// tsconfig.json
{
  "extends": "./tsconfig.paths.json", // 추가
  "compilerOptions": {
    ...
  },
  "include": [
	...
    "tsconfig.paths.json" // 추가
  ]
}