Path alias

import { useAppDispatch } from '../../../features/hooks';
import { getSearchWebtoonInfoParam } from '../../../types';

import { useAppDispatch } from '@/features/hooks';
import { getSearchWebtoonInfoParam } from '@/types';

위와 같이 상대경로를 절대경로로 바꾸기위해서 사용한다.
별칭을 붙여서 절대경로를 깔끔하게 정의할 수 있다.

craco로 Path alias 설정 순서

1. tsconfig.paths.json이라는 파일을 생성하고, 그 안에 path를 정의한다.

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
      // "@coomon/*": ["src/coomon/*"],
      // "@components/*": ["src/components/*"],
      // "@components/*": ["components/*"],
      // "@features/*": ["src/features/*"],
      // "@pages/*": ["src/pages/*"],
      // "@styles/*": ["src/styles/*"],
      // "@types/*": ["src/types/*"],
    },
  }
}

tsconfig.json에 직접 path를 설정해봤지만 에러가 발생했다.
서칭해서 찾아보니 별도의 파일에 설정해 에러가 발생하지않는다고한다.

2. tsconfig.json에 확장 경로 파일을 추가한다.

{
  ...
  "extends": "./tsconfig.paths.json" // tsconfig.paths.json 파일위치
}

3. craco 라이브러리 설치

npm i -D @craco/craco

4. 간편하게 path alias를 설정하기위해 tsconfig-paths-webpack-plugin을 설치한다.

npm install --save-dev tsconfig-paths-webpack-plugin

tsconfig.json에서 설정한 path를 웹팩에 그대로 설정해주는 플러그인이다.

5. craco.config.js 파일 생성

// craco.config.js

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));
          return webpackConfig;
        },
      },
    },
  ],
};

6. package.json 수정

// package.json

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