회고
사이드 프로젝트를 행동으로 옮긴지 3일이 지났다. 많이 어려울 줄 알았는데 생각보다 리액트 실력이 늘어가는게 눈에 보여서 흐뭇하다. 그래도 아직 100% 구현이 안된 기능들이 있어 나중에 얼추 완성되 갈때 쯤 리팩토링을 진행하려 한다. 폴더 구조도 좀 정리할 필요가 있을 것 같다!
진행 사항 정리
1. 공통 컴포넌트 분리
- 페이지들을 하나씩 만들어가다 보니 생각보다 공통 컴포넌트들이 너무 많이 존재하게 되었다.
- 이 컴포넌트들을 일일히 다시 만들 자신이 없어 분리하는 작업을 거치게 되었다.
- 오른쪽을 보면 알겠지만 거의 모든 컴포넌트를 Commons.ts에 분리해놓고 Routes 폴더에 있는 파일에서 import 하는 구조로 변경했다.
- 추후에 여러 파일에서 사용하는 공통 컴포넌트, 도메인 별로 사용하는 컴포넌트는 따로 폴더를 생성하여 관리하는 식으로 리팩토링 할 예정이다.
2. Check Page
- 일 단위로 문제를 푼 것에 대한 결과를 이 페이지에서 확인 할 수 있다.
- 문제 만들기 버튼을 누르면 CreateQuestion 페이지로 이동한다.
- 그래프는 apex chart의 리액트 라이브러리를 활용했다.
- donut 형태의 차트로 맞은 것과 틀린 것의 비율을 확인 할 수 있다.
- Total은 총 문제의 개수이다.
- Weekly Check Section은 월~일 까지 점검을 완료했다면 원을 눌러 체킹 할 수 있는 기능을 제공한다.
- 본인이 체크를 완료했다면 버튼을 눌렀을 때 버튼의 상태가 변경되어 체크 된 버튼이 업데이트 된다.
- 잘못 눌렀을 때를 대비해 다시 누르면 원래의 화면으로 되돌아 온다.
2-1 보완할 점
- weekly check section에서 월~일 까지 모두 눌렀을 때 다시 초기의 weekly check 컴포넌트로 되돌아오게 하고 싶은데 아직까지 명확한 로직이 떠오르지 않아 일단 보류 중인 상태이다.
- 차트에 보이는 것이 비율이 아닌 맞은 문제의 갯수, 틀린 문제의 갯수를 표기하고 싶은데 여전히 비율로 표기되고 있다. 이것도 차차 수정할 계획이다.
- 차트의 크기, 색상 등 디자인도 수정할 계획을 가지고 있다.
3. Create Question Page
- create Question Section에는 우선, 문제를 입력하기 위한 Input, 답을 입력하기 위한 text area, 문제 생성 button이 존재한다.
- 필요한 것들을 입력 후 문제 생성 버튼을 누르게 되면 문제-답이 생성된다.
- 실제로 문제들을 생성 후 카운팅 된 것을 확인 할 수 있다.
- 문제 수는 useState, 문제-답은 recoil을 활용하여 상태 관리를 하고 있다.
3-1 보안 할 점
- input과 textArea 모두 문제 생성 버튼을 누르면 화면에 적어놓은 것들이 초기화가 되어야 하는데, 실제 value는 초기화가 되었지만 화면상으론 초기화가 되지 않는 문제점이 존재한다.
- 적어놓은 것들을 지우면 문제 되진 않지만 리팩토링 할 계획이다.
4. Modify Question Page
- Modify Question Page에서는 생성한 문제들을 확인 할 수 있다.
- 잘못 만든 문제들 같은 경우 삭제하기 버튼을 누르면 삭제 가능하다.
앞으로의 계획
- 상태 관리된 값들은 페이지 리로딩이 되면 가지고 있던 값들이 날라간다. 그래서 이 값들을 저장하기 위해 localStorage를 활용할지, firebase를 쓸지 고민을 해봐야할 것 같다.
- 문제 점검 페이지를 만든다.
- 페이지들을 기본적으로 다 생성하면 앞에서 언급한 아쉬운 점들을 리팩토링 할 생각이다.
FE