고양이 사진첩 만들기 + 실습
- 고양이 사진 API 를 통해 사진과 폴더 렌더링
- 폴더 클릭 시, 내부 폴더의 사진과 폴더를 보여줌 (현재 경로가 어디인지도 렌더링)
- 루트 경로가 아닌 경우, 파일 목록 맨 앞에 뒤로가기를 넣음
- 사진 클릭 시, 고양이 사진을 모달창으로 보여줌 (esc, 사진 밖 클릭으로 닫음)
- API 를 불러오는 중인 경우에는 로딩을 알리는 처리
회고
API 를 불러와 사진첩을 만드는 실습을 진행하였다.
이동한 폴더의 path 를 모두 저장해두고, breadscrumb 을 처음 다뤄봤는데, 이 부분이 제대로 동작하지는 않지만, 이곳저곳을 방문하지 않은 간단한 경우에는 동작하게끔은 진행해보았다.
index 를 불러오는 과정에서 뭔가 잘못 된 것 같다. 수정해봐야겠다.
async await 를 통해 API 를 불러오는 동안의 로딩 처리도 재밌는 요소였던 것 같다.
async await 을 어디에 적절하게 사용해야 할지 아직은 익숙하지 못한 것 같다.
이제까지 만들었던 실습 코드들을 보면서 어떨 때 확실하게 사용해야 할지 잘 봐둬야겠다.
프론트엔드