Vite + TypeScript 절대경로 설정하기

개발을 하다보면 절대경로가 필요해지는 순간이 온다.

폴더구조의 깊이가 생기면서 보기에 지저분해지는 import 문이 생기기때문이다.

 예를들면, 요론느낌의 연속이 계속 되면 엄청 지저분해지는건 순식간이다!

import Input from '../../../components/Input';

 

사실 지금은 프로젝트 규모가 작아서 엄청 복잡하고 지저분한 코드는 아니지만, 나중에는 복잡하고 가독성이 떨어지게 될 것이다. 이를 방지하기 위해서 절대 경로를 설정하려고 한다.

 

여러 개발환경 중에서 나는 Vite + TypeScript 조합으로 절대경로를 설정하는 법을 기록해두려한다!

우선 내가 찾아본 방법 중에 플러그인을 설치하는 방법도 있는데 나는 프로젝트의 규모가 크지 않아서 tsconfig.json파일과 vite.config.ts파일만 수정해서 개발했다.

 

플러그인 중에는 vite-tsconfig-paths가 있는데 이 플러그인의 장점은 alias를 하나씩 설정해주지 않아도 된다는 점이다.

 

tsconfig.json

"compilerOptions": {
   // ... 
 "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@pages/*": ["pages/*"],
      "@types/*": ["types/*"],
      "@hooks/*": ["hooks/*"],
      "@assets/*": ["assets/*"]
    },
   // ... 
}

 

vite.config.ts

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@", replacement: "/src" },
      { find: "@components", replacement: "/src/components" },
      { find: "@pages", replacement: "/src/pages" },
      { find: "@types", replacement: "/src/types" },
      { find: "@hooks", replacement: "/src/hooks" },
      { find: "@assets", replacement: "/src/assets" },
    ],
  },
});

위 코드들은 폴더구조에 따라서 달라질 수 있으며, 현재 진행하고 있는 프로젝트의 폴더구조 형태에 따라 작성된 코드이다.

├─ src
│  ├─ App.tsx
│  ├─ assets
│  ├─ components
│  │  └─ ###.tsx
│  ├─ hooks
│  │  └─ ###.ts
│  ├─ index.css
│  ├─ main.tsx
│  ├─ pages
│  │  └─ ###.tsx
│  ├─ types
│  │  └─ ###.d.ts
│  └─ vite-env.d.ts
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts

내가 여기 작업하면서 실수 했던 부분이 vite.config.ts 여기서 find에는 별칭을, replacement에는 절대 경로를 입력해야하는데 별칭을 다르게 설정해서 계속 아래와 같은 에러가 발생했던 것이다.

단순히 별칭 문제인데 이 에러를 검색했더니 다른 원인들이 나와서 빙빙 둘러왔다!

@ 하나만 수정하면 되는 문제인데,, 허탈했지만 해결! 🙌