설계(Design): 코드가 잘 설계되었고 시스템에 적합한가?
App.js > useTransition 함수 마지막 인자(animated) 전역 상수로 관리 필요App.js > Routes 관련 기능 Routes.js 로 기능 따로 분리하기App.js > Route의 path 전역 상수로 관리 필요api.js > base URL 전역 상수로 관리 필요pages/Filters/index.js > Select map 앞에 Array 전역 상수로 관리 필요Books/Book.js > 마크업이 모두 div 와 p로 되어 있는데 좀 더 시맨틱하게 작성 필요Books/Book.js > defaultClassName는 props로 받지 말고, 컴포넌트 내부에서 처리 필요Books/Book.js > volumeInfo로 모든 정보를 가져와야 하는지, 필요한 props만 받아오는게 좋은지 확인 필요Books/Book.js > 컴포넌트에 React.memo 적용기능(Functionality): 코드가 작성자의 의도대로 동작하는가? 사용자에게 적합하게 동작하는가?
[ ] SearchForm/index.js > input onChange 이벤트에 lodash debounce 적용 필요
[ ] volumeInfo > imageLinks, description ... 처럼 값이 없는 경우에 대한 처리 필요
(필요한 값만 넣어주고 props에 default값 넣기)
[ ] 이미지 Lazy Loading / 캐싱 작업 필요
[에러]
Books/Pagination.js > 더 이상 불러올 데이터가 없을 때 TypeError: Cannot read property 'id' of undefined 에러 발생. 에러에 대한 처리가 필요pages/Filters/index.js > 필터링 선택에 따른 onChange 이벤트가 반영되고 있지 않음(→ 값은 잘 바뀌는데 구글 Book API 가 이상한 듯?)store/books.js >getItemsSuccess 함수에서 nextItems가 없을 때 length 사용 시 에러 발생index.js > ErrorBoundary 적용 필요[미사용]
hooks/useForm.js > handleSelect은 사용되지 않은 함수인데 기능 필요 여부hooks/useSync.js > 사용하지 않는 파일 / 용도 확인 후 수정 필요Loading/index.js > 사용하지 않은 파일 / 용도 확인 후 수정 필요복잡성(Complexity) : 나중에 코드를 다른 개발자가 보았을 때 쉽게 이해하고 사용 가능한가?
[ ] svg를 js 파일로 만들지 않고 assets 폴더에 관리 필요
import { ReactComponent as IconFilter } from 'assets/IconFilter.svg';
[ ] api.js > ...rest 문법을 사용해서 그 안에 변수가 무엇이 있는지 파악하기 어렵습니다.
테스트(Tests) : 잘 설계된 자동 테스트가 있는가?
작명(Naming): 개발자가 변수, 클래스, 메소드 등에 명확한 이름을 선택했는가?
hooks/useForm.js > handleSelect 함수명이 명확하게 내용을 포함하고 있지 않은 느낌스타일(Style): 스타일 가이드(코딩 컨벤션)를 따르고 있는가?
Books/Book.js > 엘리먼트에 css 넣어준거 따로 변수로 관리해서 깔끔하게 마크업하기Books/Book.js > cursor:pointer 넣어주세요문서화(Documentation): 개발자가 관련 문서도 업데이트 했는가?
[ ] <Switch location={location}> Switch에 location object 쓴 이유?
[ ] 왜 리덕스를 쓰면서 useReducer을 함께 썼는지?