Vite: 개발 서버와 빌드
Vite 프로젝트를 시작하고 즉시 반영되는 HMR 개발 서버를 사용하며, 빌드 명령을 실행하고 프로덕션 출력을 미리 확인합니다.
Vite: 개발 서버와 빌드은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
Vite란 무엇인가요
Vite는 Vue를 만든 Evan You가 제작한 차세대 프런트엔드 빌드 도구입니다. 네이티브 ESM과 esbuild를 사용하는 매우 빠른 개발 서버와 Rollup 기반의 프로덕션 빌드를 제공합니다.
Vite 프로젝트 만들기
npm create vite@latest는 새 프로젝트의 기본 구조를 만듭니다. 프레임워크(Vanilla, React, Vue, Svelte, Preact, Lit)와 변형(JS 또는 TS)을 선택하면 됩니다. 별도의 설정 없이 즉시 사용할 수 있습니다.
npm create vite@latest my-app
# Choose: React + TypeScript
cd my-app
npm install
npm run dev # dev server on localhost:5173개발 서버 — 즉시 시작
Vite는 개발 환경에서 번들링하지 않습니다. 각 파일을 네이티브 ESM 모듈로 제공합니다. 브라우저는 이 모듈을 직접 가져옵니다. 번들링이 없으므로 프로젝트 크기와 관계없이 콜드 스타트가 100ms보다 짧습니다. HMR에서는 변경된 파일만 다시 컴파일합니다.
HMR — 핫 모듈 교체
Vite의 HMR은 전체 페이지를 새로 고침하지 않고 실행 중인 앱에서 변경된 모듈만 교체합니다. @vitejs/plugin-react를 사용하는 React에서는 HMR 중에도 컴포넌트 상태가 유지됩니다. 변경 사항은 50ms 이내에 나타납니다.
vite.config.js / vite.config.ts
Vite는 vite.config.ts 파일로 설정합니다. 일반적으로 사용하는 옵션에는 플러그인, 경로 별칭, 서버 포트, API 호출용 프록시, 빌드 출력 디렉터리가 있습니다.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
resolve: {
alias: { '@': '/src' },
},
server: {
port: 3000,
proxy: {
'/api': 'http://localhost:8080',
},
},
});환경 변수
Vite는 import.meta.env를 통해 VITE_로 시작하는 환경 변수를 노출합니다. 환경 변수는 .env, .env.development, .env.production에 저장합니다. 비밀 정보를 VITE_로 시작하게 만들지 마세요. 브라우저 번들에 포함되기 때문입니다.
# .env
VITE_API_URL=https://api.example.com
# In code:
const apiUrl = import.meta.env.VITE_API_URL;npm run build — 프로덕션 빌드
npm run build는 내부적으로 Rollup을 호출하여 앱을 번들링하고, 축소하고, 트리 셰이킹합니다. 결과물은 배포할 수 있는 상태로 dist/ 폴더에 생성됩니다.
npm run build
# Output:
# dist/
# index.html
# assets/
# index-a1b2c3.js (minified app bundle)
# vendor-d4e5f6.js (node_modules chunk)
# index-7h8i9j.css번들 분석하기
vite-bundle-visualizer 또는 rollup-plugin-visualizer를 사용하면 번들 구성의 트리맵을 생성할 수 있습니다. 이를 통해 지나치게 큰 의존성과 지연 로딩 기회를 파악할 수 있습니다.
npm run preview
npm run preview는 프로덕션 dist/ 빌드를 로컬에서 제공합니다. 배포 전에 프로덕션 빌드를 확인할 때 사용하세요. 앱이 개발 모드가 아닐 때만 나타나는 문제를 발견할 수 있습니다.
Vite의 코드 분할
동적 import() 문은 자동으로 별도의 청크를 만듭니다. React Router의 지연 라우트와 Vue의 defineAsyncComponent도 분할을 실행합니다. 빌드 출력에서 청크 크기를 확인하세요.
라이브러리용 Vite
Vite의 라이브러리 모드(build.lib)는 npm 라이브러리를 빌드하고 ESM과 CJS 형식으로 출력합니다. React와 같은 동료 의존성이 번들에 포함되지 않도록 외부 목록을 지정하세요.
빠른 확인
Vite의 개발 서버가 webpack의 개발 서버보다 빠른 이유는 무엇인가요?
복습: Vite
npm create vite@latest는 즉시 프로젝트 기본 구조를 만듭니다. 개발 서버는 네이티브 ESM을 사용하므로 번들링이 없고 HMR이 즉시 실행됩니다. 플러그인, 별칭, 프록시는 vite.config.ts에서 설정합니다. 브라우저에서 안전하게 사용할 수 있는 환경 변수에는 VITE_ 접두사를 사용합니다. npm run build는 최적화된 Rollup 번들을 생성합니다. npm run preview는 프로덕션 빌드를 로컬에서 테스트합니다.
자주 묻는 질문
“Vite: 개발 서버와 빌드” 강의는 무료인가요?
네 — “Vite: 개발 서버와 빌드” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Vite: 개발 서버와 빌드”에서 뭘 배우나요?
Vite 프로젝트를 시작하고 즉시 반영되는 HMR 개발 서버를 사용하며, 빌드 명령을 실행하고 프로덕션 출력을 미리 확인합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“Vite: 개발 서버와 빌드” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.