🧩 Quiz App

Quiz App with react

🖼️ Thumbnail

맨 위로

🔗 Link

• Quiz APP
• Story Book

맨 위로

🔧 Tech Stack

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

맨 위로

✨ Features

• 사용자는 퀴즈 풀기 버튼을 클릭하여 퀴즈 풀기를 시작할 수 있다.
• 사용자는 문항에 대한 답안을 4개 보기 중에 선택할 수 있다.
• 사용자는 답안을 선택하면 다음 문항을 볼 수 있다.
  • 답안 선택 후 다음 문항 버튼을 볼 수 있다.
  • 답안이 맞았는지 틀렸는지 바로 알 수 있다.
  • 다음 문항 버튼을 클릭하여 다음 문항으로 이동할 수 있다.
• 모든 문항을 다 풀면 사용자는 다음과 같은 결과 정보를 볼 수 있다.
  • 퀴즈를 마칠 때까지 소요된 시간
  • 정답 개수
  • 오답 수
  • 정 오답에 대한 비율을 차트로 표기
• 오답 노트 기능

맨 위로

🧪 Test

# Unit Test
yarn test

# E2E Test
yarn cypress open

Unit Test

• jest과 RTL(React-Testing-Library) 대신 vitest 사용
• 컴포넌트가 의도적으로 동작을 잘 하는지 렌더링에 문제없는지 확인하기 위해 단위 테스트 진행
• 공통 유틸 함수들이 결함이 없는지 확인하기 위해 단위 테스트 진행

vitest 최소한의 노력으로 vite 기반 프로젝트와 통합되며, 매우 빠른 장점이 있기때문에 사용하게 되었습니다.
vitest는 jest에서 사용되는 대부분의 api를 지원합니다.

vitest docs

E2E Test

• 기능 요구사항이 문제없이 개발되었는지 확인하기 위한 E2E 테스트 진행
• cypress를 통해 테스트 진행

맨 위로

💾 BackEnd API

퀴즈에 대한 정보를 얻기위해 open API 사용

• opentdb.com

맨 위로

🚀 Getting Started

로컬환경에서 앱을 실행하는 방법입니다.

Prerequisites

해당 앱을 실행시키기 위한 필수 조건 입니다.

1. yarn install

# yarn 설치
npm -g install yarn

2. node setup

# .nvmrc 기준 node version 설치
# nvm을 사용하지 않는다면 수동으로 노드버전을 맞춰주세요.
nvm use

Installation

1. 프로젝트 클론

git clone https://github.com/chan9yu/quiz_app

2. 프로젝트 디렉토리로 이동

cd quiz_app

3. 종속성 설치

yarn install

4. 개발 서버 시작

yarn dev

맨 위로