20231109 퇴근 전 TIL

이전에 온보딩 과제삼아 구현했던 어드민의 공지사항 관리 페이지에서 미처 생각하지 못했던 케이스가 발견되었다. 

등록되어있는 공지사항을 여러 검색 필터 (제목, 내용 / 언어 / 검색어 등) 로 검색을 할 수 있는데,

 

NoticeFilter

NoticeTable

 

이 두 가지 컴포넌트로 나뉘어 있다. 

그 중, NoticeFilter에서 선택한 검색 필터의 값을 Recoil을 이용해 전역상태로 관리하고,

검색 버튼 클릭 시 이를 서치 쿼리에 전달해 검색 네트워크 요청이 이루어지는 방식이다.

 

그런데, 전역상태로 검색 필터 값들 중 몇몇을 저장하다보니, 유저의 사용감을 해칠 수 있는 케이스가 발견되었다.

 

유저가 검색 필터를 이용해 검색을 하고 난 후, 다른 페이지를 돌아다니다가 다시 공지사항 조회 페이지로 접속한다.

그러면 전역 상태로 관리한 필터 값들과 검색 결과 (전역 상태를 NoticeTable에서 보여줌) 는 그대로 남아있는 반면, 전역으로 관리하지 않은 필터 값은 사라진다.

 

즉, 

 

1. 내가 미처 테스트하지 못하고 놓친 케이스가 존재 (다른 페이지를 돌아다니다 와도 전역 상태가 유지됨)

2. NoticeFilter, NoticeTable내 정보가 일치하지 않음

 

이렇게 두 가지 문제가 발생한것이다. 

 

사수 분께서 해결 방법에 대해 조언을 주셨다.

 

1. 페이지 이동 시 전역상태를 리셋해주는 코드를 추가, 페이지 이동 후 재접속 시 필터 해제되도록 변경하기

2. 사수님이 구현한 방법과 동일하게, NoticeFilter에서 검색 시 해당 값들을 캐싱해주어 Table에도 일치시키기

3. 전역상태로 관리하지 말고 상위 공통 컴포넌트에서 local state로 관리하여 알아서 초기화하도록 변경하기

 

코드의 일관성 측면에서는 2번으로 수정하는 것이 나을 것 같은데, 그러면 변경하는데 꽤나 공수가 들 것 같다. 

좀 더 고민해보고 결정해야겠다!

 

이를 통해 배운 점도 같이 정리해본다.

• 코드의 동작과 작성자의 의도가 내가 생각한 것보다 더 복잡할 수 있음. 서비스에서는 단순히 메인 동작이 돌아갈 뿐 아니라 유저의 다양한 경로와 행위를 예측하여 해당 경우를 핸들링해주어야 함. 그 기획과 조건에 따라 적절히 방어코드를 작성하는 것이 필요함.
• 내가 작성한 체크리스트는 MVP일 뿐, 더 세부적인 에러와 버그는 누락되어 있음. 피드백을 통해 더 꼼꼼히 핸들링해야 할 부분들이 항상 존재하므로, 시간 여유를 두고 피드백을 구해야 한다.
• 이러한 꼼꼼함이 프로덕트의 전반적 완성도와 직결되는 것. 성능 최적화나 퍼포먼스 이전에 이러한 기본적인 핸들링부터 꼼꼼히 하는 것을 목표로 삼고 조급해하지 말자! → 훈련과 반복을 통해 충분히 꼼꼼함을 기를 수 있다.
• 알고리즘 문제를 풀며 알고리즘에 대한 학습은 물론, 이러한 엣지케이스 처리까지 훈련하는 것을 목표로 삼자.

체크리스트를 매번 작성하여 동작 테스트를 했으나, 놓친 부분이 있어 꽤나 아쉽다. 

교훈삼아 다음번에는 더 꼼꼼히 케이스 처리를 할 수 있는 개발자가 되기를!!!