이 프로젝트는 다음 환경에서 개발되었습니다:
- Node.js v18.19.1
- Yarn 1.22.21
이 버전들과 호환되는 환경에서 프로젝트를 실행해주세요.
프로젝트 폴더에는 .nvmrc
파일이 포함되어 있어, nvm
이 설치되어 있다면 아래 명령어로 적절한 Node.js 버전을 설정할 수 있습니다:
nvm use
nvm
설치 방법은 nvm GitHub 페이지를 참고해주세요.
프로젝트를 로컬 환경에서 실행하기 위해 다음 단계를 따라 주세요:
git clone https://github.com/JayeHa/quiz-app.git
cd quiz-app
yarn install
yarn start
- 개발 기간:
2024.02.21
-2024.02.27
- 배포 링크: jaye-quiz-app.vercel.app
- 깃허브 링크: github.com/JayeHa/quiz-app
프로젝트의 구조는 다음과 같이 구성되어 있습니다.
📦quiz-app
┣ 📂public # 정적 파일 저장
┣ 📂src
┃ ┣ 📂components # 컴포넌트
┃ ┣ 📂data # 퀴즈 데이터 및 샘플 데이터
┃ ┣ 📂hocs # 고차 컴포넌트 (Higher-Order Components)
┃ ┣ 📂hooks # Custom Hooks
┃ ┣ 📂models # 타입스크립트 모델 및 인터페이스 정의
┃ ┣ 📂pages # 각 페이지 컴포넌트 (홈, 퀴즈 페이지 등)
┃ ┣ 📂service # API 호출 및 서비스 로직
┃ ┣ 📂store # Zustand를 사용한 상태 관리 스토어
┃ ┣ 📂tests # 테스트 유틸리티
┃ ┣ 📂utils # 공통 유틸리티 함수
┃ ┣ 📜App.tsx
┃ ┗ 📜index.tsx
┣ 📜.gitignore
┣ 📜.nvmrc # NVM을 사용한 Node.js 버전 설정
┣ 📜.prettierrc
┣ 📜README.md
┣ 📜craco.config.js # CRA(Custom React App) 설정 오버라이드
┣ 📜package.json
┣ 📜tsconfig.json
┗ 📜yarn.lock
-
사용자는 제공된 질문과 4개의 선택지 중 하나를 선택하여 답변할 수 있으며, 선택지는 매번 다른 순서로 제공됩니다.
-
진행 상황을 시각적으로 표현하는 프로그레스 바를 통해, 사용자는 현재 위치와 남은 퀴즈의 수를 쉽게 파악할 수 있습니다.
yarn test
다음 기준에 따라 테스트 대상을 선정했습니다.
- 사용자 인터페이스의 핵심 요소: 사용자 경험에 직접적인 영향을 미치는 컴포넌트와 기능
- 주요 비즈니스 로직: 애플리케이션의 핵심 가치를 제공하는 비즈니스 로직
- QuizCard
- 사용자가 퀴즈를 푸는 주요 인터페이스입니다.
- 정확한 동작과 사용자 경험을 위해 테스트 커버리지를 100%로 유지했습니다.
- 바로가기
- QuizProgress
- 사용자에게 남은 문제 수와 진행 상황을 시각적으로 표시합니다.
- 사용성 향상을 위해 테스트했습니다.
- 바로가기
- QuizReviewCard
- 오답노트 페이지에서 사용되며, 사용자가 선택한 답변과 정답을 확인할 수 있습니다.
- 바로가기
- 결과페이지에서 사용자에게 최종 점수와 정답률을 보여주는 컴포넌트입니다.
- 사용자에게 정확한 정보를 제공하기 위해 테스트합니다.
- 바로가기
- 배열의 요소를 무작위로 섞는 함수입니다.
- 사용자에게 제공되는 선택지의 순서가 매번 달라야 하므로, 이 함수의 정확성을 보장하기 위해 테스트합니다.
- 바로가기
- 퀴즈 데이터, 사용자 답변, 시간 측정 등을 관리하는 상태 관리 스토어입니다.
- 애플리케이션의 데이터 무결성과 일관성을 보장하기 위해 테스트했습니다.
- 바로가기
- 문제 상황: 외부 API 호출 중 예상치 못한 오류로 인해 애플리케이션의 기능이 중단되는 상황이 발생했습니다.
- 해결 방법:
- 기존의 useSuspense 고차 컴포넌트(HOC)을 리액트의 ErrorBoundary와 결합하여 useAsyncBoundary로 확장함으로써, 예외 처리 기능을 강화했습니다. 이를 통해 오류 발생 시 사용자에게 적절한 피드백을 제공할 수 있도록 했습니다.
- 외부 API의 오류로부터 독립적으로 애플리케이션을 유지하기 위해 샘플 데이터로의 대체 기능을 구현하여 PR을 제출했습니다.
- 관련 이슈 및 PR: 이슈 #2, PR #1
- 원활한 에러 테스트를 위해 메인 브랜치에는 해당 변경 사항을 반영하지 않았습니다. PR #1에서 변경 사항을 확인하실 수 있으며, 미리보기 배포 링크를 통해 변경된 기능을 테스트해보실 수 있습니다.
- 문제 상황: 컴포넌트의 className prop이 undefined일 때 "undefined" 문자열이 추가되는 문제가 발생했습니다.
- 해결 방법:
classnames
라이브러리를 프로젝트 의존성에 추가하여className
의 동적 관리를 개선했습니다.
- 관련 이슈 및 PR: PR #3