진행사항 정리
1. local Storage(recoil-persist)
- 데이터 관리를 어떻게 해야할지 고민이었다.
- 일단 이 파트 자체를 깊게 고민할 생각이 없었기에 서버리스 기반인 파이어베이스 vs 그냥 localStorage에 저장할지 생각을 좀 해봤다.
- 어쩌피 내 데이터가 많이 들어갈 것도 아닌데다 이미 알고 있는 것이었던 localStorage에 저장하기로 맘 먹었다.
// storage.ts
import { atom } from "recoil";
import { recoilPersist } from "recoil-persist";
const {persistAtom} = recoilPersist({
key: 'questions',
storage : localStorage,
})
export const questionSet = atom<ISetInfo[]>({
key: "qustionSet",
default : [],
effects_UNSTABLE: [persistAtom],
})
- recoil 데이터들을 localStorage에 저장하기 위해 recoil-persist를 적용했다.
- 우선, recoil를 관리하는 파일에서 recoilPersist를 import 후 recoilPersist 객체 안에 key와 storage 프로퍼티에 필요한대로 작성했다.
- 그리고 필요한 데이터에 effects_UNSTABLE 프로퍼티에 [persistAtom]을 작성하면 다음과 같이 데이터가 localstorage에 저장된다.
2. self-check page
- self-check 페이지에는 recoil에서 관리되고 있는 data들을 가지고 다음과 같이 구성하였다.
- 문제, 작성자 답, 정답확인 버튼으로 구성했다.
2-1 빈 답 제출
- 만약 빈 답으로 정답을 확인하는 경우 alert를 통해 경고 알림을 전송하도록 구성하였다.
2-2 정답인 경우
- 만약 정답인 경우 정답 메시지와 함께 정답이 공개 된다.
- 정답 수가 카운팅 되는데 이 값은 recoil state로 저장하여 그래프에서 이 정답수를 시각화할 수 있게 구성하였다.
2-3 오답인 경우
- 오답인 경우 틀렸다는 메시지와 함께 정답이 공개된다.
- 마찬가지로 오답수가 카운팅 되어 나중에 그래프에 시각화 할 수 있게 활용된다.
2-4 구현 예정
- 아직 슬라이더가 구현되지 않아 내일 구현해볼 예정이다.
- 마지막 문제를 풀면 맞는갯수, 틀린 갯수를 확인하는 페이지로 이동하여 총 문제 개수, 맞는 갯수, 틀린 갯수를 확인 할 수 있는 페이지를 구성할 예정이다.
2-5 생각해 봐야할 점
- 고민할 당시 메모했던 것을 그대로 가지고왔다.
- 원랜 문제 번호, O,X 표시 등도 하려고 했는데 이럴 거면 차라리 정답 확인 페이지에서 O, X 표시를 하는 게 나을거 같았고 잘못된 설계라는 것을 깨달았다.
- 그래서 현재 방식으로 교체하게 되었다.
3. 빈 문제도 문제 생성되는 버그 수정
- input, textarea 아무거나 비어있는 상태로 문제 생성을 해도 문제 생성이 되었다.
- 그래서 둘 중 하나라도 비어있으면 다음과 같은 알림을 제공하도록 변경하였다.
회고
- 개발하기 전에는 몰랐던 것들이 하려고 보니 문제되는 것들이 몇 가지 생겼다.
- 그런 변경 점들을 혼자서 고민해서 변경사항을 만들어 내려고 하니 생각보다 머릿속에서 정리가 잘 되지 않았다.
- 그리고 확실히 사람은 작심삼일의 성향이 굉장히 강한것 같다. . . 첨엔 되게 의욕적이었는데 처음 시작할 때에 비해 의욕이 조금 꺽여버린 것 같다.. 초심을 잃으면 안되는데 자꾸만 초심을 놓치게 되는 것 같다. 더 열심히 해야지..!
FE