Vite, Typescript 상대 Path 잡는 법

tsconfig.json

      "baseUrl": ".",

      "paths": {

        "@/*": ["src/*"]

      }

각 옵션의 역할:

• baseUrl: 경로 해석의 기준이 되는 디렉터리를 지정합니다. "."로 설정하면 프로젝트 루트 디렉터리가 기준이 됩니다.
• paths: 별칭과 실제 경로 간의 매핑을 정의합니다.
  • 예를 들어, @/components/MyComponent는 src/components/MyComponent로 매핑됩니다.

사용 목적:

• 복잡한 상대 경로를 피하고 직관적으로 경로를 작성할 수 있습니다.
  // Before

  import MyComponent from '../../../components/MyComponent';

  // After

  import MyComponent from '@/components/MyComponent';
• VSCode와 같은 IDE에서 경로를 자동 완성하거나 오류를 방지할 수 있습니다.

vite.config.js

import { defineConfig } from 'vite'

import path from "path";

// https://vitejs.dev/config/

export default ({ mode }) => {

  console.log("Run Mode : " + mode);

  console.log(`directory : ${__dirname}`);

  return defineConfig({

    resolve: {

      alias: [

        { find: "@", replacement: path.resolve(__dirname, "src") }

      ]

    },

   

  })

}

각 옵션의 역할:

• resolve.alias: find와 replacement를 사용해 별칭과 실제 경로 간 매핑을 지정합니다.
  • find: "@": 코드에서 @로 시작하는 경로를 찾습니다.
  • replacement: path.resolve(__dirname, "src"): @를 프로젝트의 src 디렉터리로 매핑합니다.

사용 목적:

• tsconfig.json에서 정의한 별칭을 빌드 시에도 동일하게 사용하여 경로 오류를 방지합니다.
• 별칭이 설정되지 않은 경우 빌드 단계에서 상대 경로를 다시 설정해야 하는 불편함이 생길 수 있습니다.

vite.config.js 에 잡은 Path는 빌드시 필요한 코드이며,
tsconfig.json 은 vscode로 코딩 시에 오류 메시지를 보여주지 않기 위해서 쓰인다.

tsconfig.json에만 잡아두고 플러그인 통해서 하는 방법도 있다.
vite-tsconfig-paths 플러그인을 사용하면 tsconfig.json에서 정의한 경로 별칭을 자동으로 적용할 수 있습니다.
이 방법은 별도의 resolve.alias 설정 없이도 동작합니다.

import { defineConfig } from 'vite'

import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/

export default ({ mode }) => {

  console.log("Run Mode : " + mode);

  console.log(`directory : ${__dirname}`);

  return defineConfig({

    plugins: [tsconfigPaths()],

   

  })

}

플러그인의 동작 원리:

• tsconfig.json에서 설정한 baseUrl과 paths를 읽어와 Vite의 경로 설정에 자동으로 반영합니다.
• 개발자 입장에서는 설정이 더 간단해지고, 관리 포인트가 줄어듭니다.

 

각 방법의 장단점 비교

방법	장점	단점
tsconfig.json + vite.config.js	- 경로 별칭을 세부적으로 제어 가능 - 모든 설정이 명시적으로 드러남	- 두 파일에서 동일한 설정을 중복 작성해야 함
tsconfig.json + 플러그인	- 설정이 간단하고 유지보수가 쉬움 - 플러그인이 자동으로 경로를 매핑	- 추가적인 플러그인을 설치해야 함