🎵 바이브코딩 React/Vite 앱

React와 Vite를 사용하여 만든 간단한 웹 애플리케이션입니다. 바이브코딩 입문자들을 위해 기본적인 React 개념과 Vite의 빠른 개발 환경을 체험할 수 있도록 구성되었습니다.

✨ 주요 기능

• 🔢 카운터 앱: 숫자를 증가/감소시킬 수 있는 간단한 카운터
• 📝 할일 목록: 할일을 추가, 완료, 삭제할 수 있는 투두 리스트
• 🎨 반응형 디자인: 다양한 화면 크기에 적응하는 모던한 UI
• ⚡ 빠른 개발 환경: Vite를 통한 즉시 핫 리로드

🚀 기술 스택

• React 18: 사용자 인터페이스 라이브러리
• Vite: 빠른 빌드 도구 및 개발 서버
• CSS3: 모던한 스타일링
• ESLint: 코드 품질 관리

📦 설치 및 실행

방법 1: Docker 사용 (추천) 🐳

Node.js 설치 없이 Docker로 바로 실행:

# Docker Compose로 실행
docker-compose up --build

# 브라우저에서 http://localhost:3000 접속

자세한 내용은 DOCKER_GUIDE.md 참고

방법 2: Node.js 직접 설치

1. Node.js 설치

먼저 Node.js를 설치해야 합니다 (버전 16 이상 권장).

2. 의존성 설치

npm install

3. 개발 서버 실행

npm run dev

브라우저에서 http://localhost:3000으로 접속하면 앱을 확인할 수 있습니다.

4. 빌드

npm run build

dist 폴더에 프로덕션용 파일들이 생성됩니다.

5. 프리뷰

npm run preview

빌드된 앱을 로컬에서 미리 볼 수 있습니다.

방법 3: 정적 HTML 버전 (즉시 실행)

Node.js나 Docker 없이 바로 확인:

# index-static.html 파일을 브라우저에서 열기

🌐 배포 방법

1. Vercel (추천)

1. Vercel에 가입
2. GitHub에 프로젝트 업로드
3. Vercel에서 프로젝트 import
4. 자동으로 배포 완료!

2. Netlify

1. Netlify에 가입
2. npm run build로 빌드
3. dist 폴더를 Netlify에 드래그 앤 드롭
4. 배포 완료!

3. GitHub Pages

1. GitHub Repository 생성
2. gh-pages 패키지 설치:

   npm install --save-dev gh-pages

3. package.json에 배포 스크립트 추가:

   "scripts": {
     "deploy": "gh-pages -d dist"
   }

4. 빌드 후 배포:

   npm run build
   npm run deploy

4. Firebase Hosting

1. Firebase 프로젝트 생성
2. Firebase CLI 설치:

   npm install -g firebase-tools

3. 로그인 및 초기화:

   firebase login
   firebase init hosting

4. 배포:

   npm run build
   firebase deploy

📁 프로젝트 구조

vibe-app/
├── public/
│   └── vite.svg
├── src/
│   ├── App.css          # 메인 앱 스타일
│   ├── App.jsx          # 메인 앱 컴포넌트
│   ├── index.css        # 전역 스타일
│   └── main.jsx         # 앱 진입점
├── index.html           # HTML 템플릿
├── package.json         # 의존성 및 스크립트
├── vite.config.js       # Vite 설정
└── README.md           # 프로젝트 문서

🎯 학습 포인트

이 프로젝트를 통해 다음을 학습할 수 있습니다:

1. React 기본 개념

   • 컴포넌트 구조
   • useState 훅 사용법
   • 이벤트 핸들링

2. Vite의 장점

   • 빠른 개발 서버
   • 즉시 핫 리로드
   • 최적화된 빌드

3. 모던 웹 개발

   • ES6+ 문법
   • CSS3 애니메이션
   • 반응형 디자인

🔧 추가 개발 아이디어

• 사용자 인증 기능 추가
• 데이터 저장을 위한 로컬 스토리지 연동
• 더 많은 UI 컴포넌트 추가
• 테마 변경 기능
• 다국어 지원

📚 참고 자료

• React 공식 문서
• Vite 공식 문서
• MDN Web Docs

---

바이브코딩과 함께 React의 세계를 탐험해보세요! 🚀