[항해99] W12: 12주차 WIL - 배포 후 UT

코드 리팩토링

Redux-thunk 에서 Recoil로 리팩토링

• 중간발표회에서 받은 피드백을 바탕으로 왜 전역상태로 관리해야 하는가, 왜 redux를 사용했는가 에 대한 고민을 바탕으로, 전체적인 서버스테이트를 지역 스테이트로 리팩토링 진행
• 전체 상태를 local state로 변경하고 나서, 좋아요와 무한스크롤 등의 기능에 영향을 받는 게시글 리스트 데이터들을 전역 상태로 변경하기로 결정하면서, 전역상태 라이브러리를 새롭게 찾아보게 되었다.
• React-query와 Recoil 을 찾아보았는데, 일반적으로 서버스테이트는 리액트 쿼리를 이용하는게 좋다는 의견들이 많기는 했지만, 기존에 판단없이 무조건 전역으로 상태를 빼면서 라이브러리에 의존적인 코딩을 해왔던 것 같아서, 보다 리액트스럽게 사용할 수 있는 Recoil의 Atom 단위만 사용해보는 것으로 고려했다.
• 1차로 지역으로 모두 리팩토링이 된 상태였기 때문에 개별 컴포넌트에서 직접 Axios를 호출하고, useState()로 상태를 담아둔 상태에서 useState 대신 atom 을 임포트 하여 useRecoilState() 로 변경해주는 방식으로 Recoil을 도입했다.
• 프로젝트의 스콥이 커지거나, 현재의 지식 상태를 바탕으로 처음부터 다시 구조를 잡는다면, react-query를 사용해서 서버 스테이트를 관리하는 편이 효율적일 수도 있지만, 전역 스테이트를 모두 지역 스테이트로 분리해놓고 다시 라이브러리를 도입하는 상황이었기 때문에 Recoil을 도입하게 되었다.
• 구조를 다시 잡는다면, 리액트쿼리로 서버스테이트를 관리하고, 리코일의 아톰으로 클라이언트스테이트를 관리하는 방식으로 다시 재구성해보고 싶다.

Rechart > Chart.js

• 기존 리차트를 활용하여 데이터 시각화를 구현했었는데, 기본적인 사용 시에는 어렵지 않았었지만, 커스텀 디자인은 커녕, 원하는 크기로 노출하는데부터 어려움이 있어 차트라이브러리를 변경하고자 했다.
• 다음 라이브러리로 React-vis 를 찾아보았지만, 기존 리차트에서 작성해놓은 데이터 구조와 많이 달라져야해서 Chart. js로 도입하게 되었다.

컴포넌트 구조화

• 기존 빠른 작업을 위해 구조화되지 않은 상태로 덧붙이기식으로 추가되었던 컴포넌트나, 재사용을 하는게 아니라 직접 코드를 복사 붙여넣기해서 사용한 반복 코드를 간결하게 구조화하는 작업을 일부 진행했다.
• SelectGu.jsx, SelectInfo.jsx 2개의 컴포넌트로 따로 이용하고, 반복되는 버튼 UI를 복사 붙여넣기해서 나열한 형태의 지저분한 컴포넌트를 정리하기 위해 [구, 정보용링크, 커뮤니티용링크] 형태로 배열 데이터를 선언하고, map을 돌려 코드 재사용성을 높였다.
• 게시글 작성 / 수정 form 컨테이너 안에서 모든 인풋데이터를 관리하는 구조에서 컨테이너와 개별 인풋들의 컴포넌트를 쪼개어 스테이트 관리가 용이한 구조로 변경하였다.

UserTest 기반 QA 반영

• 이미지 등록/수정 시 개별 이미지 삭제 기능
• 태그 검색 구현 및 검색 탭 (태그/일반/작성자 검색)
• 이미지 추가 후 내용 입력 시 reverse() 타이밍 개선
• window.reload(), replace() -> useNavigate()
• 차트 디자인 반영
• 인풋창 데이터 없이 전송 시 예외처리
• 게시글 작성/수정 : 카테고리 선택, 게시글 내용 미입력 등 필수값 미입력 시 알럿 추가
• 내 게시글의 댓글 알림 탭 플로우 수정