웹 개발2026-05-18·10분 읽기

Vite Build Tool: Modern Frontend Development를 위한 완벽 가이드

Vite의 빠른 개발 서버와 최적화된 빌드 시스템을 소개하고, React, TypeScript, CSS와 함께 Vite를 활용하는 방법을 실전 예제와 함께 자세히 다룹니다.

Vite Build Tool: Modern Frontend Development를 위한 완벽 가이드

최신 웹 개발 환경에서 프론트엔드 프로젝트의 빌드 및 개발 속도는 생산성에 직접적인 영향을 미칩니다. 과거에는 Webpack과 같은 번들러가 주류였지만, 최근에는 Vite와 같은 새로운 빌드 도구가 혁신적인 속도와 편의성을 제공하며 많은 개발자의 사랑을 받고 있습니다. 이 글에서는 Vite가 무엇인지, 왜 필요한지, 그리고 React, TypeScript, CSS와 같은 현대적인 프론트엔드 기술 스택과 함께 Vite를 어떻게 효과적으로 활용할 수 있는지 심층적으로 다루겠습니다.

Vite란 무엇이며 왜 필요한가요?

Vite는 Vue.js의 창시자인 Evan You가 개발한 차세대 프론트엔드 빌드 도구입니다. "Vite"는 프랑스어로 "빠르다"는 뜻을 가지고 있으며, 이름처럼 개발 서버 구동 및 HMR(Hot Module Replacement) 속도에서 압도적인 성능을 자랑합니다. 기존 번들러 기반의 개발 환경이 가진 느린 시작 시간과 HMR 업데이트 지연 문제를 해결하기 위해 등장했습니다.

ESM-native 개발 서버의 혁신

Vite의 핵심은 ES Modules(ESM)를 기반으로 하는 개발 서버입니다. 기존 번들러는 모든 소스 코드를 미리 번들링한 후 브라우저에 제공했습니다. 프로젝트 규모가 커질수록 이 초기 번들링 시간이 길어져 개발 서버를 띄우는 데만 수 분이 걸리기도 했습니다. 반면 Vite는 개발 시 소스 코드를 번들링하지 않고, 브라우저가 요청하는 모듈만 즉시 변환하여 제공합니다. 이는 브라우저의 ESM 기능을 활용하여 모듈 의존성을 직접 처리하게 함으로써 가능한 일입니다.

빠른 서버 시작: 초기 번들링이 없어 개발 서버를 거의 즉시 시작할 수 있습니다.
빠른 HMR: 변경된 모듈만 정확히 교체하여 브라우저에 반영하므로, 대규모 애플리케이션에서도 HMR이 매우 빠르게 동작합니다.

Rollup 기반의 프로덕션 빌드

개발 환경에서는 ESM-native 방식을 사용하지만, 프로덕션 환경에서는 여전히 최적화된 번들링이 필요합니다. Vite는 프로덕션 빌드 시에는 Rollup을 사용합니다. Rollup은 작고 효율적인 번들을 생성하는 데 강점이 있으며, 트리 쉐이킹(Tree Shaking)과 같은 최적화 기법을 통해 최종 번들 크기를 최소화합니다. 이를 통해 개발 속도뿐만 아니라 배포된 애플리케이션의 성능까지 고려한 완벽한 솔루션을 제공합니다.

Vite vs. Webpack: 간략 비교

다음 표는 Vite와 Webpack의 주요 차이점을 비교합니다.

기능/특징	Vite	Webpack (기존)
개발 서버	ESM-native (번들링 없음)	번들러 기반 (사전 번들링)
시작 속도	매우 빠름 (거의 즉시)	느림 (프로젝트 규모에 비례)
HMR 속도	매우 빠름 (변경 모듈만 교체)	느림 (변경 범위가 넓어질 수 있음)
프로덕션 빌드	Rollup 사용 (최적화된 번들)	Webpack 자체 번들러 (다양한 설정 가능)
설정 복잡성	간결하고 직관적	복잡하고 방대함 (학습 곡선 높음)
플러그인	Rollup 플러그인 호환, Vite 전용 플러그인	Webpack 전용 로더/플러그인

Vite 프로젝트 시작하기: 기본적인 설정

Vite 프로젝트를 시작하는 것은 매우 간단합니다. npm create vite@latest 명령어를 통해 다양한 프레임워크 템플릿을 기반으로 프로젝트를 생성할 수 있습니다.

프로젝트 생성

터미널에서 다음 명령어를 실행하여 새로운 Vite 프로젝트를 생성합니다.

npm create vite@latest

# 또는 yarn
# yarn create vite

# 또는 pnpm
# pnpm create vite

명령어를 실행하면 프로젝트 이름과 사용할 프레임워크(React, Vue, Svelte 등), 그리고 TypeScript 사용 여부를 선택하라는 메시지가 나타납니다.

? Project name: my-vite-app
? Select a framework: react
? Select a variant: typescript

선택을 완료하면 my-vite-app 디렉토리가 생성됩니다. 해당 디렉토리로 이동하여 의존성을 설치하고 개발 서버를 실행할 수 있습니다.

cd my-vite-app
npm install
npm run dev

npm run dev를 실행하면 개발 서버가 구동되고, 터미널에 출력되는 로컬 주소(예: http://localhost:5173)로 접속하면 애플리케이션을 확인할 수 있습니다.

기본적인 프로젝트 구조

생성된 Vite 프로젝트의 기본 구조는 다음과 같습니다.

my-vite-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

index.html: 애플리케이션의 진입점입니다. Vite는 index.html을 개발 서버의 메인 페이지로 사용하며, <script type="module" src="/src/main.tsx"></script>와 같은 스크립트 태그를 통해 ESM 기반으로 애플리케이션을 로드합니다.
src/: 소스 코드가 위치하는 디렉토리입니다.
public/: 정적 자산(예: 파비콘, 이미지)을 저장하는 디렉토리입니다. 이 안의 파일들은 빌드 시 루트 경로로 복사됩니다.
vite.config.ts: Vite 설정을 정의하는 파일입니다.
package.json: 프로젝트의 의존성 및 스크립트를 정의합니다.

// package.json
{
  "name": "my-vite-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

scripts 섹션을 보면 dev, build, preview 명령어를 확인할 수 있습니다.

npm run dev: 개발 서버를 시작합니다.
npm run build: 프로덕션 빌드를 수행합니다. tsc로 TypeScript 타입을 검사하고, vite build로 Rollup을 이용해 번들링합니다.
npm run preview: 빌드된 프로덕션 번들을 로컬에서 미리보기 위한 서버를 실행합니다.

React 및 TypeScript와 함께 Vite 활용하기

Vite는 React와 TypeScript를 기본적으로 지원하며, 별도의 복잡한 설정 없이 바로 사용할 수 있습니다. @vitejs/plugin-react 플러그인이 JSX 변환 및 HMR을 처리해줍니다.

간단한 React 컴포넌트 생성

src/App.tsx 파일을 다음과 같이 수정하여 간단한 React 컴포넌트를 만들어보겠습니다.

// src/App.tsx
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg'; // public 디렉토리의 파일은 루트 경로에서 접근 가능
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React + TypeScript</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

src/main.tsx 파일은 애플리케이션의 진입점 역할을 합니다.

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Vite는 tsconfig.json 파일을 자동으로 감지하여 TypeScript 컴파일을 처리합니다. vite-env.d.ts 파일은 Vite 환경 변수 및 타입 정의를 포함합니다.

// src/vite-env.d.ts
/// <reference types="vite/client" />

이처럼 Vite는 React와 TypeScript 환경을 위한 보일러플레이트 설정을 최소화하여 개발자가 즉시 코드 작성에 집중할 수 있도록 돕습니다.

CSS Preprocessor 및 PostCSS 연동

Vite는 CSS Preprocessor (Sass, Less, Stylus)와 PostCSS를 별도의 설정 없이 자동으로 감지하고 처리합니다.

CSS Preprocessor 사용하기

예를 들어, Sass를 사용하려면 sass 패키지만 설치하면 됩니다.

npm install -D sass

이제 .scss 파일을 생성하고 컴포넌트에서 임포트하여 사용할 수 있습니다.

/* src/styles/variables.scss */
$primary-color: #646cff;
$secondary-color: #535bf2;

/* src/App.scss */
@import './styles/variables.scss';

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em $primary-color);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em $secondary-color);
}

src/App.tsx에서 이 파일을 임포트합니다.

// src/App.tsx
// ...
import './App.scss'; // .css 대신 .scss 임포트
// ...

Vite는 .scss, .less, .styl 확장자를 가진 파일을 자동으로 Preprocessor를 통해 CSS로 변환합니다.

PostCSS 연동

PostCSS는 CSS를 JavaScript 플러그인을 통해 변환하는 도구입니다. Autoprefixer, Tailwind CSS와 같은 도구들이 PostCSS 플러그인으로 제공됩니다. Vite는 프로젝트 루트에 postcss.config.js 또는 postcss.config.cjs 파일을 감지하면 자동으로 PostCSS를 적용합니다.

예를 들어, Autoprefixer를 사용하려면 다음을 설치합니다.

npm install -D postcss autoprefixer

그리고 postcss.config.js 파일을 생성합니다.

// postcss.config.js
export default {
  plugins: {
    autoprefixer: {},
  },
};

이제 Vite는 빌드 과정에서 CSS에 자동으로 벤더 프리픽스를 추가합니다. Tailwind CSS를 사용한다면, tailwind.config.js와 함께 postcss.config.js에 Tailwind CSS 플러그인을 추가하면 됩니다.

// postcss.config.js (Tailwind CSS 예시)
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

이처럼 Vite는 CSS 관련 도구들을 최소한의 설정으로 통합할 수 있도록 지원하여 개발 워크플로우를 간소화합니다.

Vite 설정 파일 깊이 알아보기: `vite.config.ts`

vite.config.ts 파일은 Vite의 동작 방식을 세밀하게 제어할 수 있는 핵심 설정 파일입니다. defineConfig 헬퍼 함수를 사용하여 타입스크립트 지원을 받으며 설정을 정의합니다.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path'; // Node.js path 모듈 임포트

// https://vitejs.dev/config/
export default defineConfig({
  // 1. 플러그인 설정
  plugins: [react()],

  // 2. 개발 서버 설정
  server: {
    port: 3000, // 개발 서버 포트
    open: true, // 서버 시작 시 자동으로 브라우저 열기
    proxy: { // API 프록시 설정
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

  // 3. 빌드 설정
  build: {
    outDir: 'dist', // 빌드 결과물이 저장될 디렉토리
    sourcemap: true, // 소스맵 생성 여부
    rollupOptions: { // Rollup에 전달할 추가 옵션 (고급 설정)
      output: {
        manualChunks(id) { // 청크 분리 전략
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
      },
    },
  },

  // 4. 경로 별칭 설정
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // @/components -> src/components
      '~': path.resolve(__dirname, './src/assets'), // ~/images -> src/assets/images
    },
  },

  // 5. 전역 CSS 변수 또는 Mixin 주입 (선택 사항)
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`, // 모든 scss 파일에 전역 변수 주입
      },
    },
  },
});

주요 설정 옵션들은 다음과 같습니다.

plugins: Vite의 기능을 확장하는 플러그인을 배열로 등록합니다. react()는 @vitejs/plugin-react 플러그인으로, React HMR 및 JSX 변환을 담당합니다.
server: 개발 서버의 동작을 설정합니다. port, open 외에도 백엔드 API와의 통신을 위한 proxy 설정이 유용하게 사용됩니다.
build: 프로덕션 빌드와 관련된 설정을 정의합니다. outDir로 빌드 결과물의 출력 경로를 지정하고, sourcemap으로 디버깅을 위한 소스맵 생성 여부를 결정합니다. rollupOptions를 통해 Rollup의 고급 설정을 직접 제어할 수 있습니다.
resolve.alias: 모듈 임포트 시 사용할 경로 별칭을 설정합니다. path.resolve를 사용하여 절대 경로로 지정하는 것이 일반적입니다. 이는 긴 상대 경로 대신 @/components/Button처럼 간결하게 모듈을 임포트할 수 있게 해줍니다.
css.preprocessorOptions: CSS 전처리기에 추가 옵션을 전달할 수 있습니다. 예를 들어, scss의 additionalData 옵션을 사용하여 모든 SCSS 파일에 특정 변수나 믹스인을 자동으로 주입할 수 있습니다.

이 외에도 envDir, base, publicDir 등 다양한 설정 옵션을 통해 프로젝트의 요구사항에 맞춰 Vite를 커스터마이징할 수 있습니다.

Vite의 강력한 기능들

Vite는 빠른 속도 외에도 개발 경험을 향상시키는 여러 강력한 기능을 제공합니다.

Hot Module Replacement (HMR)

Vite의 HMR은 앞서 언급했듯이 매우 빠릅니다. 코드를 수정하면 페이지 전체를 새로고침하지 않고 변경된 모듈만 교체하여 애플리케이션의 상태를 유지한 채로 즉시 업데이트를 반영합니다. 이는 특히 React 컴포넌트 상태를 유지하면서 UI 변경 사항을 확인해야 할 때 매우 유용합니다.

Asset Handling

Vite는 이미지, 폰트, 미디어 파일 등 다양한 정적 자산을 효율적으로 처리합니다.

import를 통한 자산 임포트: .svg, .png, .jpg 등 파일을 JavaScript/TypeScript 모듈처럼 임포트하면 빌드 시 URL이 자동으로 처리됩니다.

function MyComponent() { return <img src={logo} alt="Logo" />; } `

public 디렉토리: public 디렉토리에 있는 파일들은 빌드 시 그대로 dist 폴더의 루트로 복사됩니다. index.html에서 <link rel="icon" href="/favicon.ico" />와 같이 루트 경로에서 직접 접근할 수 있으며, 자바스크립트 코드에서는 '/favicon.ico'와 같이 절대 경로로 접근할 수 있습니다.

Environment Variables

Vite는 환경 변수를 쉽게 관리할 수 있는 기능을 제공합니다. .env 파일을 사용하여 개발 및 프로덕션 환경에 따른 변수를 정의할 수 있습니다.

.env: 모든 환경에서 로드되는 기본 환경 변수
.env.development: 개발 환경에서만 로드되는 변수
.env.production: 프로덕션 환경에서만 로드되는 변수

환경 변수는 VITE_ 접두사를 붙여야 클라이언트 사이드 코드에서 import.meta.env 객체를 통해 접근할 수 있습니다.

# .env
VITE_API_URL=http://localhost:8080/api

# .env.production
VITE_API_URL=https://api.yourdomain.com

클라이언트 코드에서 환경 변수 사용 예시:

// src/services/api.ts
const API_BASE_URL = import.meta.env.VITE_API_URL;

async function fetchData() {
  const response = await fetch(`${API_BASE_URL}/data`);
  return response.json();
}

import.meta.env는 Vite가 제공하는 특별한 객체로, 환경 변수 외에도 import.meta.env.MODE (현재 모드: development 또는 production), import.meta.env.DEV, import.meta.env.PROD와 같은 유용한 정보를 제공합니다.

Glob Import

Vite는 파일 시스템에서 여러 모듈을 한 번에 임포트할 수 있는 Glob Import 기능을 지원합니다. 이는 컴포넌트 라이브러리, 라우팅 설정 등에서 유용하게 사용될 수 있습니다.

// src/components/index.ts
// src/components/Button.tsx
// src/components/Input.tsx

// src/main.ts 또는 필요한 곳에서
const modules = import.meta.glob('./components/*.tsx');

for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod); // 각 컴포넌트 모듈을 비동기적으로 로드
  });
}

// 또는 즉시 로드 (eager)
const eagerModules = import.meta.glob('./components/*.tsx', { eager: true });
console.log(eagerModules); // { './components/Button.tsx': { default: [Function] }, ... }

이 기능은 특정 디렉토리의 모든 파일을 동적으로 로드해야 할 때 코드를 간결하게 유지하는 데 도움을 줍니다.

Next.js와 Vite: 각자의 강점

Next.js는 React 기반의 풀스택 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트 등 강력한 기능을 제공하며 자체적인 빌드 시스템(Webpack 또는 Turbopack)을 사용합니다. 반면 Vite는 주로 SPA(Single Page Application) 개발에 최적화된 빌드 도구입니다.

이 둘은 서로 다른 목적과 강점을 가지고 있으므로, 프로젝트의 요구사항에 따라 선택하거나 보완적으로 활용할 수 있습니다.

Next.js:
- 강점: SSR, SSG, ISR 등 다양한 렌더링 전략 지원, 파일 시스템 기반 라우팅, API 라우트, 이미지 최적화 등 풀스택 개발에 필요한 기능들을 내장. SEO 및 초기 로딩 성능에 유리.
- 주요 사용 사례: 블로그, 이커머스, 마케팅 웹사이트 등 SEO와 빠른 초기 로딩이 중요한 애플리케이션.
Vite:
- 강점: 압도적으로 빠른 개발 서버 시작 및 HMR 속도, 간결한 설정, 다양한 프론트엔드 프레임워크 지원, Rollup 기반의 최적화된 SPA 빌드.
- 주요 사용 사례: 관리자 페이지, 대시보드, 복잡한 클라이언트 사이드 로직을 가진 SPA, 라이브러리 개발 등 개발 생산성이 중요한 애플리케이션.

만약 SSR이나 SSG와 같은 Next.js의 핵심 기능이 필요하지 않다면, Vite는 React SPA 개발에 있어 훨씬 빠르고 간결한 대안이 될 수 있습니다. 특히 프로토타이핑이나 클라이언트 사이드 중심의 애플리케이션에서는 Vite의 개발 경험이 독보적입니다. 일부 개발자들은 Next.js 프로젝트 내에서 Storybook과 같은 UI 컴포넌트 개발 환경을 Vite로 구성하여 개발 속도를 향상시키기도 합니다.

마무리

Vite는 현대 프론트엔드 개발 환경에서 혁신적인 속도와 뛰어난 개발 경험을 제공하는 강력한 Build Tool입니다. ESM-native 개발 서버를 통한 빠른 시작과 HMR, Rollup 기반의 최적화된 프로덕션 빌드는 물론, React, TypeScript, CSS Preprocessor, PostCSS 등 다양한 기술 스택과의 매끄러운 통합을 지원합니다.

이 가이드를 통해 Vite의 기본 개념부터 실제 프로젝트에 적용하는 방법, 그리고 고급 설정까지 폭넓게 이해하셨기를 바랍니다. Vite를 활용하여 더욱 빠르고 효율적인 웹 개발을 경험하고, 궁극적으로 개발 생산성을 한 단계 끌어올리시길 권장합니다.

#Vite#React#TypeScript#Frontend#JavaScript#Build Tool#Web Development#CSS

Vite Build Tool: Modern Frontend Development를 위한 완벽 가이드

Vite의 빠른 개발 서버와 최적화된 빌드 시스템을 소개하고, React, TypeScript, CSS와 함께 Vite를 활용하는 방법을 실전 예제와 함께 자세히 다룹니다.

Vite Build Tool: Modern Frontend Development를 위한 완벽 가이드

Vite란 무엇이며 왜 필요한가요?

ESM-native 개발 서버의 혁신

빠른 서버 시작: 초기 번들링이 없어 개발 서버를 거의 즉시 시작할 수 있습니다.
빠른 HMR: 변경된 모듈만 정확히 교체하여 브라우저에 반영하므로, 대규모 애플리케이션에서도 HMR이 매우 빠르게 동작합니다.

Rollup 기반의 프로덕션 빌드

Vite vs. Webpack: 간략 비교

다음 표는 Vite와 Webpack의 주요 차이점을 비교합니다.

기능/특징	Vite	Webpack (기존)
개발 서버	ESM-native (번들링 없음)	번들러 기반 (사전 번들링)
시작 속도	매우 빠름 (거의 즉시)	느림 (프로젝트 규모에 비례)
HMR 속도	매우 빠름 (변경 모듈만 교체)	느림 (변경 범위가 넓어질 수 있음)
프로덕션 빌드	Rollup 사용 (최적화된 번들)	Webpack 자체 번들러 (다양한 설정 가능)
설정 복잡성	간결하고 직관적	복잡하고 방대함 (학습 곡선 높음)
플러그인	Rollup 플러그인 호환, Vite 전용 플러그인	Webpack 전용 로더/플러그인

Vite 프로젝트 시작하기: 기본적인 설정

프로젝트 생성

터미널에서 다음 명령어를 실행하여 새로운 Vite 프로젝트를 생성합니다.

npm create vite@latest

# 또는 yarn
# yarn create vite

# 또는 pnpm
# pnpm create vite

명령어를 실행하면 프로젝트 이름과 사용할 프레임워크(React, Vue, Svelte 등), 그리고 TypeScript 사용 여부를 선택하라는 메시지가 나타납니다.

? Project name: my-vite-app
? Select a framework: react
? Select a variant: typescript

선택을 완료하면 my-vite-app 디렉토리가 생성됩니다. 해당 디렉토리로 이동하여 의존성을 설치하고 개발 서버를 실행할 수 있습니다.

cd my-vite-app
npm install
npm run dev

npm run dev를 실행하면 개발 서버가 구동되고, 터미널에 출력되는 로컬 주소(예: http://localhost:5173)로 접속하면 애플리케이션을 확인할 수 있습니다.

기본적인 프로젝트 구조

생성된 Vite 프로젝트의 기본 구조는 다음과 같습니다.

my-vite-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

index.html: 애플리케이션의 진입점입니다. Vite는 index.html을 개발 서버의 메인 페이지로 사용하며, <script type="module" src="/src/main.tsx"></script>와 같은 스크립트 태그를 통해 ESM 기반으로 애플리케이션을 로드합니다.
src/: 소스 코드가 위치하는 디렉토리입니다.
public/: 정적 자산(예: 파비콘, 이미지)을 저장하는 디렉토리입니다. 이 안의 파일들은 빌드 시 루트 경로로 복사됩니다.
vite.config.ts: Vite 설정을 정의하는 파일입니다.
package.json: 프로젝트의 의존성 및 스크립트를 정의합니다.

// package.json
{
  "name": "my-vite-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

scripts 섹션을 보면 dev, build, preview 명령어를 확인할 수 있습니다.

npm run dev: 개발 서버를 시작합니다.
npm run build: 프로덕션 빌드를 수행합니다. tsc로 TypeScript 타입을 검사하고, vite build로 Rollup을 이용해 번들링합니다.
npm run preview: 빌드된 프로덕션 번들을 로컬에서 미리보기 위한 서버를 실행합니다.

React 및 TypeScript와 함께 Vite 활용하기

간단한 React 컴포넌트 생성

src/App.tsx 파일을 다음과 같이 수정하여 간단한 React 컴포넌트를 만들어보겠습니다.

// src/App.tsx
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg'; // public 디렉토리의 파일은 루트 경로에서 접근 가능
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React + TypeScript</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

src/main.tsx 파일은 애플리케이션의 진입점 역할을 합니다.

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Vite는 tsconfig.json 파일을 자동으로 감지하여 TypeScript 컴파일을 처리합니다. vite-env.d.ts 파일은 Vite 환경 변수 및 타입 정의를 포함합니다.

// src/vite-env.d.ts
/// <reference types="vite/client" />

이처럼 Vite는 React와 TypeScript 환경을 위한 보일러플레이트 설정을 최소화하여 개발자가 즉시 코드 작성에 집중할 수 있도록 돕습니다.

CSS Preprocessor 및 PostCSS 연동

Vite는 CSS Preprocessor (Sass, Less, Stylus)와 PostCSS를 별도의 설정 없이 자동으로 감지하고 처리합니다.

CSS Preprocessor 사용하기

예를 들어, Sass를 사용하려면 sass 패키지만 설치하면 됩니다.

npm install -D sass

이제 .scss 파일을 생성하고 컴포넌트에서 임포트하여 사용할 수 있습니다.

/* src/styles/variables.scss */
$primary-color: #646cff;
$secondary-color: #535bf2;

/* src/App.scss */
@import './styles/variables.scss';

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em $primary-color);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em $secondary-color);
}

src/App.tsx에서 이 파일을 임포트합니다.

// src/App.tsx
// ...
import './App.scss'; // .css 대신 .scss 임포트
// ...

Vite는 .scss, .less, .styl 확장자를 가진 파일을 자동으로 Preprocessor를 통해 CSS로 변환합니다.

PostCSS 연동

예를 들어, Autoprefixer를 사용하려면 다음을 설치합니다.

npm install -D postcss autoprefixer

그리고 postcss.config.js 파일을 생성합니다.

// postcss.config.js
export default {
  plugins: {
    autoprefixer: {},
  },
};

// postcss.config.js (Tailwind CSS 예시)
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

이처럼 Vite는 CSS 관련 도구들을 최소한의 설정으로 통합할 수 있도록 지원하여 개발 워크플로우를 간소화합니다.

Vite 설정 파일 깊이 알아보기: `vite.config.ts`

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path'; // Node.js path 모듈 임포트

// https://vitejs.dev/config/
export default defineConfig({
  // 1. 플러그인 설정
  plugins: [react()],

  // 2. 개발 서버 설정
  server: {
    port: 3000, // 개발 서버 포트
    open: true, // 서버 시작 시 자동으로 브라우저 열기
    proxy: { // API 프록시 설정
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

  // 3. 빌드 설정
  build: {
    outDir: 'dist', // 빌드 결과물이 저장될 디렉토리
    sourcemap: true, // 소스맵 생성 여부
    rollupOptions: { // Rollup에 전달할 추가 옵션 (고급 설정)
      output: {
        manualChunks(id) { // 청크 분리 전략
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
      },
    },
  },

  // 4. 경로 별칭 설정
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // @/components -> src/components
      '~': path.resolve(__dirname, './src/assets'), // ~/images -> src/assets/images
    },
  },

  // 5. 전역 CSS 변수 또는 Mixin 주입 (선택 사항)
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`, // 모든 scss 파일에 전역 변수 주입
      },
    },
  },
});

주요 설정 옵션들은 다음과 같습니다.

plugins: Vite의 기능을 확장하는 플러그인을 배열로 등록합니다. react()는 @vitejs/plugin-react 플러그인으로, React HMR 및 JSX 변환을 담당합니다.
server: 개발 서버의 동작을 설정합니다. port, open 외에도 백엔드 API와의 통신을 위한 proxy 설정이 유용하게 사용됩니다.
build: 프로덕션 빌드와 관련된 설정을 정의합니다. outDir로 빌드 결과물의 출력 경로를 지정하고, sourcemap으로 디버깅을 위한 소스맵 생성 여부를 결정합니다. rollupOptions를 통해 Rollup의 고급 설정을 직접 제어할 수 있습니다.
resolve.alias: 모듈 임포트 시 사용할 경로 별칭을 설정합니다. path.resolve를 사용하여 절대 경로로 지정하는 것이 일반적입니다. 이는 긴 상대 경로 대신 @/components/Button처럼 간결하게 모듈을 임포트할 수 있게 해줍니다.
css.preprocessorOptions: CSS 전처리기에 추가 옵션을 전달할 수 있습니다. 예를 들어, scss의 additionalData 옵션을 사용하여 모든 SCSS 파일에 특정 변수나 믹스인을 자동으로 주입할 수 있습니다.

이 외에도 envDir, base, publicDir 등 다양한 설정 옵션을 통해 프로젝트의 요구사항에 맞춰 Vite를 커스터마이징할 수 있습니다.

Vite의 강력한 기능들

Vite는 빠른 속도 외에도 개발 경험을 향상시키는 여러 강력한 기능을 제공합니다.

Hot Module Replacement (HMR)

Asset Handling

Vite는 이미지, 폰트, 미디어 파일 등 다양한 정적 자산을 효율적으로 처리합니다.

import를 통한 자산 임포트: .svg, .png, .jpg 등 파일을 JavaScript/TypeScript 모듈처럼 임포트하면 빌드 시 URL이 자동으로 처리됩니다.

function MyComponent() { return <img src={logo} alt="Logo" />; } `

public 디렉토리: public 디렉토리에 있는 파일들은 빌드 시 그대로 dist 폴더의 루트로 복사됩니다. index.html에서 <link rel="icon" href="/favicon.ico" />와 같이 루트 경로에서 직접 접근할 수 있으며, 자바스크립트 코드에서는 '/favicon.ico'와 같이 절대 경로로 접근할 수 있습니다.

Environment Variables

Vite는 환경 변수를 쉽게 관리할 수 있는 기능을 제공합니다. .env 파일을 사용하여 개발 및 프로덕션 환경에 따른 변수를 정의할 수 있습니다.

.env: 모든 환경에서 로드되는 기본 환경 변수
.env.development: 개발 환경에서만 로드되는 변수
.env.production: 프로덕션 환경에서만 로드되는 변수

환경 변수는 VITE_ 접두사를 붙여야 클라이언트 사이드 코드에서 import.meta.env 객체를 통해 접근할 수 있습니다.

# .env
VITE_API_URL=http://localhost:8080/api

# .env.production
VITE_API_URL=https://api.yourdomain.com

클라이언트 코드에서 환경 변수 사용 예시:

// src/services/api.ts
const API_BASE_URL = import.meta.env.VITE_API_URL;

async function fetchData() {
  const response = await fetch(`${API_BASE_URL}/data`);
  return response.json();
}

Glob Import

// src/components/index.ts
// src/components/Button.tsx
// src/components/Input.tsx

// src/main.ts 또는 필요한 곳에서
const modules = import.meta.glob('./components/*.tsx');

for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod); // 각 컴포넌트 모듈을 비동기적으로 로드
  });
}

// 또는 즉시 로드 (eager)
const eagerModules = import.meta.glob('./components/*.tsx', { eager: true });
console.log(eagerModules); // { './components/Button.tsx': { default: [Function] }, ... }

이 기능은 특정 디렉토리의 모든 파일을 동적으로 로드해야 할 때 코드를 간결하게 유지하는 데 도움을 줍니다.

Next.js와 Vite: 각자의 강점

이 둘은 서로 다른 목적과 강점을 가지고 있으므로, 프로젝트의 요구사항에 따라 선택하거나 보완적으로 활용할 수 있습니다.

Next.js:
- 강점: SSR, SSG, ISR 등 다양한 렌더링 전략 지원, 파일 시스템 기반 라우팅, API 라우트, 이미지 최적화 등 풀스택 개발에 필요한 기능들을 내장. SEO 및 초기 로딩 성능에 유리.
- 주요 사용 사례: 블로그, 이커머스, 마케팅 웹사이트 등 SEO와 빠른 초기 로딩이 중요한 애플리케이션.
Vite:
- 강점: 압도적으로 빠른 개발 서버 시작 및 HMR 속도, 간결한 설정, 다양한 프론트엔드 프레임워크 지원, Rollup 기반의 최적화된 SPA 빌드.
- 주요 사용 사례: 관리자 페이지, 대시보드, 복잡한 클라이언트 사이드 로직을 가진 SPA, 라이브러리 개발 등 개발 생산성이 중요한 애플리케이션.

마무리

#Vite#React#TypeScript#Frontend#JavaScript#Build Tool#Web Development#CSS

Vite Build Tool: Modern Frontend Development를 위한 완벽 가이드

Vite란 무엇이며 왜 필요한가요?

ESM-native 개발 서버의 혁신

Rollup 기반의 프로덕션 빌드

Vite vs. Webpack: 간략 비교

Vite 프로젝트 시작하기: 기본적인 설정

프로젝트 생성

기본적인 프로젝트 구조

React 및 TypeScript와 함께 Vite 활용하기

간단한 React 컴포넌트 생성

CSS Preprocessor 및 PostCSS 연동

CSS Preprocessor 사용하기

PostCSS 연동

Vite 설정 파일 깊이 알아보기: vite.config.ts

Vite의 강력한 기능들

Hot Module Replacement (HMR)

Asset Handling

Environment Variables

Glob Import

Next.js와 Vite: 각자의 강점

마무리

관련 게시글

React Server Components (RSC) 심층 가이드: Next.js App Router 활용

Progressive Web App (PWA) 구축 실전: Next.js와 React를 활용한 PWA 개발 가이드

CSS Container Queries: 반응형 웹 디자인의 새로운 지평

Vite Build Tool: Modern Frontend Development를 위한 완벽 가이드

Vite란 무엇이며 왜 필요한가요?

ESM-native 개발 서버의 혁신

Rollup 기반의 프로덕션 빌드

Vite vs. Webpack: 간략 비교

Vite 프로젝트 시작하기: 기본적인 설정

프로젝트 생성

기본적인 프로젝트 구조

React 및 TypeScript와 함께 Vite 활용하기

간단한 React 컴포넌트 생성

CSS Preprocessor 및 PostCSS 연동

CSS Preprocessor 사용하기

PostCSS 연동

Vite 설정 파일 깊이 알아보기: vite.config.ts

Vite의 강력한 기능들

Hot Module Replacement (HMR)

Asset Handling

Environment Variables

Glob Import

Next.js와 Vite: 각자의 강점

마무리

관련 게시글

React Server Components (RSC) 심층 가이드: Next.js App Router 활용

Progressive Web App (PWA) 구축 실전: Next.js와 React를 활용한 PWA 개발 가이드

CSS Container Queries: 반응형 웹 디자인의 새로운 지평

Vite 설정 파일 깊이 알아보기: `vite.config.ts`

Vite 설정 파일 깊이 알아보기: `vite.config.ts`