시간이 않 되어서 강의 시간에 완성을 못한 내용을 추가 보충 합니다.
소개
개인적으로 java와 python등의 언어를 사용했던 경험이 있어 Vibe coding를 이용한 web개발에 도전을 했습니다.
javascript기반의 웹은 개발 경험이 없어서 초보 수준입니다.
사용 도구: windsurf
진행 방법
GPTs PRD Builder 을 이용해 PRD.md 파일 생성
windsurf 에 TODO.md 파일 생성 요청
TODO.md 파일대로 수행하도록 prompt 수행
결과와 배운 점
생성한 소스는 정상 동작을 하지 않았습니다.
설치한 npm 관련 라이브러리 문제 --> 소스와 log를 보지 않고 전적으로 AI에서 의존 하는 디버깅은 너무 어려웠습니다.
자동 생성 되는 README.md 파일에 웹의 사용법이 들어 온다는 걸 알게 되었습니다.
개발 경험도 새로운 언어로 하는 개발에는 별 도움이 않된다.
재 시도
처음 작성한 코드를 포기 하고 디렉토리를 새로 만든후, PRD.md 파일만 복사를 한후 재 수행
PRD.md 파일에서 아래 내용 삭제
5. 🧱 Tech Stack Frontend: React + Vite Styling: Tailwind CSS Deployment: Vercel or Netlifywindsurf rule 파일 정의 : tool에 전달 하는 시스템 프롬프트 -> windsurf directory로 검색 후, 구현 하려는 내용을 확인후 목사(cursor directory 로 검색)
# General Code Style & Formatting
- Follow the Airbnb Style Guide for code formatting.
- Use PascalCase for React component file names (e.g., UserCard.tsx, not user-card.tsx).
- Prefer named exports for components.
# Project Structure & Architecture
- Follow Next.js patterns and use the App Router.
- Correctly determine when to use server vs. client components in Next.js.
# Styling & UI
- Use Tailwind CSS for styling.
- Use Shadcn UI for components.
# Data Fetching & Forms
- Use TanStack Query (react-query) for frontend data fetching.
- Use React Hook Form for form handling.
- Use Zod for validation.
# State Management & Logic
- Use React Context for state management.
# Backend & Database
Use Prisma for database access.
사용 LLM model : Claude 3.7 Sonnect (Thinking)
Prompt 1: @PRD.md 파일을 참고 해서 TODO.md 파일을 생성 해줘
Prompt 2: @TODO.md 파일 참고 하여, 순대대로 진행 한후 결과를 check해줘
[결과]
느낀점 : 않 될 때는 처음부터 다시 한다.
기존 입력 내용을 다시 검
LLM모델의 완성도가 결과를 만들어 낸다.
