/CatPhotoAlbum

Vanilla JS로 구현한 사진첩 애플리케이션

Primary LanguageJavaScript

고양이 사진첩

  • Vanilla JS를 활용한 사진첩 애플리케이션 구현
  • 느낀점 : velog 기록

DEMO

👩‍💻 구현 내용

  • API 호출을 통해 사진들과 하위 폴더 렌더링
  • 하위 폴더 클릭 시 하위 폴더의 사진들과 폴더 렌더링
  • 현재 사용자가 위치한 경로를 알려주는 Breadcrumb 구현
  • Root 폴더가 아닌 경우 상위 폴더로 이동가능한 뒤로가기 기능 구현
  • 루트 탐색 중이 아닌 경우, 백스페이스 키를 눌렀을 때 이전 경로로 이동하도록 하는 기능 구현
  • 사진 클릭 시 모달을 통한 ImageViewer 구현
  • API의 호출 작업이 진행 중인 경우의 UI 개선을 위해 Loading Modal을 구현
  • 컴포넌트별로 각각의 state에 대한 정합성 체크 구현
  • 각 컴포넌트의 setState를 최적화하여 상태의 변경사항이 있을 경우에만 렌더링 구현

참고사항

  • repo를 옮겨가며 개발을 진행하여 1차 구현의 상세 커밋이 생략 되었습니다.
  • 이를 통해 repo를 옮겨 복사하여 개발을 진행할 때의 버전관리 하는 방법을 추가로 공부하게 되었습니다.