[TIL 53] Typescript | 절대경로 설정

import할때 상대경로로 작성하면 폴더 구조의 뎁스가 깊어질수록 코드가 길어지고 복잡해진다.

절대경로를 사용하기 위해서는 tsconfig.json을 수정하면 되지만 어쩐 일인지 npm start를 해서 프로젝트를 시작하면 path부분의 설정이 계속 사라졌다. 🤔
CRA는 내부적으로 webpack을 사용하지만, 숨겨져 있기 때문에 eject 하지 않는 이상 수정할 수 없다는 것이 원인이였다.
그래서 구글링을 해서 찾게 된 craco!!!!

carco

Create React App Configuration Override

이름을 봐서는 CRA의 설정을 override로 쉽게 설정할 수 있게 해주는 라이브러리같다.
메소드 오버라이딩 생각하니까 이해하기 쉬웠다.

공식문서에 따르면 애플리케이션 루트에 craco.config.js 파일을 추가하여 'eject'를 사용하지 않고도 CRA의 모든 이점을 누리면서 eslint, babel, postcss 구성을 커스텀할 수 있는 기능을 지니고 있다고 한다.

설치

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

혹은,

$ npm install @craco/craco --save
$ npm install craco-alias --save

craco.config.js

루트 레벨에 craco.config.js를 생성하고 다음과 같이 내용을 작성한다.

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

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

Options 설정

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

나는 src 밑의 폴더들을 절대경로로 설정하려고 하기 때문에 baseUrl을 src폴더로 설정하고 tsConfigPath 파일명을 설정해주었다.

tsconfig.path.json

마찬가지로 루트레벨에 tsconfig.path.json을 생성하고 밑의 내용을 작성해주었다.

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["./components/*"],
      "@styles/*": ["./styles/*"],
      "@atoms": ["./common/atoms"],
      "@pages/*": ["./pages/*"],
      "@constants": ["./common/constants"]
    }
  }
}

tsconfig.json, package.json

마지막으로 tsconfig.json과 package.json의 내용을 수정해준다.

tsconfig.json

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

package.json

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

여기까지 설정을 마치면 이제 모든 곳에서 다음과 같이 import해올 수 있다👏🏻