프로그래머스 고양이 사진첩 - 분석(상세)

2021 Dev-Matching: 웹 프론트엔드 개발자(상반기)

---

요구사항 확인

🥕 화면 구성

• root 경로 탐색 중인 경우
• root - 노란고양이(디렉토리)를 탐색 중인 경우
• 물 마시는 사진(파일)을 클릭 한 경우

🥕 구현

필수사항

• app class를 가진 main에 Application rendering
• index.html의 Markup structure를 참고하여 크게 세 영역으로 나누어 렌더링
  • Breadcrumb : 현재 탐색중인 경로를 나타냄
    • root는 맨 왼쪽에 있으며, 탐색하는 폴더 순서대로 나열
    • root - 노란고양이 처럼 root를 시작으로 거쳐간 디렉토리 이름을 순서대로 나열
  • Nodes : 현재 탐색 중인 경로에 속한 파일/디렉토리 렌더링
    • root가 아닌 경우 Node 목록 맨 왼쪽에 이전 디렉토리로 이동할 수 있는 기능
    • Node를 클릭 시 node의 type에 따라 이벤트 발생
      • type == DIRECTORY : 속한 파일/디렉토리 불러와 렌더링
      • type == FILE : Node의 filePath값을 통해 이미지를 불러와 렌더링
  • ImageView : 파일이 클릭 된 경우 Modal을 통해 파일의 이미지 렌더링

유의사항

• 주어진 샘플 코드 내 구현, 별도 lib 설치 및 호출 사용행위 금지
• 화면의 UI요소는 컴포넌트 형태로 추상화 하여 동작하기
  • 의존성 X, 컴포넌트가 조율하는 형태로 동작하게 만들기
• ES6 모듈 형태로 작성 시 가산점
• API 호출
  • 의존성이 느슨한 구조, 오류가 발생한 경우 체크, 오류를 사용자에게 인지 시 가산점
  • fetch 함수 사용하기 (이외 방법에서 동기호출 사용 불가능)
  • async - await 사용 시 가산점
  • 처리코드 별도 분리
• style을 참고하여 구조 및 class명 사용
• 알아보기 쉬운 네이밍, 일관된 코드 포맷팅 유지
• 코드 중복, 전역 오염 최소화
• 이벤트 바인딩 최적화

옵션(추가사항)

• Breadcrumb에 특정 아이템을 선택 시 해당 경로로 이동
  • 현재 경로와 같은 경우 아무일도 일어나지 않음
  • 클릭 된 경로 기준으로 파일/디렉토리 목록 렌더링
• 파일을 클릭하여 이미지를 보는 경우 닫음 처리
  • ecs 눌렀을 때 및 이미지 밖을 클릭했을 때 처리
• 데이터 로딩중인 경우 UI처리 필요
  • 로딩 중 디렉토리 이동 및 파일클릭 액션 막기
• 한번 로딩 된 데이터는 메모리에 캐시, 탐색한 경우 캐시 데이터를 불러와 렌더링

🥕 API

• root 가져오기

  • GET : https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev

    [
      {
            "id": "1",
            "name": "노란고양이",
            "type": "DIRECTORY",
            "filePath": null,
            "parent": null
        },
    ]

• file, directory 가져오기

  • GET : https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev/:nodeId

    [
        {
            "id": "5",
            "name": "2021/04",
            "type": "DIRECTORY",
            "filePath": null,
            "parent": {
                "id": "1"
            }
        },
        {
            "id": "19",
            "name": "물 마시는 사진",
            "type": "FILE",
            "filePath": "/images/a2i.jpg",
            "parent": {
                "id": "1"
            }
        }
    ]

• 소개

  {
    "id":       string // 문자열로 된 Node의 고유값입니다.
    "name":     string // 디렉토리 혹은 파일의 이름입니다. 화면에 표시할 때 사용합니다.
    "type":     string // 파일인지 디렉토리인지 여부입니다. 파일인 경우 FILE, 디렉토리인 경우 DIRECTORY 입니다.
    "filePath": string // 파일인 경우에 존재하는 값입니다. 해당 파일 이미지를 불러오기 위한 경로가 들어있습니다.
    "parent":   object | null {
      "id": string // 해당 Node가 어디에 속하는지 나타내는 값입니다. parent가 null이면 root에 존재하는 파일 / 디렉토리입니다.
    }
  }

• image

  https://fe-dev-matching-2021-03-serverlessdeploymentbuck-t3kpj3way537.s3.ap-northeast-2.amazonaws.com/public/${node.filePath}

---

요구사항 정리 및 분석

컴포넌트

• main ← App ← Breadcrumb
  ← Nodes
  ← ImageView
  ← Loading

• App : 최상단 컴포넌트
  • 각 컴포넌트 상태관리 및 렌더링.
  • root 경로 디렉토리 초기화.
  • [옵션] 캐시 활용
• Breadcrumb : 탐색중인 경로 순서대로 표현
  • onClick : 클릭 시 해당 디렉토리 경로로 이동
    • 같은 위치인 경우 이동하지 않음
    • [옵션] 이벤트 최적화
• Nodes : Node에 속한 FILE/DIRECTORY 렌더링
  • Node Type에 따라 이미지에 맞게 렌더링
  • onClick :
    • DIRECTORY : 해당 디렉토리 경로로 이동
    • FILE : Modal에 이미지 렌더링
    • [옵션] 이벤트 최적화
  • onBackClick : 클릭 시 이전 디렉토리 경로로 이동
    • [옵션] 이벤트 최적화
• ImageView
  • onClick : 클릭 시 이미지 닫기
    • [옵션] 이벤트 최적화
• Loading
  • [옵션] 사용자 클릭 막기

API

• root 및 디렉토리 요청
  • https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev
  • https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev/:nodeId
• Image 요청
  • https://fe-dev-matching-2021-03-serverlessdeploymentbuck-t3kpj3way537.s3.ap-northeast-2.amazonaws.com/public/${node.filePath}