Vite(비트, 프랑스어로 "빠르다"는 뜻)는 현대적인 웹 개발 도구입니다. 쉽게 말해서, 웹사이트나 웹 애플리케이션을 만들 때 개발 과정을 훨씬 빠르고 편하게 만들어주는 도구예요.

왜 Vite가 필요한가요?

예전에는 코드를 조금만 수정해도 브라우저에서 확인하려면 오래 기다려야 했어요. Vite는 이런 문제를 해결해서:

• 개발 서버가 매우 빠르게 시작됩니다 (거의 즉시!)
• 코드를 수정하면 바로바로 반영됩니다 (새로고침 없이도!)
• 최종 배포용 파일을 최적화해서 만들어줍니다

Vite 사용 방법 (단계별 가이드)

1단계: 준비물 설치하기

먼저 Node.js가 설치되어 있어야 합니다.

Node.js 설치 확인:

node -v

버전이 나오면 설치된 것입니다. (v14.18+ 이상 권장)

2단계: 새 프로젝트 만들기

터미널(명령 프롬프트)을 열고 다음 명령어를 입력하세요:

npm create vite@latest

그러면 몇 가지 질문이 나옵니다:

1. 프로젝트 이름: 원하는 이름 입력 (예: my-first-app)
2. 프레임워크 선택:

• Vanilla (순수 JavaScript)
• Vue
• React
• Preact
• Lit
• Svelte

1. 언어 선택: JavaScript 또는 TypeScript

초보자라면 Vanilla + JavaScript를 선택하는 것을 추천합니다!

3단계: 프로젝트 폴더로 이동

cd my-first-app

4단계: 필요한 패키지 설치

npm install

5단계: 개발 서버 실행

npm run dev
```

이제 브라우저에서 `http://localhost:5173`을 열면 프로젝트가 실행됩니다!

---

' 프로젝트 구조 이해하기

생성된 폴더를 보면:
```
my-first-app/
├── index.html          (메인 HTML 파일)
├── package.json        (프로젝트 정보 및 의존성)
├── vite.config.js      (Vite 설정 파일)
├── public/             (정적 파일 폴더)
└── src/                (소스 코드 폴더)
    ├── main.js         (JavaScript 시작점)
    └── style.css       (스타일 파일)

코드 수정해보기

1. src/main.js 파일을 열어서 코드를 수정하세요
2. 저장하면 브라우저에 즉시 반영됩니다! (Hot Module Replacement)

주요 명령어

' 개발 서버 실행
npm run dev

' 배포용 파일 빌드 (dist 폴더에 생성됨)
npm run build

' 빌드한 파일 미리보기
npm run preview

실전 예제: 간단한 앱 만들기

src/main.js를 다음과 같이 수정해보세요:

import './style.css'

document.querySelector(''app').innerHTML = `
  <div>
    <h1>안녕하세요, Vite!</h1>
    <button id="counter" type="button">클릭 횟수: 0</button>
  </div>
`

let count = 0
document.querySelector(''counter').addEventListener('click', () => {
  count++
  document.querySelector(''counter').textContent = `클릭 횟수: ${count}`
})

저장하면 바로 버튼이 작동하는 것을 확인할 수 있습니다!

배포하기

개발이 끝나면:

npm run build

dist 폴더에 최적화된 파일들이 생성됩니다. 이 폴더를 웹 호스팅 서비스(Netlify, Vercel 등)에 업로드하면 됩니다!

핵심 정리

• Vite = 빠른 웹 개발 도구
• npm create vite@latest로 시작
• npm run dev로 개발 서버 실행
• 코드 수정이 즉시 반영됨
• npm run build로 배포용 파일 생성

처음에는 복잡해 보일 수 있지만, 몇 번 사용하다 보면 정말 편리하다