상대 경로와 절대 경로 ( Feat. vite )

1. 상대 경로

파일이 위치한 기준으로 경로를 파악한다.

종류	내용
/	root
./	현재 위치한 폴더
../	현재 위치한 폴더의 상단 폴더

2. 절대 경로

어떠한 파일을 기준의 고유한 경로를 의미 한다.

3. React Typescript 절대 경로 설정( Vite )

1 ) tsconfig.json

{
  "compilerOptions": {

    /** path */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@page/*": ["src/page/*"],
      "@type/*": ["src/type/*"],
      "@style/*": ["src/style/*"],
      "@utils/*": ["src/utils/*"],
      "@components/*": ["src/components/*"],
    }
  },

  "include": ["src", "**/*.ts", "**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

2 ) Vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      /** path */
      { find: "@", replacement: "/src" },
      { find: "@type", replacement: "/src/type" },
      { find: "@page", replacement: "/src/page" },
      { find: "@style", replacement: "/src/style" },
      { find: "@utils", replacement: "/src/utils" },
      { find: "@components", replacement: "/src/components" },
    ],
  },
})