Vite로 첫 프로젝트 만들기

Vite는 개발 서버를 즉시 실행해주는 빌드 도구입니다. 파일을 저장하면 브라우저가 자동으로 새로고침됩니다. 새로고침 없이 실시간으로 변경이 반영됩니다.

프로젝트 만들기 (5단계)

# 1. 프로젝트 생성
npm create vite@latest my-portfolio

# 2. 설정 선택
# ? Select a framework: › Vanilla  ← 이것 선택
# ? Select a variant: › JavaScript ← 이것 선택

# 3. 생성된 폴더로 이동
cd my-portfolio

# 4. 패키지 설치
npm install

# 5. 개발 서버 실행
npm run dev

브라우저에서 http://localhost:5173 이 열리면 성공!

폴더 구조 이해하기

my-portfolio/
├── index.html        ← 시작점, 여기서 CSS/JS 연결
├── style.css         ← 전체 스타일
├── main.js           ← JavaScript 진입점
├── public/           ← 변환 없이 그대로 복사되는 파일
├── package.json      ← 프로젝트 정보 + 명령어
└── node_modules/     ← 설치된 패키지 (건드리지 않음)

개발 중 자주 쓰는 명령어

npm run dev      # 개발 서버 시작 (파일 저장 시 자동 새로고침)
npm run build    # 배포용 파일 생성 → dist/ 폴더에 저장
npm run preview  # 빌드된 결과물을 로컬에서 미리보기

패키지 설치해서 쓰기

# GSAP 설치 예시
npm install gsap

# main.js에서 import
import gsap from 'gsap'

데모에서 확인하기

데모에서 npm create vite@latest 명령어 흐름을 단계별로 시뮬레이션해 보세요. 생성되는 파일 구조도 확인할 수 있습니다.