제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

대상자: 웹 개발자, React 및 AWS Q Developer 도구 사용자
난이도: 중급~고급 (React 상태 관리, AWS CLI 활용, 성능 최적화 기법 포함)

핵심 요약

AWS Q Developer 활용: useJottoGame 커스텀 훅을 통해 게임 로직을 모듈화하고, countMatchingLetters 알고리즘으로 문자 매칭 규칙을 Set으로 효율적으로 처리
프로젝트 구조: Vite로 생성된 React 앱의 디렉토리 구조와 localStorage를 활용한 고득점 데이터 저장 로직
UI/UX 개선: GuessResults 컴포넌트의 조건부 렌더링과 CSS 변수 기반의 반응형 디자인

섹션별 세부 요약

1. 게임 소개 및 설계 목적

Jotto 게임은 5자리 단어 추측을 통해 문자 일치 수만 피드백 제공
AWS Q Developer 사용 이유:

- 간단한 규칙으로 전략적 추론 테스트 가능

- Wordle 보다 더 복잡한 추론 요구

2. AWS Q Developer 활용 사례

프로젝트 초기화:

- npm create vite@latest jotto-game -- --template react 명령으로 Vite 기반 React 프로젝트 생성

CSS 개선:

- "Guess 텍스트 시야 문제"에 대한 CSS 조정 요청으로 반응형 디자인 적용

기능 추가:

- 사용자 첫 방문 가이드 패널 추가 요청으로 UX 개선

3. React 상태 관리 및 커스텀 훅

useJottoGame 커스텀 훅 구조:

- useState를 활용한 secretWord, guesses, matches 상태 관리

- submitGuess, startNewGame 함수로 게임 로직 분리

게임 상태 전환 로직:

- isCorrectGuess, calculateScore, saveHighScore 등 복잡한 게임 메커니즘 모듈화

4. 문자 일치 알고리즘

countMatchingLetters 함수:

- Set 사용으로 대소문자 무시 및 중복 문자 제거

- guessLetters.forEach(letter => secretLetters.has(letter))로 일치 문자 수 계산

성능 최적화:

- O(n) 복잡도로 효율적인 알고리즘 구현

5. 데이터 지속성 및 리더보드

localStorage 활용:

- loadHighScores, saveHighScore 함수로 고득점 데이터 저장 및 로딩

- 상위 10개 점수만 저장 (.slice(0, 10))

6. 프로젝트 구조 및 CSS

디렉토리 구성:

- src/components/game/, src/hooks/useJottoGame.js, src/utils/wordUtils.js 등 모듈화된 구조

CSS 설계:

- @media (max-width: 768px)로 반응형 디자인 적용

- var(--secondary-color) 등 CSS 변수 기반 색상 체계

7. React 컴포넌트 최적화

GuessResults 컴포넌트:

- guesses.length === 0 조건으로 빈 상태 렌더링

- map() 사용 시 key props 필수 지정

- semantic HTML 적용 (예:

사용)

결론

AWS Q Developer는 복잡한 게임 로직과 UI/UX 개선을 빠르게 구현 가능
React 상태 관리와 localStorage 활용으로 데이터 지속성 확보
반응형 CSS와 Set 기반 알고리즘을 활용해 성능 및 사용자 경험 향상

> 실무 팁: AWS Q Developer는 초기 프로젝트 생성, 컴포넌트 생성, 알고리즘 설계 등 전반적인 개발 프로세스를 간소화할 수 있음.