배포링크 : https://cat-photo-smoky.vercel.app/
- 과제 기한
- 과제 수행 기간 : 2023년 10월 31일(화) ~ 2023년 11월 3일(금)
- 멘티 코드 리뷰 기간 : 2023년 11월 4일(토) ~ 2023년 11월 7일(화)
- 멘토 코드 리뷰 기간 : 2023년 11월 4일(토) ~ 2023년 11월 8일(수)
- 코드 리뷰 반영 기간 : 2023년 11월 9일(목) ~ 2023년 11월 10일(금)
- 내용 : [DAY 31]의 실습 내용을 토대로 아래 내용을 보완해 주세요!
- [o] 지금 구현된 코드에서는 state에 대한 정합성 체크를 전혀 하지 않는데, 이 부분을 보충해 주세요.
- [o] 컴포넌트별로 올바르지 않은 state를 넣으면 오류가 발생하도록 해주세요.
- [o] 각 컴포넌트의 setState를 최적화하여 이전 상태와 비교해서 변경사항이 있을 때만 render 함수를 호출하도록 최적화를 해봅니다.
- [o] 루트 탐색 중이 아닌 경우, 백스페이스 키를 눌렀을 때 이전 경로로 이동하도록 만들어봅니다.
- [o] 지금 구현된 코드에서는 state에 대한 정합성 체크를 전혀 하지 않는데, 이 부분을 보충해 주세요.
- Component 추상화 (프로토타입 상속)
- 데이터 흐름 단방향 (App -> 하위 컴포넌트)
- 컴포넌트 의존도 낮춤 (로직 외부 주입)
- 데이터 로컬스토리지에 캐싱
[o] 백스페이스로 변경 + root에서는 막아놓기 [o] 이벤드 등록 함수 네이밍 변경 -> setGlobalKeyEvent + init으로 모아놓기 [o] 이벤트 유틸함수 파라미터 네이밍 변경 => onKeyupEscape, onKeyupBack
[o] 캐싱 리턴값 타입 통일 [o] 캐싱도 추상화에 포함
[o] ImageViewer.js 에서 contains 메서드로 변경 [o] selectedImageUrl에 저장할 값 간소화 [o] 이미지url 가져오는 유틸함수 구현
[o] deep copy 방지 -> 성급한 최적화 => 각 state에서 deep copy [o] state mapped형태로 변경