사용목적

파일 작업을 하다보면 폴더 이동이라던가 일반화라던가 옮길상황이 은근히 생긴다.
이떄 경로단위로 설정해주면 파일 경로를 일일이 수정하기 편하고 시간이 많이 줄어든다.

개요

다음 두 파일을 모두 작업한다.

• vite.config.ts
• tsconfig.json

이때 path 사용은 Types node 설치를 동반한다.

• @types/node 설치하여야 함.

npm i -D @types/node

타입스크립트에서 path 사용을 위하여 설치

• 자바스크립트 기반 노드 프로젝트에서는 그냥 import path from 'path'로 바로 가져올 수 있지만,
• 타입스크립트에서는 다음처럼 개발 디펜던시로 설치해 주어야 함.
  • (다른 의존성이 포함하는 경우도 있겠지만 vite에서 기본 제너레이팅된 리액트 타입스크립트 템플릿 프로젝트는 관련 의존성 라이브러리를 품지 않는 것으로 보임.)

임포트 및 작업(vite.config.ts)

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
			"@": path.resolve(__dirname, "./src"),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@components": path.resolve(__dirname, "./src/components"),
      "@data": path.resolve(__dirname, "./src/data"),
      "@models": path.resolve(__dirname, "./src/models"),
      "@store": path.resolve(__dirname, "./src/store"),
      "@styles": path.resolve(__dirname, "./src/styles"),
      "@utils": path.resolve(__dirname, "./src/utils"),
    },
  },
  root: ".",
  build: {
    outDir: "../dist/shop",
  },
});

Tsconfig 작성(tsconfig.json)

• “compilerOptions”.”baseUrl”

  • “compilerOptions”.”types” = [”node”]
    (아까 설치한 @types/node 적용을 위함.)

• 프로젝트 루트를 기준으로 하는 ‘프로젝트 절대경로’ 사용을 위하여 사용하나, Vite + Types 조합에서 안 먹는 것으로 짐작함.

• “compilerOptions”.”paths” = { ... }

  • “@/”: [ “./src/” ],
    • 골뱅이 슬래시로 시작하는 경로가 있으면
    • Value에 작성한 배열에 담긴 모든 경로를 순차적으로 탐색하는 것으로 생각함.

{
 "compilerOptions": {
   "target": "ESNext",
   "types": ["node"],
   "paths": {
     "@/*": ["./src/*"],
     "@assets/*": ["./src/assets/*"],
     "@components/*": ["./src/components/*"],
     "@data/*": ["./src/data/*"],
     "@models/*": ["./src/models/*"],
     "@store/*": ["./src/store/*"],
     "@styles/*": ["./src/styles/*"],
     "@utils/*": ["./src/utils/*"]
   },
   "useDefineForClassFields": true,
   "lib": ["DOM", "DOM.Iterable", "ESNext"],
   "allowJs": false,
   "skipLibCheck": true,
   "esModuleInterop": false,
   "allowSyntheticDefaultImports": true,
   "strict": true,
   "forceConsistentCasingInFileNames": true,
   "module": "ESNext",
   "moduleResolution": "Node",
   "resolveJsonModule": true,
   "isolatedModules": true,
   "noEmit": true,
   "jsx": "react-jsx"
 },
 "include": ["src"],
 "references": [{ "path": "./tsconfig.node.json" }]
}

그밖에도 혹시 사용할 jsx 등 필요한 옵션들을 추가해줬다.

기존의 경로는 파일을 옮기면 그파일 기준에서 상위로 두번가서 잘못된 파일을 찾고 오류를 발생시킬것이고
아래 새로 적용한 경로 앨리어싱은 파일을 옮겨도 정상적으로 찾아서 사용자의 실수를 줄여줄것이다.