✅ Mini Quiz App

데모.gif

> 배포링크(click me!)

---

👋 "미니 퀴즈 앱" 프로젝트 소개

• https://opentdb.com/api_config.php에서 제공하는 오픈 소스 API를 이용하여 구현한 퀴즈 앱입니다.

• 문서 최상단의 배포링크를 통해 체험하실 수 있습니다.

🛠️ 사용한 기술 스택

• node v14+(npm v9+) yarn

• React-Typescript CRA

• react-router-dom Chart.js

• eslint prettier Styled-components

• jest react-testing-library

💡 이 프로젝트를 clone하고 싶다면

1. 이 저장소를 클론해주세요.

2. 의존성을 설치해주세요.

yarn install

3. 환경 변수를 설정해주세요.

프로젝트 최상단(루트) 경로에 .env 파일을 만들고 아래와 같이 환경 변수를 설정해주세요.

REACT_APP_API_END_POINT=https://opentdb.com/api.php

4. 실행해주세요.

로컬환경에서 3000번 포트로 실행됩니다.

yarn start

---

🔎 무엇을 테스트 하였나요?

아래 기능이 정상작동하는지 테스트 합니다.

상태 변경이 일어나는 기능

1. 새로운 퀴즈를 시작하는 경우

2. 다음 퀴즈로 넘어가는 경우

3. 문제를 틀렸다면 틀린 문제 개수를 반환

상태 변경이 일어나지 않는 기능

1. 현재 사용자가 문제를 다 풀었는지 아닌지

2. 현재 사용자가 풀고 있는 문제가 틀렸는지 아닌지

컴포넌트 단위 테스트

• 상태가 변경되는 로직은 위 기능 테스트에서 확인하고 컴포넌트는 렌더링에 필요한 정보만 받아서 렌더링을 합니다. 따라서 컴포넌트가 잘 렌더링 되는지 단위 테스트를 진행합니다.

통합 테스트

• 사용자 액션에 따라 상태가 바뀌었을 때 상태가 변경되고, 그 상태에 따라 컴포넌트가 잘 렌더링 되는지 확인하는 통합테스트를 진행합니다.

---

이 앱의 기능은 다음과 같습니다.

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

필요한 주요 기능은 아래와 같이 정리할 수 있습니다.

1. 새로운 퀴즈를 생성하고 저장하는 기능

2. 다음 문제로 넘어가는 기능

   • 문제를 풀지 않았다면 넘어갈 수 없습니다.
   • 문제를 풀었는지 확인하는 기능
   • 문제를 풀지 않았다면 버튼을 숨기는 기능(UI)
   • 문제를 틀렸다면 틀린 문제를 저장하는 기능

3. 틀린 문제들을 가져오는 기능

4. 문제가 틀렸는지 맞았는지 알려주는 기능

5. 문제를 모두 풀었는지 확인하는 기능

그러면 이 앱에 필요한 상태는 총 3가지로 정의할 수 있습니다.

1. 불러온 퀴즈 데이터

2. 현재 풀고 있는 문제(인덱스)

3. 틀린 문제(문제의 인덱스)

이 3가지의 상태를 알고 있다면 다른 기능을 모두 구현할 수 있을 것입니다.

저는 아래 3가지 이유로 전역 상태로 구현하기로 했고, Context API를 사용했습니다.

1. 상태의 데이터가 여러 페이지(퀴즈 페이지, 오답 페이지, 결과 페이지)에 사용됩니다.

2. 상태를 한 곳에서 관리하게 된다면 기능만 테스트 할 수 있습니다.

3. 상태 변경과 UI 렌더링 테스트를 분리할 수 있습니다.

🤔 더 생각해본 사용자 경험

상태가 변경된다면 클라이언트의 상태를 유지시켜줘야 합니다. 간단하게 세션 스토리지를 사용했습니다.

1. 문제를 풀다가 새로고침을 하는 경우 풀던 문제를 이어서 풀 수 있습니다.

2. 문제를 다 풀지 않았는데 의도적으로 퀴즈 결과 페이지, 오답 노트 페이지에 접근하는 경우 - 퀴즈 화면으로 이동을 유도합니다.

3. 문제를 다 풀었는데 의도적으로 퀴즈 페이지에 접근하는 경우 - 문제를 이미 다 풀어서 풀고 있는 문제가 없으므로 홈화면으로 이동을 유도합니다.

4. 오답이 없는 경우 - 오답이 없다는 UI처리를 합니다.

---

📝 참고

이 프로젝트를 구현하면서 작성했던 노션문서입니다.

노션 링크 바로가기