백엔드 API부터 프론트엔드 컴포넌트, DB 스키마, 인증까지.
실제 제품을 만드는 풀스택 개발 전 과정을 AI와 함께 처음부터 끝까지 다룹니다.
이 모듈에서 배울 것
요구사항을 주면 API 엔드포인트 목록, 요청/응답 스키마, 라우터 코드까지 순서대로 만들어냅니다. Express, Fastify, FastAPI, Hono 등 다양한 프레임워크를 AI와 함께 쓰는 방법, 그리고 API 설계 결정을 AI와 함께 검토하는 방법을 배웁니다.
핵심 포인트 — 구현 전에 API 계약(엔드포인트 목록 + 스키마)을 먼저 확정하세요. "구현 전에 API 스펙 문서를 먼저 만들어줘, 동의하면 코드 짜자"가 나중에 발생하는 변경을 줄입니다.
vibelab 폴더에서 claude 실행 후 붙여넣으세요
아래 요구사항을 바탕으로 REST API를 설계해줘. 서비스 설명: [한 줄 설명] 주요 엔티티: [User, Post, Comment 등] 핵심 기능: [CRUD, 검색, 인증 등] 프레임워크: [Express / Fastify / FastAPI 등] 구현 전에 먼저: 1. 엔드포인트 목록 (Method + Path + 설명) 2. 주요 요청/응답 스키마 3. 인증이 필요한 엔드포인트 표시 확인 후 라우터 코드를 작성해줘.
디자인 설명 또는 Figma 명세를 텍스트로 주면 React/Vue/Svelte 컴포넌트가 나옵니다. props 설계, 상태 관리, 접근성까지 고려된 컴포넌트를 AI와 함께 만드는 패턴을 배우고, 컴포넌트 라이브러리 스타일을 유지하면서 생성하는 방법도 다룹니다.
핵심 포인트 — 기존 컴포넌트를 예시로 제공하세요. "이 Button 컴포넌트와 같은 스타일로 Input을 만들어줘"가 처음부터 스타일을 설명하는 것보다 훨씬 일관된 결과를 냅니다.
vibelab 폴더에서 claude 실행 후 붙여넣으세요
아래 명세로 [React / Vue / Svelte] 컴포넌트를 만들어줘. 컴포넌트 이름: [이름] 역할: [한 줄 설명] Props: [각 prop의 이름, 타입, 필수 여부, 기본값] 상태: [내부 상태가 있다면 설명] 이벤트: [emit 또는 callback 목록] 스타일: [Tailwind / CSS Modules / styled-components 등] 참고 컴포넌트: [비슷한 기존 컴포넌트 코드] 접근성: aria 속성 포함해줘
요구사항을 주면 ER 다이어그램 → 스키마 정의 → 마이그레이션 파일까지 순서대로 만듭니다. 정규화 수준 결정, 인덱스 전략, 관계 설계에 대한 트레이드오프를 AI와 함께 검토하는 방법을 배웁니다.
핵심 포인트 — 스키마 설계 전에 "어떤 쿼리가 가장 자주 실행될지"를 먼저 정의하세요. 쿼리 패턴이 인덱스 전략과 정규화 수준을 결정합니다. AI가 이를 반영한 설계를 제안해줍니다.
vibelab 폴더에서 claude 실행 후 붙여넣으세요
아래 요구사항으로 DB 스키마를 설계해줘. 서비스 설명: [한 줄 설명] 주요 엔티티: [나열] 자주 실행될 쿼리: [목록] DB: [PostgreSQL / MySQL / SQLite 등] ORM: [Prisma / Drizzle / SQLAlchemy 등] 설계 순서: 1. 엔티티 관계도 (텍스트로) 2. 각 테이블 컬럼과 타입 3. 인덱스 전략 + 이유 4. ORM 스키마 코드
인증은 보안 취약점이 가장 많이 발생하는 영역입니다. JWT, 세션, OAuth 각각의 구현 패턴을 AI와 함께 만들되, 생성된 코드의 보안 취약점을 AI 스스로 검토하게 만드는 방법을 배웁니다.
핵심 포인트 — 인증 코드를 생성한 직후 "이 코드에서 OWASP Top 10 관점의 취약점을 찾아줘"라고 하세요. 생성과 검증을 한 세션에서 처리하면 보안 사고를 미리 막을 수 있습니다.
vibelab 폴더에서 claude 실행 후 붙여넣으세요
아래 스펙으로 인증 시스템을 구현해줘. 인증 방식: [JWT / Session / OAuth 등] 프레임워크: [Express / Next.js / FastAPI 등] 필요한 것: [로그인, 회원가입, 토큰 갱신, 로그아웃] 권한 수준: [role-based: admin / user 등] 구현 후 바로: - OWASP Top 10 관점에서 취약점 검토해줘 - 특히 토큰 저장, XSS, CSRF, 브루트포스 방어 확인
프론트-백엔드를 연결하는 순간 예상치 못한 문제들이 등장합니다. CORS, 타입 불일치, 비동기 타이밍, 환경변수 문제 등 통합 단계에서 자주 나타나는 문제 유형별 AI 기반 디버깅 패턴과 통합 테스트 작성법을 배웁니다.
핵심 포인트 — 통합 버그는 단일 계층만 보면 원인을 찾기 어렵습니다. "프론트에서 보내는 요청과 백엔드가 기대하는 형식이 일치하는지 비교해줘"처럼 양쪽 계층 코드를 함께 제공하는 것이 핵심입니다.
vibelab 폴더에서 claude 실행 후 붙여넣으세요
프론트-백엔드 통합 과정에서 문제가 생겼어. 증상: [어떤 오류 / 어떤 잘못된 동작] 프론트엔드 코드 (API 호출 부분): [코드] 백엔드 코드 (해당 엔드포인트): [코드] 에러 로그: [브라우저 콘솔 / 서버 로그] 원인을 찾아줘. 특히 요청 형식, 헤더, 타입 불일치, CORS를 확인해줘.