React 에서 vite.config.js 경로 alias 설정

셋팅

vite 기반으로 React 를 만든 다음에 경로를 쉽게 사용할 수 있도록 alias 로 셋팅합니다.

1. new URL("./src", import.meta.url)
- 이 코드는 현재 모듈을 기준으로 상대 경로 "./src"를 가리키는 URL 객체를 만듭니다.
- import.meta.url은 현재 모듈의 URL을 나타냅니다.

2. fileURLToPath(new URL("./src", import.meta.url)):
- new URL("./src", import.meta.url)를 통해 생성된 URL 객체를 fileURLToPath 함수에 전달합니다.
- fileURLToPath 함수는 파일 URL을 파일 경로 문자열로 변환합니다.

3. fileURLToPath(new URL("./src", import.meta.url))
- 위에서 얻은 URL 객체를 fileURLToPath 함수에 전달하여 파일 경로 문자열로 변환합니다.
- 결과: "/Users/username/project/src"

따라서, 전체 코드가 실행되면 상대 경로 "./src"가 포함된 현재 모듈의 파일 경로를 나타내는 문자열이 반환됩니다.
좀 더 효율적으로 할라면, alias 를 만들어주는 함수를 별도로 만들어서 관리해주면 됨.
아래 처럼 getAliasPath 라는 콜백함수를 하나 만들어서 관리해주도록 하자.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { fileURLToPath, URL } from "url";

// alias path 를 만들어주는 콜백함수
const getAliasPath = (path) => {
  return fileURLToPath(new URL(path, import.meta.url));
};

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": getAliasPath("./src"),
      "@assets": getAliasPath("./src/assets"),
      "@components": getAliasPath("./src/components"),
      "@pages": getAliasPath("./src/pages"),
      "@zustand": getAliasPath("./src/zustand"),
      "@store": getAliasPath("./src/store"),
      "@apis": getAliasPath("./src/apis"),
    },
  },
  // scss 전역 사용
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/styles/scss/main.scss";`,
      },
    },
  },
});