제14강 : 바이브 코딩 완전 정복

• 개인 포트폴리오 사이트: 인터랙티브 요소가 포함된 현대적 포트폴리오
• 할일 관리 앱: 팀 협업 기능이 있는 고급 Todo 애플리케이션
• 날씨 대시보드: 다양한 기상 정보를 시각화하는 웹 앱
• 레시피 검색 사이트: 재료 기반 레시피 추천 시스템

프로젝트명: [선택한 프로젝트]
기술 스택: [선정된 기술들]

다음 조건을 만족하는 프로젝트 폴더 구조를 설계해주세요:
1. 확장성을 고려한 컴포넌트 분리
2. 코드 가독성과 유지보수성
3. 현업에서 사용하는 베스트 프랙티스 적용
4. 필요한 설정 파일들 포함

• package.json 설정과 scripts 자동 생성 요청
• ESLint, Prettier 설정 파일 생성 요청
• 기본 CSS 리셋과 전역 스타일 생성

현재 작업: [구현 중인 기능]
진행 상황: [현재까지 완성된 부분]
다음 단계: [구현하려는 기능]

요청사항:
1. [기능명] 컴포넌트 완전한 코드 작성
2. 상태 관리 로직 포함
3. 에러 처리 및 로딩 상태 처리
4. 반응형 CSS 스타일링
5. 접근성 고려사항 반영

추가 조건:
- 기존 코드와 일관성 유지
- 재사용 가능한 컴포넌트 설계
- 성능 최적화 고려

• CSS 레이아웃 이슈: 스크린샷과 함께 레이아웃 문제 설명
• JavaScript 로직 오류: 함수 단위로 코드 분석 요청
• API 연동 문제: 네트워크 탭 결과와 함께 분석 요청
• 성능 최적화: 프로파일링 결과 공유 후 개선안 요청

• Context API: 전역 상태 관리 구조 설계
• Local Storage: 데이터 영속성 구현
• Caching: API 응답 캐싱 전략
• State Synchronization: 다중 컴포넌트 간 상태 동기화

현재 웹 애플리케이션의 사용자 경험을 개선하고 싶습니다.

개선 영역:
1. 페이지 로딩 속도 최적화
2. 사용자 인터랙션 반응성 향상
3. 접근성 기준 준수
4. 모바일 사용자 경험 개선

구체적 요청:
- Core Web Vitals 점수 개선 방안
- 애니메이션 라이브러리 추천 및 구현
- WCAG 2.1 가이드라인 준수 코드
- 반응형 디자인 개선점

• ESLint 규칙 설정 및 커스터마이징
• Prettier를 통한 코드 포맷팅 자동화
• Husky를 활용한 pre-commit 훅 설정
• 코드 리뷰 체크리스트 작성

프로젝트: [프로젝트명]
배포 플랫폼: [선택한 플랫폼]
기술 스택: [사용 기술들]

다음을 설정해주세요:
1. CI/CD 파이프라인 구성
2. 환경변수 관리 방법
3. 빌드 최적화 설정
4. 도메인 연결 및 SSL 설정
5. 모니터링 및 분석 도구 연동

추가 요청:
- GitHub Actions 워크플로우
- 배포 전 자동 테스트 실행
- 롤백 전략 구성

• 성능 분석: Lighthouse 스코어 측정 및 개선
• 사용자 피드백: 베타 테스터를 통한 실제 사용성 검증
• 코드 품질 검토: 리팩토링 포인트 및 최적화 기회 파악
• 확장 계획: 추가 기능 개발 로드맵 수립

• 더 효과적인 프롬프트 패턴 개발
• AI 도구별 특성을 활용한 업무 분담
• 자동화 도구 도입으로 반복 작업 최소화
• 팀 협업 시 AI 활용 워크플로우 구축