1. vite.config.ts

Vite의 설정 파일로, 프로젝트의 빌드 및 개발 서버 설정을 정의합니다.

✅ 주요 목적

• 플러그인 등록 (react, svgr, tsconfigPaths 등)
• 개발/프로덕션 환경 구분 설정
• 경로 별칭, 전역 변수, CORS 등 설정
• 빌드 타겟, 출력 디렉토리 등 커스터마이징

✅ 예시

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
});

2. vite-env.d.ts

• *Vite에서 제공하는 글로벌 타입들을 TypeScript에 알려주는 선언 파일(declaration file)**입니다.

✅ 주요 목적

• import.meta.env에 접근할 때 타입 오류 방지
• SVG나 이미지 등 리소스를 import할 수 있게 설정
• 커스텀 타입 정의를 통해 타입스크립트 보완

✅ 예시

/// <reference types="vite/client" />

// SVG import용 선언 추가 예시
declare module '*.svg' {
  import * as React from 'react';
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

📌 정리 비교