📝 바이브코딩 기반 앱 빌드 교육과정 워크북 (초안) | Notion

👍 상용화용 기술 요소(Playwright, Notion API, Google Analytics 4, 토스페이먼츠 MCP)와 바이브코딩 도구(Cursor, v0 등)를 반영한 5회차 × 4시간 = 총 20시간 분량의 워크북 초안

바이브코딩 입문자가 실제로 웹앱/iOS/Android 앱을 빌드하면서 프론트엔드–백엔드–데이터–테스트–상업화까지 전체 사이클을 경험할 수 있도록 설계

과정 개요

대상: 바이브코딩 입문자 (웹/모바일 앱 개발 기초 경험자)
총 시간: 20시간 (5회차 × 4시간)
도구: Cursor, v0, Gemini CLI
기술 요소: React/Vite, Expo(네이티브), Playwright, Notion API, Google Analytics 4, Toss Payments MCP

1회차 (4H) — 웹앱 빌드 & Notion API 연동

주제: React/Vite 웹앱 기초 + Notion API 데이터 연동

학습 목표

Cursor에서 React/Vite 프로젝트 생성
v0로 UI 구성 및 컴포넌트화
Notion API 연결 → 데이터 가져오기

실습 시나리오

npm create vite@latest로 프로젝트 생성
v0로 대시보드 UI 생성 (프로젝트/태스크 카드 뷰)
Notion API 연동: 특정 데이터베이스 → fetch → React 화면 표시
GitHub에 푸시 & Pages 배포