실전 서비스 구축 프롬프트 가이드

HTML/CSS + Tailwind CSS로
프리랜서 개발자의 자기소개 페이지를 만들어줘.

포함: 프로필 사진, 이름, 한 줄 소개,
기술 스택 뱃지, 프로젝트 3개 카드, 연락처.
모바일 반응형 + 다크 모드 지원.
Tailwind 클래스만 사용하고 별도 CSS 파일 없이.

HTML/CSS/JavaScript로
환율 계산기를 만들어줘.

기능: USD/KRW/JPY/EUR 양방향 변환,
실시간 환율 API(ExchangeRate-API 무료) 연동,
최근 변환 기록 localStorage 저장.

Next.js + Supabase 환경에서
사용자의 입력값을 받아 DB에 저장하는
CRUD API를 작성해줘.

구조:
- /api/items (GET: 목록, POST: 생성)
- /api/items/[id] (GET: 상세, PUT: 수정, DELETE: 삭제)
- Supabase RLS로 본인 데이터만 접근
- TypeScript + Zod 입력 검증

Next.js + Supabase Auth로
Google 소셜 로그인을 구현해줘.

포함:
- 로그인/로그아웃 버튼 컴포넌트
- 로그인 상태에 따른 조건부 렌더링
- 보호된 페이지(인증 필요) 미들웨어
- 세션 관리 + 리프레시 토큰

다크모드를 지원하고 성능 최적화가 된
관리자 대시보드 레이아웃을 작성해줘.

포함:
- 사이드바(접기/펴기) + 상단 헤더
- 차트 4개 (Recharts: 라인/바/파이/에리어)
- 데이터 테이블 (정렬/필터/페이지네이션)
- CSS Variables + prefers-color-scheme 다크모드
- 미들웨어: 관리자 권한 체크
- React.lazy + Suspense로 코드 스플리팅

Next.js 프로덕션 환경의 보안 미들웨어를 작성해줘.

포함:
- Rate Limiting (IP당 100요청/분)
- CSRF 토큰 검증
- 입력 Sanitization (XSS 방지)
- 보안 헤더 (CSP, HSTS, X-Frame-Options)
- JWT 토큰 검증 + 만료 처리
- 에러 응답 표준화 (정보 노출 방지)

# 1. 프로젝트 생성
npx create-next-app my-mvp --typescript --tailwind --app
cd my-mvp

# 2. Supabase 연동
npm install @supabase/supabase-js
# .env.local에 NEXT_PUBLIC_SUPABASE_URL + ANON_KEY

# 3. 배포
vercel deploy

# 1. Python 환경
python -m venv venv && source venv/bin/activate
pip install fastapi uvicorn langchain openai pinecone-client

# 2. 서버 실행
uvicorn main:app --reload

# 3. 프론트엔드 연결
# Next.js에서 FastAPI 엔드포인트 호출

// 실전 서비스 구축 — 환경 자동 설정 스크립트
const stacks = {
  beginner: {
    commands: [
      'npx create-next-app my-mvp --typescript --tailwind --app',
      'cd my-mvp',
      'npm install @supabase/supabase-js',
      'echo "NEXT_PUBLIC_SUPABASE_URL=your-url" > .env.local',
      'npm run dev'
    ],
    files: ['src/app/page.tsx', 'src/lib/supabase.ts']
  },
  ai: {
    commands: [
      'python -m venv venv',
      'source venv/bin/activate',
      'pip install fastapi uvicorn langchain openai',
      'uvicorn main:app --reload'
    ],
    files: ['main.py', 'agents/', 'prompts/']
  }
};
console.log('입문 조합 시작:', stacks.beginner.commands.join(' && '));