CRA + TS 절대경로 설정

절대경로 설정하기

CRA에서는 기본적인 webpack설정이 숨겨져있는데, 절대경로를 사용하기 위해서는 tsconfig.json과 더불어 webpack의 설정을 변경해주어야 한다.
이를 위해서는 eject로 숨겨진 webpack 설정을 바꾸어주어야 한다.

eject?
해당 프로젝트에 숨겨져 있는 모든 설정을 밖으로 추출해주는 명령어다.
한번 eject하면 되돌릴 수 없다.

이렇게 하지 않고 덮어씌우는 방법을 사용할 수도 있는데, Craco를 사용하면 된다.

Craco

Create React App Configuration Override 라는 뜻으로,
craco.config.js를 추가하여 eslint, babel 등등 CRA에 설정되어 있는 사항들을 덮어쓸 수 있다.

craco.config.js 설정

const CracoAlias = require('craco-alias')

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

• source: default 값은 options로, jsconfig, tsconfig 선택 가능
• baseUrl: default 값은 ./로 root 폴더를 가리킴
• aliases: alias 이름과 경로, default 값은 {}
• tsConfigPath: 만약 source가 tsconfig이라면 해당 파일 이름 작성
• debug: default 값은 false이며, 만약 버그가 생긴다면 해당 값을 true로 바꾸어 console로 내용 확인 가능

tsconfig.extend.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      // 파일
      "@app": ["./App.tsx"],

      // 폴더
      "@pages/*": ["./pages/*"],
      "@components/*": ["./components/*"],
      "@styles/*": ["./styles/*"]
    }
  }
}

tsconfig.json

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

package.json

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

설정을 마치면 다음과 같이 @를 붙여 절대경로로 임포트할 수 있다.

import Example from '@pages/Example'

Reference

• https://www.howdy-mj.me/boilerplate/craco-absolute-paths-setting/