Vite Alias 설정하기

파일 구조가 복잡해질수록 다른 디렉터리의 파일을 import 하는 게 지저분해진다. (ex) ../../pages/signUp/index)

이때 path alias 설정을 해주면 보다 깔끔한 코드 작성이 가능하다!

 

프로젝트 환경은 Vite + Typescript 기준이다.

 

Alias란?

경로에 별칭을 붙이는 것으로 ../../pages/signUp/index 을 @/pages/signUp/index 로 변경 가능하다.

 

Alias 적용하기

yarn add -D path
yarn add -D @types/node

 

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
  },
});

 

tsconfig.json

{
  "compilerOptions": {
    ...

    /* Path Alias */
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  ...
}

 

Alias 적용하기

import SignUp from "@/pages/signUp";

 

좀 더 깔끔한 코드를 위해 미리 프로젝트 시작 전 설정해 두도록 하자 🥰🥰