[개인 프로젝트] 2. 해리포터 MBTI 테스트

 

 

최근 업데이트 : 2021.10.04

---

[ 프로젝트 현재 상태 ] 

 

 

---

[ 프로젝트 TODO ]

1. 기능 구현 과제) 버튼을 누른 상태로 페이지 넘어가지 않기
2. 기능 구현 과제) 뒤로가기 버튼, 앞으로가기 버튼 만들기
3. 기능 구현 과제) 검사가 끝나면 바로 검사 결과 페이지로 넘어가지 않고 로딩 페이지 잠깐 뜨기
4. 기능 구현 과제) 환상의 짝꿍, 환장의 짝꿍 추가하기
   
   
5. 리팩토링 과제) React.js 로 넘어가기
   
6. 리팩토링 과제) 디자인 바꾸기 
   // 진짜 너무 촌스럽다.
7. 리팩토링 과제) 전체적인 UI, CSS로 다시 잡기 

---

[ 프로젝트 실마리 ]

1. 페이지와 Routing

  재사용되는 컴포넌트들이 많았기에 Routing 을 사용했다. 사실상 페이지는 총 세 개다. 인트로 페이지, 퀴즈 페이지, 결과 페이지. state 로 페이지 수를 관리해서 버튼이 눌릴 때마다 page 를 1씩 추가했다. page 가 0 일 때는 인트로 페이지, 1 ~ 질문이 끝날 때까지의 페이지 는 퀴즈 페이지. 질문 갯수 + 1 일 때는 결과 페이지로 작성했다.

 

2. State 관리

  가장 중요한 건 State 였다. page 도 state 로 관리해야 하고, 사용자로부터 입력받는 내용도 state 로 관리해야 했다. 동일한 컴포넌트를 재사용하는 것이다 보니 props 로 넘겨주는 내용에 따라서 질문의 내용과 대답의 내용이 달라지도록 설정했다. 그 props 는 페이지의 수에 따라 database 에서 가져오는 내용이 달라지도록 설정했다.