프롬프트부터 플레이까지: Amazon Q, React 및 TypeScript를 사용한 배틀시피 게임 튜토리얼
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 프론트엔드 개발자 및 AI 도구 활용에 관심 있는 중급 이상 개발자
- React + TypeScript 기반 게임/앱 개발 경험을 원하는 개발자
- AI 도구(Amazon Q)를 활용한 코드 생성 및 디버깅 실전 사례를 배우고자 하는 개발자
핵심 요약
- "Amazon Q Developer CLI"를 사용하여 React + TypeScript 기반 배틀시피 게임을 생성 및 디버깅
- "q chat" 명령어로 프론트엔드 기술 스택 명확히 지정한 정확한 프롬프트 작성이 성공적인 코드 생성의 핵심
- AI 로직 포함: AI 대전기의 정확한 공격 시퀀스 및 선박 파괴 알림 기능 구현
섹션별 세부 요약
1. 프로젝트 동기 및 게임 규칙
- 배틀시피 게임은 10x10 격자에서 플레이어와 AI가 선박 배치 및 공격을 번갈아 수행하는 전략 게임
- UI 요구사항: 선박 수동 배치 기능, 게임 시작 버튼, 실시간 피격/미스 피드백, 승리 알림 모달
2. Amazon Q 도구 사용 방법
- Amazon Q Developer CLI 설치 후
q chat
명령어로 코드 생성/디버깅/개선 - 프롬프트 품질이 코드 품질에 직접적인 영향: React + TypeScript 기술 스택 명확히 지정
3. 주요 기술적 도전과 해결
- 선박 배치 검증 로직: 격자 경계 내에 선박이 겹치지 않도록 처리
- AI 로직: 중복 공격 방지 및 전략적 공격 시퀀스 구현
- 게임 상태 관리: 플레이어/AI의 선박 배치, 피격/미스 상태, 턴 정보 저장
4. 디버깅 사례
- "Duplicate export 'default'" 오류 해결: Amazon Q가 중복된
default
내보내기를 자동으로 제거 - 선박 파괴 알림 기능 추가: "Which ship is destroyed?" 프롬프트로 UX 개선
5. 결과물 및 주요 기능
- 선박 배치 UI: 클릭으로 선박 배치 가능
- 실시간 피드백: "You sunk my Battleship!" 메시지 표시
- 승리 알림 모달: 게임 종료 후 재시작 옵션 제공
결론
- Amazon Q와 React + TypeScript의 조합은 게임/앱 개발에 적합한 강력한 기술 스택
- 프롬프트 작성 시 기술 스택, UI/UX 요구사항을 명확히 정의하는 것이 성공적인 코드 생성의 핵심
- AI 도구 활용 시 디버깅 과정에서 발생한 오류를 즉시 수정할 수 있는 생산성 향상 효과 확인 가능