[React] 호그와트 기숙사 테스트

여러 질문에 대한 답을 하면 답을 한 것을 종합해서 해리포터 4개의 반 중 어울리는 하나를

배정 해주는 사이트를 조별 프로젝트 진행중이다.

스프레드 시트에 질문, 답, 기숙사 정보 등의 DB를 저장 해주고, 패키지를 이용해 정보를 가져와준다.

 

---

패키지 설치

//package.json

"google-spreadsheet": "^3.3.0",
"googleapis": "^122.0.0",

- 우선 패키지를 설치해준다.

- yarn add [패키지명], npm install [패키지명] 

 

---

질문지 작성

- 이 작업을 맡아서 스프레드 시트 api로 데이터를 불러와 주는 작업을 했다.

// getGoogleSheet.jsx
const getGoogleSheet = async (sheetId) => {
  const doc = new GoogleSpreadsheet(sheetId);

  const creds = {
    type: "service_  ....}

-이런식으로 라이브러리를 사용하는데 

-초반에 뭐가 문제인지 코드 상의 문제가 없었는데 자료가 불러와지지 않았다.

- 해결: 해당 라이브러리를 다운 그레이하고

 

 // package.json
 "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",

- 이부분도 이렇게 고쳐 "개발자 모드" 를 활성화 시켜줘야 한다. 

- 깨달은점: 협업을 할 때 아까도 버전에 따라 사용 가능의 유무도 달라졌다.

분명 내가 낮은 버전의 react-router를 사용했을 때는 useNavigation을 사용할 수 있었지만,

협업 상 병합을 할 때, 높은 버전으로 바뀌니깐 저걸 못쓰고 useHistory를 사용하라고 오류가 떴다..

- 버전에 따라 이렇게 달라질 수 있다는 점 인지해야겠다.

 

---

 

개요

 

 

- Layout은 시멘틱하게 구성해주었다. (Header, Footer, Home...)

- Router로 페이지 간 이동이 가능하게 해주었다.

- 팀원 분이 Redux Toolkit을 사용하여 회원 관리를 해주었다. (+firebase authentication) 여러 페이지에서 회원임을 증명하고 회원 정보를 가져와야 하므로 redux를 사용하였다.

- Youtube API로 동영상을 첨부할 수 있게 해주었다.

- UI는 styled-components 및 MUI 라이브러리를 사용해주었다.

 

 

 

---

H3 중제목

본문내용넣기

 

 

 

---

메인 화면

- 메인 화면이고 내 정보나 다른 페이지로 갈 수 있는 navigation 영역을 추가할 생각이다.

 

 

---

스프레드 시트

- q(질문) , a(답) , type(4개 기숙사 지칭하는 숫자), class, about ... 등 여러 정보가 담겨 있다.

배열로 표현할 수가 없어서  (ex) row[0]=  {"q":"질문 입니다.", "a": ["질문1", "질문2" ...] }   

즉, q인 하나의 질문에 대한 a 선택지가 여러 개라서 스프레드 시트에선 표현할 방도가 없었다.

- 해결: 일단 질문과 질문 사이를 ' , '  쉼표로 구분지어서 

return str.split(/\s*,\s*/);

코드 내에서는 가져온 row[0].a 를 str에 보내줘서 정규 표현식으로 배열 형태로 나눠주었다.

다른 DB도 마찬가지로 진행하였다.

---

 

퀴즈 화면

// Quiz.jsx

- 스프레드에 문제를 추가하면 남은 숫자도 바뀌고 문제도 새로이 추가된다.

- 저 숫자는 해당 기숙사 숫자인데 (지울 예정...)

 

 

---

정체 구간이었던 부분

- spread sheet에서 데이터를 가져올 때 비동기 통신을 이용한 정보들이라 그런가

데이터를 가져왔을 때가 있고 같은 조건일 때, 어쩔때는 안가져와졌다.. 이해는 가지가 않았지만 뭔가 싶었다.

- 비동기적 표현의 깊은 이해가 필요하다. ayns/await, promise, try catch?. ..

 

---

 

마무리

- 전체 문제 중 몇 문제를 풀 것 인가를 사용자 입력 받고 중복 없는 랜덤 문제들로

퀴즈를 진행하게 기능을 추가할 예정이다.