[Vite, TypeScript] Vite + 타입스크립트 환경에서 절대 경로 설정하기!

상대 경로로 파일 import

우선 절대 경로를 설정하기 이전에 상대 경로로 import 했을 때의 방식은 다음과 같습니다.

import Home from './pages/Home' 
import Detail from './pages/Detail'
import ToDoLIst from '../components/ToDoLIst';

위의 경우와 같이 ./ 또는 ../을 이용하여 경로를 찾아가서 import 해야 합니다.
지금의 같은 경우는 어렵지 않게 찾아가기도 하고, 크게 가독성을 떨어뜨리지는 않는다고 볼 수 있지만,
뎁스가 깊어지고, 폴더가 다양해지면 나중에는 ../../../../파일명의 형태처럼 복잡하고 가독성이 떨어지게 됩니다.
그래서 이 문제를 해결하기 위한 방법이 절대경로를 설정하는 것입니다.

Vite 절대 경로 설정 방법

1. Vite + JavaScript

자바스크립트와 Vite를 이용한 프로젝트에서는 vite.config.js 파일에만 옵션을 설정해주면 되기 때문에
간단합니다.

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      { find: '@pages', replacement: path.resolve(__dirname, 'src/pages') },
    ]
  }
})

resolve -> alias 배열 안에 객체의 형태로 find에는 절대 경로의 별칭을, replacement에는 해당 절대 경로를 입력하면 됩니다.

// 상대경로
import CounterPage from './pages/CounterPage'

// 절대경로
import CounterPage from '@pages/CounterPage'

2. Vite + TypeScript

자바스크립트 프로젝트와는 다르게 타입스크립트 프로젝트에서는 vite.config.ts와 tsconfig.json
두 파일 모두 옵션을 추가해주어야 합니다.
vite.config.ts파일의 설정 방법은 위의 코드와 동일하기 때문에 위의 코드를 참고해주시면 됩니다.
_※ 참고로 위의 코드에 path를 타입스크립트에서 사용하기 위해서는 @types/node를 설치를 해야 합니다.

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

baseUrl 속성에는 기본 경로를 설정하고, 그 바로 아래에 paths 속성에 절대 경로를 지정하고 싶은 경로들을
별칭: 경로순으로 지정해 주면 됩니다.

baseUrl을 어떻게 설정하냐에 따라서 paths 속성의 경로 수정을 해야합니다.

"baseUrl": "src", 
"paths": {
  "@/*": ["*"],
  "@pages/*": ["pages/*"],
  "@components/*":["components/*"]
  // 기본 경로의 값이 src이기 때문에 paths 속성 경로 수정
}

참고

TypeScript - paths
TypeScript - 경로매핑
Vite - resolve.alias