실습으로 배우는 바이브코딩 with 클로드코드 · 4장
4장 — API와 반응형 웹페이지 개발
이 장의 결과물 — API로 만든 내 홈페이지에 구글 로그인까지 붙인 진짜 서비스. 공개 API로 실데이터가 흐르는 반응형 페이지를 만들어 배포하고, 바로 그 페이지에 로그인을 달아 "로그인한 사람만" 쓰게 만듭니다. 도구: 공개 API · Plan Mode · Google OAuth · GitHub · Vercel.
DECK 1
공개 API 데이터 페이지
API = 데이터를 요청하는 정식 창구. 환율·날씨·미세먼지 등 9가지 공개 API 중 하나를 골라 실데이터 페이지를 만들고 Vercel로 배포 — 그리고 큰 작업 전 계획부터 세우는 Plan Mode를 깊게 익힙니다.
17 슬라이드 →
DECK 2
구글 로그인
덱 1에서 API로 만든 그 홈페이지에 진짜 구글 OAuth 로그인을 붙입니다. Google Cloud 설정 → 대화로 구현 → 로컬 확인 → Vercel 재배포(redirect URI)까지 — 자주 나는 로그인 에러 해결법 포함.
19 슬라이드 →