구름 바이브코딩 2주차: React/Vite 웹앱, iOS/Android 앱 빌드

바이브코딩 마스터 2주차 React Vite iOS Android
바이브코딩 마스터 2주차 React Vite iOS Android

25.09.15 / JUN

지난 1주차 교육과정에서는 Cursor를 활용하여 HTML, CSS, JS 기반 웹앱을 빌드하고 Github Page를 통해 웹앱을 성공적으로 배포하고 공유했습니다.

이번 2주차에 사용할 바이브코딩 도구 목록은 다음과 같습니다.

  • 바이브코딩 도구: Cursor/Gemini CLI
  • 프론트엔드 디자인: v0/Base44
  • 프론트엔드 개발: React/Vite
  • 버전관리 및 배포: Git/Github, Netlify/Vercel, AWS/Akamai

이번 2주차에는 위와 같은 다양한 바이브코딩 도구를 활용해서 바이브코딩 입문자를 위한 상업용 웹앱 및 네이티브앱 개발 교육 과정을 진행합니다.

  • D07. 상업용 웹앱 빌드: Cursor/v0/Base44/React/Vite 프레임워크 기반 웹앱 빌드, 터미널 활용, Git & Github 활용
  • D08. 상업용 웹앱 빌드: (유료 Claude Code 대신) Gemini CLI 활용, 터미널 환경에서 앱 빌드, Git & Github 활용
  • D09. 상업용 모바일앱 빌드: Android/iOS 네이티브 앱 빌드
  • D10. 상업용 모바일앱 빌드: Android/iOS 크로스 플랫폼 빌드
  • D11. 상업용 앱 빌드를 위한 데이터 활용: 웹데이터 스크래핑, 딥러닝 모델 활용, Supabase 활용

D07. React/Vite 기반 웹앱 빌드 ① — 기초부터 배포까지

학습 목표

  • React/Vite 프로젝트 생성 및 실행 이해
  • 컴포넌트, 상태 관리(useState), props 학습
  • Vite 빌드 → GitHub Pages 배포

구성

  1. Intro (30분): 지난주 복습 + React vs Vanilla JS 차이
  2. 핵심 개념 실습 (90분):
    • npm create vite@latest → React 선택
    • App.jsx에서 상태 관리 + 버튼 이벤트 구현
    • v0/Base44로 간단 UI 생성 → React 컴포넌트화
  3. 프로젝트 미션 (90분):
    • “오늘의 랜덤 명언 앱” (Gemini CLI + React 연동)
    • 버튼 클릭 시 Gemini가 명언 생성 → 카드 UI 표시
    • 좋아요(♥) 버튼으로 localStorage 저장
  4. 배포 실습 (30분): GitHub Pages 배포 및 공유

워크북 아이디어

  • “React 기본기 10분 가이드”
  • 상태 관리 → 이벤트 처리 → UI 컴포넌트 구조 시각화

D08. React/Vite 기반 웹앱 빌드 ② — 기능 확장 & 협업

학습 목표

  • React Router, 컴포넌트 분리, API fetch 학습
  • GitHub Flow를 통한 협업 (branch → commit → PR)

구성

  1. Intro (20분): GitHub Flow 개념 + Trunk 기반 협업
  2. 핵심 개념 실습 (80분):
    • React Router로 페이지 전환 (홈, 상세, 마이페이지)
    • API fetch: 공개 뉴스 API, TMDB API 등 호출
  3. 프로젝트 미션 (120분):
    • “AI 뉴스 뷰어” 앱
    • Gemini CLI 요약 기능 추가 (기사 요약 제공)
    • GitHub Flow 협업: 팀별 브랜치 → PR → 머지
  4. Demo & 회고 (30분)

워크북 아이디어

  • “깃허브 협업 실습 가이드북” (명령어 + PR 스크린샷 예시 포함)

D09. 네이티브앱 빌드 ① — React Native & Expo 입문

학습 목표

  • React Native & Expo CLI 설치/실행
  • iOS/Android 에뮬레이터 또는 Expo Go 앱을 통한 테스트

구성

  1. Intro (20분): 웹앱 ↔ 네이티브앱 차이 이해
  2. 핵심 개념 실습 (80분):
    • npx create-expo-app my-app
    • Text, Button, Image 컴포넌트 실습
  3. 프로젝트 미션 (120분):
    • “To-Do 네이티브앱”
    • 작업 추가/삭제, 완료 체크
    • AsyncStorage(local DB) 저장
  4. Demo (30분): 에뮬레이터/Expo Go 앱에서 실행

워크북 아이디어

  • “React Native 기본기: 웹 개발자 관점에서 이해하기”

D10. 네이티브앱 빌드 ② — 기능 확장 & 상업용 앱 구조

학습 목표

  • 네비게이션, API 연동, 배포 전 흐름 이해
  • Supabase 연동 맛보기

구성

  1. Intro (20분): 상업용 앱 요구사항(로그인, 데이터 연동)
  2. 핵심 개념 실습 (80분):
    • React Navigation(Stack, Tab)
    • Supabase Auth 연동 (로그인/회원가입)
  3. 프로젝트 미션 (120분):
    • “개인 메모 앱”
    • 로그인 후 개인 메모 CRUD (Supabase)
  4. Demo & 공유 (30분)

워크북 아이디어

  • “네이티브 앱에서 Supabase 연동하기”

D11. 데이터 포커스 데이 — 데이터 & AI 활용

학습 목표

  • 데이터 수집/스크래핑 → 시각화 → AI 분석 → 앱 활용
  • 데이터 중심 상업용 앱 기획 체험

구성

  1. Intro (30분): 데이터 중심 앱의 가치(핀테크, 커머스, 콘텐츠)
  2. 실습 1 (60분): Python 기반 스크래핑 도구 체험(BeautifulSoup, Playwright)
  3. 실습 2 (60분): 딥러닝 기반 데이터 분석 맛보기 (이미지 분류 예제 or 텍스트 감성분석)
  4. 프로젝트 미션 (90분):
    • “주식/상품 데이터 뷰어 앱”
    • 공개 API or 스크래핑 데이터 → Supabase 저장 → React/Vite or RN 앱에서 시각화
  5. Demo & 최종 회고 (30분): 팀별 결과물 발표

워크북 아이디어

  • “데이터에서 앱으로: 스크래핑 → 분석 → 시각화 흐름 한눈에 보기”
  • 팀별 미니 해커톤 형식 워크북: 문제 정의 → 데이터 수집 → 앱 프로토타입

✅ 2주차 강의 구성

  • 실습 비중: 강의(20%) + 실습/프로젝트(60%) + 공유/회고(20%)
  • 성취감 중심: 매일 “작동하는 결과물” 완성
  • 점진적 확장: 웹앱(React/Vite) → 네이티브앱(Expo) → 데이터 기반 앱(Supabase)
  • 협업 체험: GitHub Flow로 Pull Request & 코드리뷰 경험
  • 데이터 데이: AI와 데이터의 상업적 활용 가능성을 확인

참고: 터미널 기반 바이브코딩 도구 Gemini CLI 설치 & 기본 활용

1. 사전 준비

  • Node.js 설치
    • Node.js 공식 사이트 → LTS(Long Term Support) 버전 다운로드
    • 설치 시 npm(Node Package Manager)도 자동 포함

👉 설치 확인

node -v    # Node.js 버전 확인
npm -v     # npm 버전 확인

2. Gemini CLI 설치

Windows (PowerShell)

npm install -g @google/gemini-cli

Mac (Terminal)

sudo npm install -g @google/gemini-cli

👉 설치 확인

gemini --version

3. 설치 오류 해결 (Windows)

  • 관리자 권한 PowerShell 실행
  • 스크립트 실행 권한 부여:
set-executionpolicy remotesigned
  • 다시 설치 시도:
npm install -g @google/gemini-cli

4. Gemini CLI 기본 명령어

설치 후 터미널에서 gemini 명령 실행 가능

명령어설명
gemini initGemini CLI 초기 설정 (API 키 입력 등)
gemini login구글 계정 로그인 또는 API Key 등록
gemini chat대화형 모드 실행 (프롬프트 입력 → Gemini 응답)
gemini prompt "질문"단일 프롬프트 실행 (한 줄 답변)
gemini run <파일>특정 코드/스크립트를 Gemini에 전달해 실행 도움 받기

5. 사용 예시

대화형 채팅

gemini chat
  • > 프롬프트가 나오면 질문 입력
  • 예: > React에서 useState 설명해줘

단일 프롬프트 실행

gemini prompt "바닐라 자바스크립트로 버튼 클릭 이벤트 예제 보여줘"

코드 파일 도움받기

gemini run app.js
  • app.js 파일 분석 + 개선 제안 제공

6. 활용 팁

  • Cursor/VS Code 대신 터미널에서 직접 LLM 활용 가능
  • 간단한 코드 작성/개선, 문서 요약, 번역, 테스트용으로 적합
  • 복잡한 프로젝트 관리에는 IDE와 병행 추천

✅ 요약

  1. Node.js 설치 → npm 자동 설치
  2. npm install -g @google/gemini-cli로 설치
  3. gemini chat, gemini prompt, gemini run 등 명령어 활용
  4. 오류 시 관리자 모드 & set-executionpolicy remotesigned로 해결
Views: 8

Leave a Reply

Related Posts