웹 개발2026-03-26·11분 읽기

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

Vite는 현대 프론트엔드 개발의 필수 빌드 도구입니다. 이 가이드에서는 Vite의 핵심 기능, 설정, 최적화 기법을 React, TypeScript, CSS 예제와 함께 자세히 다룹니다.

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

오늘날 프론트엔드 개발은 복잡한 빌드 시스템 없이는 상상하기 어렵습니다. 수많은 의존성과 모듈을 효율적으로 관리하고, 개발 생산성을 극대화하며, 사용자에게 최적화된 결과물을 제공하는 것은 현대 웹 애플리케이션 개발의 핵심 과제입니다. 이러한 요구사항을 충족시키기 위해 등장한 여러 빌드 도구 중, 최근 가장 빠르게 성장하며 개발자들의 주목을 받고 있는 것이 바로 Vite입니다.

Vite는 Next.js와 같은 풀스택 프레임워크가 자체 빌드 시스템을 사용하는 것과 달리, React, Vue, Svelte 등 다양한 SPA(Single Page Application) 프레임워크에서 빠르고 효율적인 개발 경험을 제공하도록 설계된 차세대 빌드 도구입니다. 이 글에서는 Vite가 무엇인지, 왜 이렇게 많은 개발자에게 사랑받고 있는지, 그리고 실제 프로젝트에서 Vite를 어떻게 활용하고 최적화할 수 있는지에 대해 자세히 살펴보겠습니다.

Vite, 왜 주목받고 있을까요?

Vite가 등장하기 전, Webpack과 같은 번들러는 프론트엔드 개발의 표준이었습니다. 하지만 프로젝트 규모가 커지고 의존성이 많아질수록 빌드 시간은 기하급수적으로 늘어났고, 개발 서버를 띄우거나 HMR(Hot Module Replacement)이 동작하는 데에도 상당한 시간이 소요되는 문제점이 있었습니다. Vite는 이러한 문제점을 근본적으로 해결하며 개발 경험을 혁신했습니다.

Vite의 핵심은 네이티브 ES Modules(ESM)을 활용한 개발 서버입니다. 기존 번들러들은 개발 서버를 시작하기 전에 모든 코드를 번들링하는 과정을 거쳤지만, Vite는 브라우저가 ES Modules를 직접 로드할 수 있다는 점에 착안했습니다. 개발 서버는 요청이 있을 때만 필요한 모듈을 변환하여 제공하며, 이를 통해 압도적인 속도로 개발 서버를 시작하고 모듈을 업데이트할 수 있습니다.

또한, Vite는 Esbuild를 사용하여 의존성 사전 번들링을 수행합니다. Esbuild는 Go 언어로 작성되어 JavaScript 기반 번들러보다 10~100배 빠른 속도를 자랑합니다. 개발 의존성(예: react, react-dom)은 한 번만 사전 번들링되고 캐시되어, 이후 서버 시작 시에는 거의 즉시 준비됩니다.

요약하자면, Vite의 주요 강점은 다음과 같습니다.

매우 빠른 개발 서버 시작: 네이티브 ESM을 활용하여 번들링 없이 즉시 서버를 시작합니다.
초고속 HMR: 모듈 그래프를 최소한으로 업데이트하여 변경 사항을 거의 즉시 반영합니다.
Esbuild 기반 사전 번들링: 개발 의존성을 빠르게 처리하여 초기 로딩 시간을 단축합니다.
Rollup 기반 프로덕션 빌드: 프로덕션 빌드 시에는 Rollup의 강력한 최적화 기능을 활용하여 번들 사이즈를 최소화합니다.
풍부한 기능 지원: TypeScript, JSX, CSS Modules, PostCSS 등을 별도의 설정 없이 바로 지원합니다.

이러한 특성 덕분에 Vite는 개발자들이 더 빠르고 즐겁게 코드를 작성하고 테스트할 수 있도록 돕습니다.

Vite 프로젝트 시작하기

Vite 프로젝트를 시작하는 것은 매우 간단합니다. create-vite CLI 도구를 사용하면 몇 가지 질문에 답하는 것만으로 원하는 프레임워크와 TypeScript, JavaScript 템플릿을 기반으로 프로젝트를 생성할 수 있습니다.

Vanilla JavaScript/TypeScript 프로젝트

기본적인 JavaScript 또는 TypeScript 프로젝트를 시작하는 방법입니다.

# npm 사용 시
npm create vite@latest my-vanilla-app -- --template vanilla-ts

# yarn 사용 시
yarn create vite my-vanilla-app --template vanilla-ts

# pnpm 사용 시
pnpm create vite my-vanilla-app --template vanilla-ts

위 명령어를 실행하면 my-vanilla-app 디렉터리가 생성되고, 해당 디렉터리로 이동하여 의존성을 설치하고 개발 서버를 시작할 수 있습니다.

cd my-vanilla-app
npm install # 또는 yarn install, pnpm install
npm run dev

npm run dev를 실행하면 http://localhost:5173과 같은 주소로 개발 서버가 시작됩니다.

React 프로젝트

React와 TypeScript를 사용하는 프로젝트를 시작하는 예시입니다.

# npm 사용 시
npm create vite@latest my-react-app -- --template react-ts

# yarn 사용 시
yarn create vite my-react-app --template react-ts

# pnpm 사용 시
pnpm create vite my-react-app --template react-ts

마찬가지로 디렉터리로 이동하여 의존성을 설치하고 개발 서버를 시작합니다.

cd my-react-app
npm install
npm run dev

Vite는 React Refresh를 기본적으로 지원하여, React 컴포넌트의 변경 사항이 HMR을 통해 빠르게 반영됩니다.

프로젝트 구조

새로 생성된 Vite 프로젝트의 기본 구조는 매우 간결합니다.

my-react-app/
├── public/                # 정적 에셋 (빌드 시 그대로 복사)
├── src/
│   ├── assets/            # 코드에서 import 하여 사용하는 에셋
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx           # 애플리케이션 진입점
│   └── vite-env.d.ts
├── index.html             # 애플리케이션의 단일 진입점 HTML 파일
├── package.json
├── tsconfig.json
├── vite.config.ts         # Vite 설정 파일 (필요시 생성)
└── README.md

index.html은 Vite 프로젝트의 유일한 HTML 파일이며, <script type="module" src="/src/main.tsx"></script>와 같이 ES Modules 방식으로 애플리케이션의 진입점을 로드합니다.

핵심 기능 심층 분석: HMR과 Dev Server

Vite의 가장 큰 강점은 개발 서버의 속도와 HMR(Hot Module Replacement)의 효율성입니다. 기존 번들러가 전체 애플리케이션을 메모리에 올려두고 변경 사항이 생길 때마다 재번들링하는 방식이었다면, Vite는 완전히 다른 접근 방식을 취합니다.

Vite 개발 서버는 브라우저의 네이티브 ES Modules 기능을 활용합니다. 즉, 개발 서버는 실제 코드를 번들링하지 않고, 요청이 들어오면 필요한 모듈을 동적으로 변환하여 브라우저에 직접 제공합니다. 예를 들어, main.js 파일이 App.js를 import 한다면, 브라우저는 main.js를 로드한 후 App.js를 추가로 요청하게 됩니다. 이때 Vite 개발 서버는 App.js 파일을 즉시 변환하여 제공합니다.

HMR은 이러한 네이티브 ESM 방식 위에서 더욱 효율적으로 동작합니다. 파일이 변경되면, Vite는 해당 파일과 관련된 모듈 그래프만 업데이트하고, 브라우저에 변경된 모듈을 교체하라는 시그널을 보냅니다. 브라우저는 변경된 모듈만 다시 요청하여 로드하고, 애플리케이션 상태를 유지한 채로 화면을 업데이트합니다. 이 과정에서 전체 페이지를 새로고침하거나 전체 번들을 재구축할 필요가 없으므로, 변경 사항이 거의 즉시 반영되는 초고속 HMR을 경험할 수 있습니다.

예를 들어, React 컴포넌트의 CSS 파일만 수정했을 때, Vite는 해당 CSS 파일만 업데이트하고 React Refresh 플러그인을 통해 컴포넌트의 스타일을 즉시 반영합니다. 이는 대규모 프로젝트에서 개발 생산성을 비약적으로 향상시키는 핵심 요소입니다.

Vite 설정 파일 (vite.config.ts) 이해하기

Vite는 대부분의 경우 별도의 설정 없이도 잘 동작하지만, 프로젝트 요구사항에 따라 vite.config.ts (또는 .js) 파일을 통해 다양한 설정을 커스터마이징할 수 있습니다. 이 파일은 Rollup의 설정을 기반으로 하며, Vite 고유의 옵션들을 추가로 제공합니다.

기본적인 vite.config.ts 파일의 구조는 다음과 같습니다.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; // React 프로젝트의 경우

export default defineConfig({
  plugins: [react()], // 사용할 Vite 플러그인 목록
  // 기타 Vite 설정 옵션
});

defineConfig 헬퍼 함수는 타입 추론을 제공하여 설정 시 오타나 잘못된 속성 사용을 방지해 줍니다.

플러그인 (Plugins) 활용

Vite는 플러그인 기반 아키텍처를 채택하고 있습니다. 공식 플러그인(예: @vitejs/plugin-react) 외에도 다양한 커뮤니티 플러그인을 활용하여 기능을 확장할 수 있습니다.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer'; // 번들 분석 플러그인 예시

export default defineConfig({
  plugins: [
    react(),
    visualizer({ open: true }), // 빌드 시 번들 분석 리포트 자동 열기
  ],
});

경로 별칭 (Path Alias) 설정

프로젝트 규모가 커지면 ../../components/Button과 같은 상대 경로 대신 @components/Button과 같은 절대 경로 별칭을 사용하는 것이 코드 가독성과 유지보수성을 높이는 데 도움이 됩니다.

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // `src` 디렉토리를 `@`로 별칭 설정
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
    },
  },
});

별칭을 설정한 후에는 tsconfig.json에도 해당 경로를 추가하여 TypeScript가 경로를 인식할 수 있도록 해야 합니다.

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

환경 변수 (Environment Variables) 관리

Vite는 .env 파일을 통해 환경 변수를 관리합니다. .env, .env.local, .env.development, .env.production 등 다양한 파일을 지원하며, .env 파일에 정의된 변수들은 import.meta.env 객체를 통해 접근할 수 있습니다.

# .env 파일 예시
VITE_API_URL=http://localhost:3000/api
VITE_ANALYTICS_KEY=your-analytics-key

애플리케이션 코드에서는 다음과 같이 접근합니다.

// src/main.ts
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_ANALYTICS_KEY);

Vite는 보안을 위해 VITE_ 접두사가 붙은 환경 변수만 클라이언트 사이드 코드에서 접근할 수 있도록 노출합니다.

프록시 (Proxy) 설정

개발 중에 프론트엔드와 백엔드 서버가 다른 포트에서 실행될 때, CORS(Cross-Origin Resource Sharing) 문제를 해결하기 위해 프록시 설정을 사용할 수 있습니다.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': { // /api로 시작하는 요청을 프록시
        target: 'http://localhost:8080', // 백엔드 서버 주소
        changeOrigin: true, // 호스트 헤더 변경 (대상 서버가 요청을 로컬에서 온 것으로 인식)
        rewrite: (path) => path.replace(/^\/api/, ''), // /api 경로 제거
      },
      '/socket.io': {
        target: 'ws://localhost:8080',
        ws: true, // 웹소켓 프록시 활성화
      },
    },
  },
});

이제 /api/users로 요청을 보내면 http://localhost:8080/users로 프록시되어 백엔드 API와 통신할 수 있습니다.

Vite와 TypeScript, CSS 전처리기 통합

Vite는 TypeScript 및 다양한 CSS 전처리기를 별도의 복잡한 설정 없이 바로 사용할 수 있도록 지원합니다. 이는 개발자가 환경 설정에 시간을 낭비하지 않고 핵심 로직 개발에 집중할 수 있도록 돕습니다.

TypeScript 지원

Vite는 TypeScript 파일을 직접 처리하며, Esbuild를 사용하여 매우 빠르게 컴파일합니다. 타입 체크는 Vite의 역할이 아니므로, 타입 체크는 IDE나 tsc --noEmit 명령어를 통해 수행하는 것을 권장합니다.

// src/components/Greeting.tsx
import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

위와 같이 일반적인 TypeScript React 코드를 작성하면 Vite는 이를 자동으로 변환하여 브라우저에 제공합니다. tsconfig.json 파일만 잘 설정되어 있다면 추가적인 vite.config.ts 설정은 필요하지 않습니다.

CSS 전처리기 (Sass, Less, Stylus)

Vite는 Sass, Less, Stylus와 같은 CSS 전처리기를 기본적으로 지원합니다. 해당 전처리기의 패키지만 설치하면 별도의 설정 없이 .scss, .less, .styl 파일을 import 하여 사용할 수 있습니다.

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

npm install -D sass
# 또는 yarn add -D sass

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

/* src/components/Button.module.scss */
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
}

// src/components/Button.tsx
import React from 'react';
import styles from './Button.module.scss'; // CSS Modules로 import

interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
  return (
    <button className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

CSS Modules 및 PostCSS

Vite는 CSS Modules를 .module.css, .module.scss 등의 파일 확장자를 통해 기본적으로 지원합니다. 또한, PostCSS도 내장되어 있어 postcss.config.js 파일을 프로젝트 루트에 생성하면 Tailwind CSS나 Autoprefixer와 같은 PostCSS 플러그인을 쉽게 통합할 수 있습니다.

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

이렇게 설정하면 Vite는 CSS 파일을 처리할 때 자동으로 PostCSS 설정을 적용합니다.

프로덕션 빌드와 최적화

Vite는 개발 환경에서는 Esbuild와 네이티브 ESM을 활용하여 빠른 속도를 제공하지만, 프로덕션 빌드 시에는 Rollup을 기반으로 최적화된 번들을 생성합니다. Rollup은 트리 쉐이킹, 코드 스플리팅, 번들 크기 최적화 등 강력한 기능을 제공하여 실제 서비스에 배포될 애플리케이션의 성능을 극대화합니다.

프로덕션 빌드는 다음 명령어를 통해 수행할 수 있습니다.

npm run build

이 명령어는 프로젝트 루트의 dist 디렉터리에 최적화된 빌드 결과물을 생성합니다. 빌드 과정에서 Vite는 다음과 같은 최적화를 수행합니다.

코드 스플리팅 (Code Splitting): 애플리케이션의 코드를 여러 작은 청크로 분할하여 초기 로딩 시간을 단축합니다. 필요한 코드만 동적으로 로드하여 사용자 경험을 향상시킵니다.
트리 쉐이킹 (Tree Shaking): 사용되지 않는 코드를 최종 번들에서 제거하여 번들 크기를 줄입니다.
에셋 처리: 이미지, 폰트 등 정적 에셋을 최적화하고 해싱하여 캐싱을 효율적으로 관리합니다.
CSS 코드 추출: 모든 CSS 코드를 단일 CSS 파일로 추출하여 런타임에 스타일이 적용되는 방식이 아닌, HTML 로드 시 바로 적용되도록 합니다.
미니파이 (Minification): JavaScript, CSS, HTML 코드를 압축하여 파일 크기를 최소화합니다.

dist 디렉터리에 생성된 빌드 결과물은 CDN에 배포하거나 정적 파일 서버를 통해 서비스할 수 있습니다. 빌드된 애플리케이션을 로컬에서 테스트해 보려면 npm run preview 명령어를 사용할 수 있습니다.

npm run preview

이 명령어는 dist 디렉터리의 정적 파일을 서빙하는 로컬 서버를 실행합니다.

Vite vs. Webpack: 비교 분석

Vite와 Webpack은 모두 프론트엔드 빌드 도구이지만, 서로 다른 철학과 아키텍처를 가지고 있습니다. 다음 표를 통해 주요 차이점을 비교해 보겠습니다.

특징	Vite	Webpack (기존 설정 기준)
개발 서버 시작	매우 빠름 (네이티브 ESM)	느림 (전체 번들링)
HMR 속도	매우 빠름 (모듈 그래프 최소 업데이트)	느림 (부분 또는 전체 재번들링)
번들링 방식	개발: ESM / 프로덕션: Rollup	개발/프로덕션: 자체 번들러
의존성 처리	Esbuild 기반 사전 번들링	JavaScript 기반 번들링
설정 복잡성	최소화, 플러그인 기반	복잡함, 광범위한 설정 파일 (webpack.config.js)
기본 지원	TypeScript, JSX, CSS Modules, PostCSS	로더/플러그인 설정 필요
트리 쉐이킹	Rollup 기반으로 효율적	설정에 따라 다름, 번들러 자체 기능
커뮤니티/생태계	빠르게 성장 중, 현대적	매우 크고 성숙함, 방대한 자료

Vite는 개발 경험과 속도에 중점을 두어 현대 프론트엔드 개발의 새로운 표준을 제시하고 있습니다. Webpack은 오랜 기간 검증된 안정성과 방대한 생태계를 자랑하지만, 설정의 복잡성과 개발 속도 측면에서 Vite에 비해 아쉬운 점이 있습니다. 새로운 프로젝트를 시작하거나 기존 프로젝트의 빌드 속도 개선이 필요하다면 Vite를 적극적으로 고려해 볼 가치가 있습니다.

마무리

Vite는 현대 프론트엔드 개발의 패러다임을 바꾸고 있는 강력한 빌드 도구입니다. 네이티브 ES Modules와 Esbuild를 활용한 혁신적인 접근 방식은 개발 서버의 압도적인 속도와 초고속 HMR을 제공하여 개발 생산성을 비약적으로 향상시킵니다. React, TypeScript, CSS 전처리기 등 다양한 기술 스택과의 뛰어난 호환성 또한 Vite의 큰 장점입니다.

이 가이드에서 살펴본 Vite의 핵심 기능, 설정 방법, 그리고 최적화 기법들을 통해 여러분의 웹 개발 프로젝트에 Vite를 성공적으로 도입하고 활용하시기를 바랍니다. 더 빠르고 효율적인 개발 경험을 통해 더욱 멋진 웹 애플리케이션을 만들어나가시길 응원합니다.

#Vite#React#TypeScript#CSS#JavaScript#프론트엔드#빌드 도구#개발 환경#HMR#Rollup

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

Vite, 왜 주목받고 있을까요?

요약하자면, Vite의 주요 강점은 다음과 같습니다.

매우 빠른 개발 서버 시작: 네이티브 ESM을 활용하여 번들링 없이 즉시 서버를 시작합니다.
초고속 HMR: 모듈 그래프를 최소한으로 업데이트하여 변경 사항을 거의 즉시 반영합니다.
Esbuild 기반 사전 번들링: 개발 의존성을 빠르게 처리하여 초기 로딩 시간을 단축합니다.
Rollup 기반 프로덕션 빌드: 프로덕션 빌드 시에는 Rollup의 강력한 최적화 기능을 활용하여 번들 사이즈를 최소화합니다.
풍부한 기능 지원: TypeScript, JSX, CSS Modules, PostCSS 등을 별도의 설정 없이 바로 지원합니다.

이러한 특성 덕분에 Vite는 개발자들이 더 빠르고 즐겁게 코드를 작성하고 테스트할 수 있도록 돕습니다.

Vite 프로젝트 시작하기

Vanilla JavaScript/TypeScript 프로젝트

기본적인 JavaScript 또는 TypeScript 프로젝트를 시작하는 방법입니다.

# npm 사용 시
npm create vite@latest my-vanilla-app -- --template vanilla-ts

# yarn 사용 시
yarn create vite my-vanilla-app --template vanilla-ts

# pnpm 사용 시
pnpm create vite my-vanilla-app --template vanilla-ts

위 명령어를 실행하면 my-vanilla-app 디렉터리가 생성되고, 해당 디렉터리로 이동하여 의존성을 설치하고 개발 서버를 시작할 수 있습니다.

cd my-vanilla-app
npm install # 또는 yarn install, pnpm install
npm run dev

npm run dev를 실행하면 http://localhost:5173과 같은 주소로 개발 서버가 시작됩니다.

React 프로젝트

React와 TypeScript를 사용하는 프로젝트를 시작하는 예시입니다.

# npm 사용 시
npm create vite@latest my-react-app -- --template react-ts

# yarn 사용 시
yarn create vite my-react-app --template react-ts

# pnpm 사용 시
pnpm create vite my-react-app --template react-ts

마찬가지로 디렉터리로 이동하여 의존성을 설치하고 개발 서버를 시작합니다.

cd my-react-app
npm install
npm run dev

Vite는 React Refresh를 기본적으로 지원하여, React 컴포넌트의 변경 사항이 HMR을 통해 빠르게 반영됩니다.

프로젝트 구조

새로 생성된 Vite 프로젝트의 기본 구조는 매우 간결합니다.

my-react-app/
├── public/                # 정적 에셋 (빌드 시 그대로 복사)
├── src/
│   ├── assets/            # 코드에서 import 하여 사용하는 에셋
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx           # 애플리케이션 진입점
│   └── vite-env.d.ts
├── index.html             # 애플리케이션의 단일 진입점 HTML 파일
├── package.json
├── tsconfig.json
├── vite.config.ts         # Vite 설정 파일 (필요시 생성)
└── README.md

핵심 기능 심층 분석: HMR과 Dev Server

Vite 설정 파일 (vite.config.ts) 이해하기

기본적인 vite.config.ts 파일의 구조는 다음과 같습니다.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; // React 프로젝트의 경우

export default defineConfig({
  plugins: [react()], // 사용할 Vite 플러그인 목록
  // 기타 Vite 설정 옵션
});

defineConfig 헬퍼 함수는 타입 추론을 제공하여 설정 시 오타나 잘못된 속성 사용을 방지해 줍니다.

플러그인 (Plugins) 활용

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer'; // 번들 분석 플러그인 예시

export default defineConfig({
  plugins: [
    react(),
    visualizer({ open: true }), // 빌드 시 번들 분석 리포트 자동 열기
  ],
});

경로 별칭 (Path Alias) 설정

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // `src` 디렉토리를 `@`로 별칭 설정
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
    },
  },
});

별칭을 설정한 후에는 tsconfig.json에도 해당 경로를 추가하여 TypeScript가 경로를 인식할 수 있도록 해야 합니다.

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

환경 변수 (Environment Variables) 관리

# .env 파일 예시
VITE_API_URL=http://localhost:3000/api
VITE_ANALYTICS_KEY=your-analytics-key

애플리케이션 코드에서는 다음과 같이 접근합니다.

// src/main.ts
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_ANALYTICS_KEY);

Vite는 보안을 위해 VITE_ 접두사가 붙은 환경 변수만 클라이언트 사이드 코드에서 접근할 수 있도록 노출합니다.

프록시 (Proxy) 설정

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': { // /api로 시작하는 요청을 프록시
        target: 'http://localhost:8080', // 백엔드 서버 주소
        changeOrigin: true, // 호스트 헤더 변경 (대상 서버가 요청을 로컬에서 온 것으로 인식)
        rewrite: (path) => path.replace(/^\/api/, ''), // /api 경로 제거
      },
      '/socket.io': {
        target: 'ws://localhost:8080',
        ws: true, // 웹소켓 프록시 활성화
      },
    },
  },
});

이제 /api/users로 요청을 보내면 http://localhost:8080/users로 프록시되어 백엔드 API와 통신할 수 있습니다.

Vite와 TypeScript, CSS 전처리기 통합

TypeScript 지원

// src/components/Greeting.tsx
import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

CSS 전처리기 (Sass, Less, Stylus)

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

npm install -D sass
# 또는 yarn add -D sass

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

/* src/components/Button.module.scss */
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
}

// src/components/Button.tsx
import React from 'react';
import styles from './Button.module.scss'; // CSS Modules로 import

interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
  return (
    <button className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

CSS Modules 및 PostCSS

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

이렇게 설정하면 Vite는 CSS 파일을 처리할 때 자동으로 PostCSS 설정을 적용합니다.

프로덕션 빌드와 최적화

프로덕션 빌드는 다음 명령어를 통해 수행할 수 있습니다.

npm run build

이 명령어는 프로젝트 루트의 dist 디렉터리에 최적화된 빌드 결과물을 생성합니다. 빌드 과정에서 Vite는 다음과 같은 최적화를 수행합니다.

코드 스플리팅 (Code Splitting): 애플리케이션의 코드를 여러 작은 청크로 분할하여 초기 로딩 시간을 단축합니다. 필요한 코드만 동적으로 로드하여 사용자 경험을 향상시킵니다.
트리 쉐이킹 (Tree Shaking): 사용되지 않는 코드를 최종 번들에서 제거하여 번들 크기를 줄입니다.
에셋 처리: 이미지, 폰트 등 정적 에셋을 최적화하고 해싱하여 캐싱을 효율적으로 관리합니다.
CSS 코드 추출: 모든 CSS 코드를 단일 CSS 파일로 추출하여 런타임에 스타일이 적용되는 방식이 아닌, HTML 로드 시 바로 적용되도록 합니다.
미니파이 (Minification): JavaScript, CSS, HTML 코드를 압축하여 파일 크기를 최소화합니다.

npm run preview

이 명령어는 dist 디렉터리의 정적 파일을 서빙하는 로컬 서버를 실행합니다.

Vite vs. Webpack: 비교 분석

Vite와 Webpack은 모두 프론트엔드 빌드 도구이지만, 서로 다른 철학과 아키텍처를 가지고 있습니다. 다음 표를 통해 주요 차이점을 비교해 보겠습니다.

특징	Vite	Webpack (기존 설정 기준)
개발 서버 시작	매우 빠름 (네이티브 ESM)	느림 (전체 번들링)
HMR 속도	매우 빠름 (모듈 그래프 최소 업데이트)	느림 (부분 또는 전체 재번들링)
번들링 방식	개발: ESM / 프로덕션: Rollup	개발/프로덕션: 자체 번들러
의존성 처리	Esbuild 기반 사전 번들링	JavaScript 기반 번들링
설정 복잡성	최소화, 플러그인 기반	복잡함, 광범위한 설정 파일 (webpack.config.js)
기본 지원	TypeScript, JSX, CSS Modules, PostCSS	로더/플러그인 설정 필요
트리 쉐이킹	Rollup 기반으로 효율적	설정에 따라 다름, 번들러 자체 기능
커뮤니티/생태계	빠르게 성장 중, 현대적	매우 크고 성숙함, 방대한 자료

마무리

#Vite#React#TypeScript#CSS#JavaScript#프론트엔드#빌드 도구#개발 환경#HMR#Rollup

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

Vite, 왜 주목받고 있을까요?

Vite 프로젝트 시작하기

Vanilla JavaScript/TypeScript 프로젝트

React 프로젝트

프로젝트 구조

핵심 기능 심층 분석: HMR과 Dev Server

Vite 설정 파일 (vite.config.ts) 이해하기

플러그인 (Plugins) 활용

경로 별칭 (Path Alias) 설정

환경 변수 (Environment Variables) 관리

프록시 (Proxy) 설정

Vite와 TypeScript, CSS 전처리기 통합

TypeScript 지원

CSS 전처리기 (Sass, Less, Stylus)

CSS Modules 및 PostCSS

프로덕션 빌드와 최적화

Vite vs. Webpack: 비교 분석

마무리

관련 게시글

Vite Build Tool: Fast Frontend Development Guide

React Server Components (RSC) 심층 가이드: Next.js와 함께하는 Full-stack React

Next.js Middleware: 강력한 요청 처리 활용법

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

Vite, 왜 주목받고 있을까요?

Vite 프로젝트 시작하기

Vanilla JavaScript/TypeScript 프로젝트

React 프로젝트

프로젝트 구조

핵심 기능 심층 분석: HMR과 Dev Server

Vite 설정 파일 (vite.config.ts) 이해하기

플러그인 (Plugins) 활용

경로 별칭 (Path Alias) 설정

환경 변수 (Environment Variables) 관리

프록시 (Proxy) 설정

Vite와 TypeScript, CSS 전처리기 통합

TypeScript 지원

CSS 전처리기 (Sass, Less, Stylus)

CSS Modules 및 PostCSS

프로덕션 빌드와 최적화

Vite vs. Webpack: 비교 분석

마무리

관련 게시글

Vite Build Tool: Fast Frontend Development Guide

React Server Components (RSC) 심층 가이드: Next.js와 함께하는 Full-stack React

Next.js Middleware: 강력한 요청 처리 활용법