Vite + React + TS 프로젝트에서 절대 경로 설정하기

오늘은 Vite + React + TS 프로젝트에서 절대 경로를 설정하는 방법에 대해서 알아보겠다

 

 

Alias 설정

Alias는 프로젝트 내에서 특정 경로를 짧고 간단하게 표현하기 위해 사용하는 별칭이다.

예를 들어, '../../components/Button' 같은 상대 경로 대신 '@/components/Button' 같은 간단한 경로를 사용할 수 있다.

 

Vite TypeScript 기반 프로젝트에서 절대 경로를 설정한다면 다음 두 가지 주요 파일을 수정해야한다.

 

1. vite.config.ts

Vite 설정 파일을 관리하기에 앞서 @types/node 패키지를 설치해주어야한다.

@types/node 패키지는 Node.js의 기본 모듈 (path, fs 등)에 대한 타입 정의를 제공하는 패키지로,
절대 경로 설정을 위해 path 참조하기 때문에 설치해주어야한다.

@types/node는 실제 런타임에서 사용되지 않으나 빌드와 같은 작업에서 필요한 패키지이므로, devDependencies로 구분해 설치해준다.

// if use npm
npm install --save-dev @types/node

// if use yarn
yarn add -D @types/node

 

 

Vite의 설정파일에서 resolve.alias 옵션을 사용해 별칭을 정의한다.

// vite.config.ts
...
import path from "path";

export default defineConfig({
  ...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

 

 

2. tsconfig.json

TypeScript가 별칭을 인식하도록 compilerOptions.paths를 설정한다.

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

 

 

3. tsconfig.app.json

만약 VScode Editor에서 "'@/App.tsx' 모듈 또는 해당 형식 선언을 찾을 수 없습니다." 와 같은 에러가 나면 tsconfig.app.json 파일에서도 alias를 설정해주자.

프로젝트 실행에서는 문제가 없지만,,, 화면에 Error 가 거슬리므로 해결하자.

 

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

 

 

이렇게 3가지의 파일을 설정해주면 문제없이 절대경로를 설정할 수 있다!

 

 

참조

• TSConfig Reference - Docs on Every TSConfig option
• vitejs - Shared Options