[React] react + vite + typescript 절대경로 설정방법

1. path 관련 npm 설치

npm install -D @types/node

 

2. vite.config.ts 파일 설정

- import path from 'path' 

- resolve 추가

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@components": path.resolve(__dirname, "./src/components"),
      "@css": path.resolve(__dirname, "./src/assets/css"),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@types": path.resolve(__dirname, "./src/types"),
    },
    extensions: [
      ".js",
      ".jsx",
      ".ts",
      ".tsx",
      ".svg",
      ".png",
      ".jpg",
      ".jpeg",
      ".gif",
      ".css",
    ],
  },
})

 

3. tsconfig.app.json 파일 설정

- "paths" 부분 추가 하면 됨

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    "paths": {
      "@/*": ["./src/*"],
      "@pages/*": ["./src/pages/*"],
      "@contents/*": ["./src/contents/*"],
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"],
      "@css/*": ["./src/assets/css/*"],
      "@assets/*": ["./src/assets/*"]
    }
  },
  "include": ["src"]
}

4. import 에서 적용 방법 

import Home from './assets/home.svg?react' //기존 코드
import Home from '@assets/home.svg?react' //변경 코드