실전 워크플로우

모든 도구를 배웠습니다. 이제 실전에서 어떻게 흘러가는지 봅니다.

프로젝트 시작할 때 (처음 한 번)

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

# 2. Git 저장소 초기화
git init
git add .
git commit -m "feat: initial project setup"

# 3. GitHub에 연결 + 첫 push
# github.com에서 새 저장소 생성 후:
git remote add origin https://github.com/사용자명/my-portfolio.git
git push -u origin main

# 4. Vercel에 연결 (vercel.com에서)
# → 이후 push할 때마다 자동 배포

매일의 개발 루틴

# 아침: 작업 시작
cd my-portfolio      # 프로젝트 폴더로 이동
npm run dev          # 개발 서버 실행
code .               # VS Code로 열기

# 작업 중: 파일 수정 → 브라우저 자동 반영 (저장만 하면 됨)

# 의미 있는 작업 완료 시
git status           # 뭐가 바뀌었나 확인
git add .
git commit -m "feat: 헤더 섹션 완성"

# 하루 마무리 or 기능 완성 시
git push             # GitHub에 올리기 → Vercel 자동 배포

완전한 개발 루프

코드 수정 (VS Code)
    ↓
파일 저장
    ↓
브라우저 자동 새로고침 (localhost:5173)
    ↓
확인 후 만족하면
    ↓
git add . → git commit → git push
    ↓
Vercel 자동 배포 (약 1분)
    ↓
실제 URL에서 확인
    ↓
다시 코드 수정...

이제 다음 단계는

이 워크플로우가 손에 익었다면 Vibe Coding 코스로 이어가세요. Claude Code와 함께 이 환경 위에서 실제 프로덕션 UI를 만들 수 있습니다.

데모의 인터랙티브 체크리스트로 오늘 배운 것을 모두 확인해 보세요.