React 경로 alias 설정하기 (@ 절대경로로 import 깔끔하게 정리)

REACT 에서 @ 사용으로 경로선언 깔끔하게 하기

프로젝트 크기가 커질수록 경로가 복잡해진다.

../../../../../ 의 경로가 깊을 수록 관리 또한 어려워진다. 코딩할때 괜히 스트레스 받는다.

import logo from "../../assets/images/login.png"

이를 @로 퉁쳐서 경로에 대한 스트레스를 없애버리자!

Vite + React + TS 기준으로 설명

1.vite.config.ts 설정

@types/node 패키지 설치

// if use npm
npm install --save-dev @types/node

// if use yarn
yarn add -D @types/node

vite.config.ts 파일에서 옵션 추가

vite.config.ts

import path from "path";

export default defineConfig({
  ...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

2.tsconfig.json 설정

tsconfig.json 파일에서 옵션 추가

// tsconfig.json
{
  ...
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3.tsconfig.app.json 옵션 추가

// tsconfig.app.json
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

위와 같이 설정이 끝났다면 아래와 같이 간편하게 경로설정을 할 수 있다.

import logo from "../../assets/images/login.png" => import logo from "@/assets/images/login.png"