[React + typescript] 절대 경로 설정

Craco 설치

npm i @craco/craco

npm i -D craco-alias

1. Package.json 파일 수정

// packeage.json
{
	...
	"scripts": {
		"start": "craco start",
		"build": "craco build",
		"test": "craco test",
	},
    ...
}

2. tsconfig.path.json 파일 루트에 생성하고 paths 설정

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

3. root 경로에 craco.config.js 파일 생성

//craco.config.js
const CracoAlias = require("craco-alias");

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

4. tsconfig.json 파일에 extends 추가

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

5. 끝

import { changeMoneyForm } from '@/utils/changeMoneyForm';
import { removeComma } from '@/utils/removeComma';

마무리

더욱 직관적으로 import가 가능해서 훨씬 편하다. 설정하는데 얼마 안 걸리니까 depth가 깊다면 절대 경로로 후딱 설정해보길 바란다~😋

참고
https://jacobko.info/react/react_14/