프로그래머스 과제에 대해

본 과제는 프로그래머스 2021년 Dev-Matching: 웹 프론트엔드 개발자 (상반기) 과제입니다. 과제 링크과제 공식해설 링크 ↑ 위 페이지에서 과제를 풀어보고 공식 해설로 공부하였습니다.

한번 풀어보기만 하는 것으로는 배우는 것이 적다고 생각하여 글로 정리하여 깊게 남겨보고자 합니다. github 코드

코드를 완성한 후 과정에 맞게 수정하는 것이라 오류가 있을 수 있습니다. 댓글로 오류를 알려주시거나 새로운 지식을 공유해주신다면 감사하겠습니다.

요구사항

(간략하게 작성하였으니 문제의 상세조건은 위 과제링크를 참고해주세요)

디렉토리 구조를 따라 탐색할 수 있는 사진첩 다이어리

• 디렉토리를 클릭한 경우 해당 디렉토리 하위에 속한 디렉토리 / 파일들을 불러와 렌더링
• 디렉토리 이동에 따라 위에 Breadcrumb 영역도 탐색한 디렉토리 순서에 맞게 업데이트
• root 경로가 아닌 경우 상위 폴더로 돌아갈 수 있는 아이콘
• 파일을 누른 경우 해당 파일의 filePath 값을 통해 이미지를 보여주기
  • 사진 영역 밖을 클릭하거나 esc를 누르면 이미지 닫기

구현시 유의 사항

• 각 화면의 UI 요소는 가급적 컴포넌트 형태로 추상화하여 동작해야함 각 컴포넌트가 서로 의존성을 지니지 않고, App 또는 그에 준하는 컴포넌트가 조율하는 형태로 동작하는 것을 말함
• ES6 모듈 형태로 작성시 가산점
• api 처리 코드 별도 분리
• 이벤트 바인딩 가급적 최적화