[Assignment 4 회고록] 원티드 - 코드리뷰와 확장성/재사용 가능한 코드

📁 Books/Pagination.js
(문제점) 더 이상 불러올 데이터가 없을 때, TypeError: Cannot read property 'id' of undefined 라는 에러가 발생한다.

(✔ 해결방안) 전체 데이터 목록의 개수(totalItems)와 새롭게 불러올 데이터의 인덱스 넘버 (startIndex)가 동일하다면, API 호출이 더 이상 되지 않게 한다.
📁 pages/Filters/index.js
(문제점) 필터링 조건 선택에 따른 관련순, 최신순 onChange 이벤트가 반영되지 않는다.

(✔ 해결방안) 구글 Books API에서 제공되는 데이터의 값이 반영되지 않는 상황이기 때문에 publisedDate로 새로 정렬하거나 다른 API 사용을 고려해야 한다.
📁 store/books.js
(문제점) 구글 Books API 호출 시 필터링 조건에 만족하는 데이터가 없는 경우, 반환된 데이터에 items가 없어서 getItemsSuccess 함수 내에 nextItems.length 부분에서 에러가 발생한다.

(✔ 해결방안) nextItems가 존재하는 경우에만 startIndex를 불러올 수 있게 옵셔널 체이닝을 사용하여 처리한다.
📁 index.js
(문제점) 페이지 내에서 에러 발생 시 화면에 에러 페이지가 그대로 노출된다.

(✔ 해결방안) ErrorBoundary 관련 파일을 생성하여 componentDidCatch 시 분기 처리를 해준다.

3. 코드를 작성한 사람의 마음을 생각해보며, 미사용된 함수/파일 용도가 무엇인지 확인해보기

📁 hooks/useForm.js
(문제점) handleSelect 함수가 만들어져 있으나 전혀 사용되고 있지 않다.
또 handleSelect 함수의 이름만 봐서는 무슨 역할을 하는 함수인지 알기가 힘들다.

(✔ 해결방안) 책 검색 결과의 필터링 조건 클릭 시 바로 검색 조건을 반영 후 페이지 이동을 하기 위해 만든 함수라면, 현재 "확인"버튼을 눌렀을 때의 handleChange 함수와 동일한 결과를 보여주는 함수이기 때문에 중복이다. 또한 지금처럼 여러 조건을 선택하고 "확인"버튼을 눌러 이벤트를 발생시키는 것이 UX 측면에서도 훨씬 좋기 때문에 handleSelect는 불필요한 함수라고 판단된다.
handleSelect는 handleFilterAndMoveToPath와 같이 보다 더 명확한 함수 네이밍이 필요하다.
📁 hooks/useSync.js
(문제점) useSync 함수가 만들어져 있으나 전혀 사용되지 않고 있다. 함수의 이름이나 로직을 봤을 때 어떤 역할을 하는지 한눈에 파악하기 힘들다.

(✔ 해결방안) useLocation을 관리하기 위해 만든 함수라면 리덕스 설계와 함께 내부 로직을 추가 구현하고 함수명도 보다 더 명확하게 변경한다.
📁 Loading/index.js
(문제점) <marquee> 태그를 사용하여 로딩 컴포넌트를 생성했으나 전혀 사용되지 않고 있다.

(✔ 해결방안) 사용되지 않는 불필요한 컴포넌트는 삭제하거나 components/Pagination.js 에 활용한다.