---
# System prepended metadata

title: "\U0001F3C3‍♀️ 릴레이 프로젝트"

---

## 3주차 구현
### 백엔드
- 해야할것 : 
    1.  long api -> T/F  api로 수정 

### 프론트엔드
- 해야할것 :
    1. 퀴즈 풀기 (모두) -> 서버와 연결 2 [J145, J048]
    2. 퀴즈 생성 페이지 (T/F) 만들기 ? 3 [S017, K024, S030]
    3. 정답 처리 로직 구현 2 []
    4. 점수 표시 및 저장  
        - 표시는 toast로 표시 
        - mongodb에 점수저장 
            - 마지막 최종점수 출력 -> 닉네임입력창 -> 닉네임 입력 -> mongodb에 저장


# 🏃‍♀️ 릴레이 프로젝트

> - 1주차  
  `J126_오수완` `J166_이충헌` `S016_박상우` `S043_이정엽` `J151_이원주` `J086_박상진` `K044_이원중` `J146_이영범`
> - 2주차  
  `J052_김정윤` `J056_김준호` `S037_이남준` `J061_김창현` `J091_박주원` `J094_박춘화` `K047_이효동` `K041_이상건` 
> - 3주차 
  `J048_김은규` `J144_이승주` `J145_이신필` `K024_박치윤` `S017_박세원` `S030_오창민` `S049_이태혁`
> - 4주차 

# 🐾 개스퀴 🐾 - 개발자를 위한 스피드 퀴즈 서비스

<center><img style='margin-bottom:20px; width:300px;' src="https://user-images.githubusercontent.com/40421183/126756706-81b0a521-3ecd-4543-9a14-f37e4e6cf6e6.png"></center>

### 서비스 개요

- 개발자들의 CS 지식 함양을 위한 자가퀴즈 진단 서비스
  - [`Quizlet`](https://quizlet.com/ko)에서 착안
  - 시간과 장소에 구애받지 않고 퀴즈로 쉽게 자가 진단할 수 있는 서비스 제공

### 주요 기능

- 메인 화면에서 임의로 작성한 퀴즈 n개를 보여준다.
- 생성 화면에서 사용자가 직접 퀴즈를 생성한다.
- 퀴즈가 종료되면 퀴즈 결과를 점수화 해 점수를 저장, 랭킹을 보여준다.

### 와이어프레임

![figma](https://user-images.githubusercontent.com/57510192/126746271-14dc1e25-36ac-46e7-82ec-38ddd35ccfd2.PNG)

### 기대효과

- 반복적인 퀴즈를 통해, 효율적으로 단기 기억(지식)을 장기 기억으로 전환한다.

## 기능 명세

### A . 퀴즈 추가

- 퀴즈 데이터 CRUD
- 퀴즈 유형 예시
  - 단답형
    - 같은 용어(`데드락`, `교착상태`, `deadlock`)을 정답처리
    - 학습자가 같은 용어라고 생각이 든다면 `issue` 등록
  - 서술형
    - 서술 문장내 포함된 키워드를 통하여 부분점수 도출
  - 객관식
  - True or False
- **+α(선택)**
  - 퀴즈 카테고리 분류하기

### B . 게임 기능

- 입력된 데이터 기반으로 퀴즈 생성
- **+α(선택)**
  - 인공지능으로 자동 카테고리 생성
  - 다시 풀기

### C . 게임 형식의 랭킹 시스템 구축

- 데이터 불러오기
- 사용자들의 점수 출력
- **+α(선택)**
  - SNS에 문제집 공유

## 추가적으로 구현해볼 사항

- 틀렸던 퀴즈 다시 풀기
- 회원가입 및 로그인
- 퀴즈 스크랩

## 주차별 구현 기능

| <center>주차</center>             | <center>기능</center>                         | <center>세부기능</center>                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| --------------------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <center>2주차 (7월 30일)</center> | <center>퀴즈 추가</center>                    | 페이지 구현 - 개념의 이름과 정의를 입력 받는 페이지 구현<br><br>1. 개념의 이름과 정의를 입력합니다.<br>2. 입력 받은 데이터를 저장소에 저장합니다.                                                                                                                                                                                                                                                                                                               |
| <center>3주차 (8월 6일)</center>  | <center>게임 기능(주관식 단답형)</center>     | 페이지 구현 - 문제를 푸는 <b>메인</b> 페이지 구현<br><br>1. 저장소에서 일정 만큼의 데이터를 랜덤하게 가져옵니다.<br>2. 가져온 n개의 데이터{이름, 정의}를 문제형식으로 바꿔 위젯에 데이터 바인딩을 합니다.<br><br>예시)<br>질문(데이터.정의 + “란 무엇을 뜻하는가?”)<br>답변(가져온 데이터와 입력받은 데이터를 비교합니다.)<br><br>3.사용자가 입력한 답변과 가져온 데이터가 일치하면 정답처리를 합니다.<br>4.문제를 다 풀었으면 점수화해 저장소에 저장합니다<br> |
| <center>4주차 (8월 13일)</center> | <center>게임 형식의 랭킹 시스템 구축</center> | 페이지 구현 - 퀴즈가 끝나면 사용자들의 점수를 랭킹화해서 보여주는 페이지 구현<br><br>1. 저장소(로컬 혹은 웹의 저장소)에서 퀴즈를 푼 사람들의 정보를 가져옵니다.<br>2. 뷰에 랭킹 형식으로 나의 점수와 사람들의 점수를 출력합니다.                                                                                                                                                                                                                                |



# 🐾 개스퀴 🐾 - 백엔드

### 기술 스택

- Node.js (Express) + MongoDB (mongoose)



### 사용 환경 설정

1. 백엔드 파일 클론하기

   ```bash
   > git clone https://github.com/Winters0727/Quiz_Backend
   ```

2. 의존성 파일 설치 - `package.json` 파일 확인

   ```bash
   > npm install
   ```

3. Mongo DB 설치

   - MongoDB Community Server
   - MongoDB Compass (선택)
   - https://www.mongodb.com/try/download

4. 환경변수 설정 - `.env` 파일 생성(Backend directory 내부에 생성해줄 것)

   ```
   DATABASE_URL=(Mongo DB 로컬 URL : mongodb://localhost:27017/)
   PORT=(사용할 포트 번호)
   ```

5. `bin/www` 파일 실행

   ```bash
   > node bin/www
   > nodemon bin/www
   ```



****



### 데이터 모델 스키마 (3주차 수정)

**단답형 퀴즈**

|    **데이터**    |     **키**      | **자료형** | **옵션** |
| :--------------: | :-------------: | :--------: | :------: |
|    퀴즈 문제     | `quizQuestion`  |  `String`  |   필수   |
|    퀴즈 정답     |  `quizAnswer`   |  `Array`   |   필수   |
|  퀴즈 카테고리   | `quizCategory`  |  `Array`   |   필수   |
| 퀴즈 플레이 횟수 | `quizPlayCount` |  `Number`  |          |
|  퀴즈 생성 시점  |   `createdAt`   |   `Date`   |          |
|  퀴즈 변경 시점  |   `updatedAt`   |   `Date`   |          |



**OX 퀴즈**

|    **데이터**    |     **키**      | **자료형** | **옵션** |
| :--------------: | :-------------: | :--------: | :------: |
|    퀴즈 문제     | `quizQuestion`  |  `String`  |   필수   |
|    퀴즈 정답     |  `quizAnswer`   |  `String`  |   필수   |
|  퀴즈 카테고리   | `quizCategory`  |  `Array`   |   필수   |
| 퀴즈 플레이 횟수 | `quizPlayCount` |  `Number`  |          |
|  퀴즈 생성 시점  |   `createdAt`   |   `Date`   |          |
|  퀴즈 변경 시점  |   `updatedAt`   |   `Date`   |          |



**객관식 퀴즈**

|    **데이터**    |     **키**      | **자료형** | **옵션** |
| :--------------: | :-------------: | :--------: | :------: |
|    퀴즈 문제     | `quizQuestion`  |  `String`  |   필수   |
|    퀴즈 정답     |  `quizAnswer`   |  `Number`  |   필수   |
|   퀴즈 선택지    | `quizSelection` |  `Array`   |   필수   |
|  퀴즈 카테고리   | `quizCategory`  |  `Array`   |   필수   |
| 퀴즈 플레이 횟수 | `quizPlayCount` |  `Number`  |          |
|  퀴즈 생성 시점  |   `createdAt`   |   `Date`   |          |
|  퀴즈 변경 시점  |   `updatedAt`   |   `Date`   |          |



****



### Endpoint

**로컬 서버 Base URL** : `http://localhost:(포트번호)/`

**퀴즈 API Base URI** : `api/quiz/(퀴즈 타입 : short, trueFalse, select)`

- `http://localhost:(포트번호)/api/quiz/short`
- `http://localhost:(포트번호)/api/quiz/trueFalse`
- `http://localhost:(포트번호)/api/quiz/select`

**랜덤 퀴즈 Base URL** : `http://localhost:(포트번호)/api/quiz/random` (GET)

- 단답형, 서술형, 객관식 퀴즈 각각의 최신 퀴즈 10개를 불러와서 그중 무작위로 5개를 선택해 넘겨준다.
- 퀴즈 개수의 합이 5개 미만이라면 그 개수만큼의 퀴즈를 넘겨준다.



단답형, 서술형, 객관식 퀴즈 모두 퀴즈 타입을 제외하면 동일한 CRUD Endpoint를 가진다.

`quizId`는 Mongo DB에서 제공하는 `_id`를 의미한다.

| **Endpoint** | **HTTP Method** |                           **설명**                           |
| :----------: | :-------------: | :----------------------------------------------------------: |
|     `/`      |      POST       |                      퀴즈를 생성합니다.                      |
| `/?limit=1`  |       GET       | 퀴즈 리스트를 가져옵니다.<br />Query로 `limit`를 입력하면 가져올 데이터 양을 제한합니다. |
|  `/:quizId`  |       GET       |                   특정 퀴즈를 가져옵니다.                    |
|  `/:quizId`  |       PUT       |                   특정 퀴즈를 변경합니다.                    |
|  `/:quizId`  |     DELETE      |                   특정 퀴즈를 제거합니다.                    |



- Post 예시

  - URL : `http://localhost:8000/api/quiz/short`

  - http method : POST

  - 데이터 : 

    ```json
    {
        "quizQuestion" : "둘 이상의 프로세스가 다른 프로세스가 점유하고 있는 자원을 서로 기다릴 때 무한 대기에 빠지는 상황을 뭐라고 하나요?",
        "quizAnswer" : ["데드락", "deadlock", "교착상태"],
        "quizCategory" : ["운영체제", "컴퓨터", "프로그래밍"]
    }
    ```
****
