본문으로 건너뛰기

실전 프로젝트

프로젝트: Todo 애플리케이션 만들기(30분)

GitHub Copilot을 활용하여 간단한 Todo 애플리케이션을 만들어봅니다. vscode에서 Chat을 사용하여 단계별로 기능을 구현해보세요.

요구사항

  • Todo 항목 추가
  • Todo 항목 삭제
  • Todo 항목 완료 표시
  • 로컬 스토리지에 저장

단계별 진행

1단계: HTML 구조

Chat에게 요청: "Todo 앱의 HTML 구조 만들어줘"

2단계: JavaScript 로직

Chat에게 요청: "Todo 항목을 추가/삭제하는 함수 만들어줘"

3단계: 스타일링

Chat에게 요청: "Todo 앱을 위한 CSS 스타일 만들어줘"

4단계: 로컬 스토리지

Chat에게 요청: "localStorage를 사용해서 Todo 저장하는 기능 추가해줘"

베스트 프랙티스

  1. 명확한 요청: 구체적으로 요청할수록 좋은 결과
  2. 단계적 접근: 작은 단위로 나눠서 진행
  3. 코드 리뷰: 생성된 코드 검토 필수
  4. 테스트: 각 기능 테스트하기

도전 과제

  • 필터링 기능 추가 (전체/완료/미완료)
  • 수정 기능 추가
  • 우선순위 설정 기능

다음 단계

실전 프로젝트를 완료했다면 이제 프롬프트 엔지니어링 이해에서 더 효과적인 코드 생성을 위한 고급 기법을 학습하세요.