[React] Vite 에서 경로 별칭 Path Alias 설정

시작하기 앞서...

(참고로 react + vite + typescript 프로젝트)
프로젝트를 진행하다 보면 경로가 길어져서 코드가 지저분해 보이고 한 눈에 들어오지 않게 된다.

import LoginComponent from './components/LoginComponents/LoginComponent';

그래서 path alias 를 설정하여 import 경로를 간단하게 줄일 수 있다.

 

tsconfig.json 수정

tsconfig.json 에서 원하는 경로 별칭을 설정한다.

나는 src/ -> @/ 그리고 src/components/LoginComponents/ -> @/LoginComponents 로 설정하였다.

{
  "compilerOptions": {
    ...
    /* Path Alias */
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
      "@LoginComponents/*": ["components/LoginComponents/*"]
    }
  },
  ...
}

 

vite.config.ts 수정

vite 를 사용할 경우에 vite.config.ts 파일을 수정해야 한다.

 

vite-tsconfig-paths 플러그인

직접 코드를 작성하는 방법도 있지만 vite-tsconfig-paths 플러그인을 사용해서 간단하게 설정할 수 있다.

 

설치

해당 플러그인을 설치하고

npm install -D vite-tsconfig-paths

 

플러그인 추가

플러그인을 import 해서 pulagins 에 추가해주면 끝이다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

 

결과

경로 별칭(path alias) 을 설정한 결과, import 경로가 더 간단해졌고 한눈에 쉽게 확인할 수 있게 되었다.

// 사용 전
import LoginComponent from './components/LoginComponents/LoginComponent';

// 사용 후
import LoginComponent from '@LoginComponents/LoginComponent';