React, 절대 경로 설정 (Vite 기준)

TypeScript 기준으로 쓰였습니다.

1. tsconfig.json Setting

혹은 tsconfig.app.json 파일에 설정

 

baseURL 및 path 설정

src 혹은 자신이 원하는 임의의 디렉토리 위치를 설정하면 됩니다.

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

2. vite.config.ts Setting

tsconfig.json 뿐만 아니라 번들러 모듈 설정도 필요합니다.

만약 WebPack으로 설치하셨다면 webpack.config로 작성하시면 됩니다.

 

(1) vite-tsconfig-paths모듈 설치

npm install vite-tsconfig-paths

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
});

(2) src 기준으로 모듈 경로 매핑 설정

 

3. vite.config.ts Setting

import { getAPIData, setAPIUrl } from '@/components/API/api';

 

원하는 경로로 절대 경로 path 지정 완료