[TypeScript] Vite 절대 경로를 설정하는 방법

프로젝트할 때 상대경로를 사용하면 depth의 깊이가 깊어질 때 ../../ 가 많아져 코드가 길어지고, 경로를 파악하기에도 불편했다.

리팩토링할 때, 유지보수할 때도 관리하기 불편함이 생겨 절대경로를 사용하였다.

 

적용 방법

타입스크립트를 사용한 프로젝트에서는 tsconfig.json 파일에서 수정한다.

"compilerOptions"에 코드를 추가하면 바로 절대경로 코드 사용이 가능하다.

 

{
  "compilerOptions": {
  
    /* 절대경로 추가 코드 */
    "baseUrl": ".", // 기본 경로
    "paths": {
      "@/*": ["*"] // "기본 경로를 대체할 문자/입력할 경로": ["실제 경로"]
    },
    /* --- */

    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

 

Vite를 사용할 경우 vite.config.ts에도 변경이 필요하다.

export default defineConfig({
  plugins: [react()],
  /* 절대경로 추가 코드 */
  resolve: {
    alias: [{ find: '@', replacement: '' }],
  },
  /* --- */
});

alias에 배열로, 찾을 경로와 바꿀 경로를 써준다 루트경로가 @ 로 변경될 것이다.

 

실제 코드 적용

import logo from '@/public/logo.png';

 

기본 경로를 @로 설정하여 현재 파일의 위치와 상관없이 경로파악이 쉽고 깔끔한 코드 구현이 가능하게 되었다.