[React] Import path 절대 경로로 설정 (vite, typescript)

상대 경로로 import를 하다보면 아래와 같이 경로가 점점 깊어져 가독성이 떨어지고 지저분해진다.

import Checkbox from '../../../components/common/Checkbox';

프로젝트를 깔끔하게 관리하기위해 나는 절대 경로로 설정해주려고 한다!
절대 경로로 설정하고나면 아래와 같이 깔끔하게 바뀐다😇

import Checkbox from '@/components/common/Checkbox';

1. vite.config.ts 파일 설정

find에는 절대 경로의 별칭, replacement에는 해당 절대 경로를 입력하면 된다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: '@/assets', replacement: '/src/assets' },
      { find: '@/components', replacement: '/src/components' },
      { find: '@/constants', replacement: '/src/constants' },
      { find: '@/hooks', replacement: '/src/hooks' },
      { find: '@/pages', replacement: '/src/pages' },
      { find: '@/services', replacement: '/src/services' },
      { find: '@/styles', replacement: '/src/styles' },
      { find: '@/types', replacement: '/src/types' },
      { find: '@/utils', replacement: '/src/utils' },
      { find: '@', replacement: '/src' },
    ],
  },
});

2. tsconfig.json 파일 설정

baseUrl 속성에는 기본 경로를 설정하고, paths에는 절대 경로를 지정하고 싶은 경로들을
입력하면 된다.

{
    "baseUrl": "src",
    "paths": {
      "@/assets/*": ["assets/*"],
      "@/components/*": ["components/*"],
      "@/constants/*": ["constants/*"],
      "@/hooks/*": ["hooks/*"],
      "@/pages/*": ["pages/*"],
      "@/services/*": ["services/*"],
      "@/styles/*": ["styles/*"],
      "@/types/*": ["types/*"],
      "@/utils/*": ["utils/*"],
      "@/*": ["*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

참고
https://velog.io/@hunmok1027/vite-%EC%97%90%EC%84%9C-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0
https://shape-coding.tistory.com/entry/Vite-TypeScript-Vite-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-%EC%A0%88%EB%8C%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0