리액트, 타입스크립트에서 @ 경로 별칭 사용하기 (절대경로 사용하기)

 

프로젝트를 하다가 설정 파일을 헤맨 후에 정리를 위해 작성해본다.

 

---

 

경로 별칭(Path Alias)은 파일이나 컴포넌트 import 시

현재 파일을 기준으로 상대경로 대신, 절대경로를 지정해주는 기능이다.

// 기존
import { errorMessage } from "../../../utils/validation";

// 경로 별칭 지정 후
import { errorMessage } from "@/utils/validation";

 

경로에 별칭을 지정해주게 되면 코드의 가독성이 높아지고, 유지보수가 쉬워진다는 장점이 있다.

 

리액트 글만 찾아보고 설정을 적용했더니 코드에서 자꾸 경로를 제대로 못 찾는 에러가 발생했다.. 😔

현재 프로젝트에서는 타입스크립트를 같이 사용하기 때문에 타입스크립트 설정도 해줘야 한다.

 

그럼 설정할 두 기능을 알아보자.

 

---

 

Vite의 resolve.alias 설정

resolve.alias 설정을 아래와 같이 추가해준다.

vite 설정이기 때문에 실제로 브라우저에서 코드 번들링 시에 사용된다.

번들링 단계에서 에러가 나기 때문에 코드에서는 에러를 표시하지 않음.

 

// vite.config.ts

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

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

 

타입스크립트의 paths 설정

compilerOptions.paths 설정에 아래와 같이 추가해준다.

타입 검사, 자동완성 등에 사용되기 때문에 import 경로에서 에러가 실제로 발생.

// tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "moduleResolution": "node",
    "types": ["node"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

// tsconfig.app.json

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

 

 

---

 

vite.config.ts에서 내장 모듈인 path를 인식하지 못한다면? 또는 __dirname을 찾을 수 없을 때.

타입 선언 파일이 없어서 생긴 문제.

npm install -D @types/node

 

위 모듈은 Node 내장 객체들의 타입 정보를 제공해준다.

-> path, __dirname 같은 전역 개념을 쓸 수 있게 만들어 준다고 함.