Day27

Day27

고양이 사진첩 만들기

구현 요구사항

---

• 고양이 사진 API를 통해 사진과 폴더를 렌더링한다.
• 폴더를 클릭하면 내부 폴더의 사진과 폴더를 보여준다.
  • 현재 경로가 어디인지도 렌더링한다.
• 루트 경로가 아닌 경우, 파일 목록 맨 앞에 뒤로가기를 넣는다.
• 사진을 누르면 고양이 사진을 모달창으로 보여준다.
  • esc를 누르거나 사진 밖을 클릭하면 모달을 닫는다.
• API를 불러오는 중인 경우 로딩 중임을 알리는 처리를 한다.

• API :

  https://mwu.roto-cat-api.programmers.co.kr/
  https://cdn.roto.codes/css/cat-photos.css
  https://cdn.roto.codes/images/file.png
  https://cdn.roto.codes/images/prev.png
  

(4)

• directory에 들어가면 사진 목록 렌더링해오는 기능
• 사진 누르면 이미지 overlay창으로 띄워주는 기능
• overlay된 창에서 esc키나 content밖을 클릭하면 overlay 없애주는 기능

(5)

• 뒤로 가기를 눌렀을 때 진짜 바로 뒤 페이지로 가는 기능
• 로딩 중일 때 고양이 gif가 뜨면서 로딩 중임을 알리는 기능

(6)

• 경로를 위에 표시해주는 기능
• breadcrumb을 클릭했을 때 해당 경로로 바로 가는 기능
• breadcrumb을 이용해서 경로를 이동했을 때 바뀐 경로로 breadcrumb을 업데이트 해주는 기능

정리

---

• 요구사항을 잘 보고 어떤 컴포넌트들을 만들고 조합할지 한번 정리하고 코드를 작성하는 것이 좋다.

과제

---

• 컴포넌트 별로 올바르지 않은 state를 넣으면 오류가 발생하도록 할 것!
• 각 컴포넌트의 setState를 최적화하여 이전 상태와 비교해서 변경사항이 있을 때만 render 함수를 호출하도록 최적화 할 것!
• 루트 탐색 중이 아닌 경우, 백스페이스 키를 눌렀을 때 이전 경로로 이동하도록 만들 것!