[TIL] 2021/12/22 Wed -

 

 

 

 

 

 

Today I Learned

 

 

 quiz 로직 작성 

 

원래 스와이퍼 라이브러리를 사용해서 각 문제가 슬라이드로 넘어가도록 구현하려고 했다.

 

1) 기본으로 있는 화살표 아이콘의 prev 버튼과 next 버튼을 없애고 별도의 버튼을 만들어 동작하게 하고,

2) quizIndex라는 state를 만들어서 퀴즈 문제가 마지막일 때는 삼항연산자로 조건부 렌더링을 걸어 next 버튼의 텍스트가 다음 문제가 아닌 결과 보기로 렌더링 되도록 하려고 했으나,

 

onClick의 문제인지 코드를 모두 작성하고 나니 nextEl 버튼이 제대로 동작하지 않았다.

 

두 가지 문제가 있었는데,

첫 번째는, nextEl 버튼을 클릭하면 다음 문제로 넘어가는 게 아니라 prevEl 버튼을 클릭한 것처럼 이전 문제로 돌아갈 때가 있었고,

두 번째는, 답을 클릭하는 영역에서 각 문제마다 랜덤으로 어떤 답 버튼을 클릭하면 nextEl 버튼을 클릭한 것처럼 다음 문제로 넘어갔다.

 

애초에 스와이퍼 라이브러리를 사용한 페이지와 퀴즈 문제를 렌더링해주는 컴포넌트가 별도로 있어서,

퀴즈 문제 영역에는 스와이퍼 라이브러리가 임포트 되어 있지도 않았다...흑흑

 

결국 하루 동안 문제의 원인을 찾을 수 없어 우선 스와이퍼 라이브러리를 사용하지 않는 방향으로 수정하였다.

 

 

퀴즈 결과는 유저가 답을 선택하면 리덕스에 있는 배열에 들어가도록 하는 액션을 dispatch하고

결과 페이지에서 유저가 선택한 답의 리스트를 불러온 후 퀴즈 리스트에 있는 각 문제의 정답과 일치하는 지 확인하는 로직으로 작성하였다.

 

 

 quiz 모듈 작성 및 api 통신 확인 

 

원래는 Mock 데이터를 만들어서 퀴즈 문제가 잘 렌더링 되는지 확인하고 있었는데,

백엔드 분들이 빠르게 api를 만들어주셔서 DB에서 문제를 불러오는 게 잘 되는지 확인해 볼 수 있었다.

 

다행히 한 번에 연결이 돼서 백엔드 분들이 만들어준 퀴즈 리스트로 확인하고 있다.

 

 

 api 파일 정리 

 

원래 처음에 api 작성할 때는 메소드와 경로 정도만 정리했었는데,

오늘 본격적으로 request로 보낼 데이터와 response로 받을 데이터를 백엔드 분들과 함께 정리하였다.

 

함께 확인하다 보니 누락되어 있는 api들도 있어서 일부 추가가 되기도 했는데

다 정리하고 보니 실전 프로젝트답게 api들이 굉장히 많이 나왔다.

 

백엔드 분들이 짱짱해서 이제 우리의 몫만 남은 것 같다...😵‍💫

 

---

 

디자이너 분들과 협업을 하는 건 처음이라 

디자인이 나오기 전까지 무엇을 해야 잘했다고 소문이 날 지...아직 잘 모르겠다.

 

우선 정말 서버 통신만 확인해 볼 수 있을 정도의 기초적인 뷰 작업과 CRUD 정도만 하고 있는데, 

미니나 클론 주차보다 시간적 여유가 있어서 아직 파이널 프로젝트를 하고 있다는 기분이 안 든다.

 

왠지 다음 주가 되면 비교도 안 되게 정신이 없을 것 같아서 지금의 여유를 즐기기로 했다!