왜 문해력 테스트?
2차 프로젝트에서 우리는 문해력 향상 트레이닝 글쓰기 서비스를 만들기로 했다.
개발자는 항상 글을 통해 자신의 생각을 정리하고, 남들에게 공유하는 습관을 가져야한다. 사실 개발자의 습관이 아니라 많은 사람들이 가져야하는 습관인 것 같다.
개발을 공부하기 전, 글을 쓸줄 몰라 과제나 레포트, 보고서를 쓸 때 키보드에 손을 얹고만 있었던 적이 많았다.
아마 많은 학생들이 그런 경험이 많을 것이다. 우리 나라는 글을 쓰는 연습을 초등학교 이후로 시키지 않기 때문이다. 이제는 초등학생들도 일기를 안 쓰니, 나만의 생각을 글로 써보는 연습을 많이 안 할 것 같다.
그런 취지에서 우리는 프로젝트를 통해 글쓰기 서비스를 만들 것이다.
구성
처음 회원가입을 하면 간단하면서 어려운 문해력 테스트를 보게 서비스를 구성했다. 그렇다면 적절한 테스트 서비스가 있어야한다.
나의 이번 주 목표는 test를 볼 수 있는 페이지를 제작하는 것이다.
따라 만들고 싶은 예시 테스트들이 많이 있었다. 그 중에 내가 목표로 잡은 것은 문제는 하나씩 나오며, 한 번 푼 문제는 다시 풀기가 제한되는 상황의 코드를 짜고 싶었다.
일단 가장 중요하게 생각한 것은 좋은 리액트 구조를 가진 상태에서 코드를 짜고 싶었다.
좋은 리액트 구조?
구선생님의 도움을 받아 일반적인 리액트 패턴에 대해 공부했다. container와 present구조를 적용했다.
container는 해당 컴포넌트의 로직을 담당하고, present는 사용자의 ui와 관련한 코드 구조로 최대한 Present 컴포넌트들은 의존성을 떨어트리게 하는 방식이다.
상태관리
하지만 가장 문제가 됐던 것은 테스트 문제를 한 문제씩 뿌려주는 것과, 정답을 저장해서 마지막에 서버에 post요청을 보내는 로직을 구성하는데 문제가 많았다.
어떤 방식으로 test와 answer을 관리해야하는지 너무 힘들었다.
일단 context와 reducer를 사용해서 문제들을 get해서 저장하고, 답안을 고르면 전역상태변수 answer에 저장하는 형식을 구성했다.
나조차 깔끔하게 정리를 못하니 questionId 값을 잃고, 내가 고른 답안을 잘 저장하지 못하고, 문제를 하나씩 뿌려주지 못하고 있는 모습을 발견했다.
테스트 시작을 두 번 눌러야 테스트지가 나오고, questionId와 answerId가 올바르게 저장이 안되고, 아주 난장판이 되었다.
어떻게?
일단 test를 context로 전역으로 관리하지 말자고 생각했다. 팀원들의 피드백이 컸다. react-query를 적용해서 test를 캐싱해서 사용하면 어떤가 하는 조언을 들어 적용을 해보기로 했다.
역시 새로운 개념을 공부하는 것은 어렵다.
하지만 일단 context를 이용해서 한 문제씩 나오는 것을 구현해보자. 일단 구현이 먼저다..@
