프로그래머스 - 고양이 사진첩 애플리케이션

고양이 사진첩 애플리케이션

프로그래머스 2021 Dev-Matching: 웹 프론트엔드 개발자(상반기) - 고양이 사진첩 애플리케이션 과제에 대한 리뷰입니다. 자세한 내용은 프로그래머스에서 확인해주세요.

문제링크

👉 https://programmers.co.kr/skill_check_assignments/100

화면 구성 파악

먼저 화면구성 설계를 위하여 구조를 살펴본다.

화면 구성을 통해 만들어야되는 구조를 파악하자면 트리 형태의 데이터임을 알 수 있다. root(최상단)에 존재하는 폴더나 이미지를 보여주고 특정한 폴더에 들어간다면 그 특정한 폴더에 포함된 폴더나 이미지를 보여주는 형태이다. 실제로 API는 두가지가 주어지는데 root에 속한 데이터를 가져오는 것, 특정 폴더에 있는 데이터를 가져오는 것 이 두가지이다.

이를 통해 화면구성은 root 폴더안의 데이터를 볼 수 있는 페이지, 특정한 폴더 폴더안의 데이터를 볼 수 있는 페이지, 이미지 파일을 클릭 시 이미지를 볼 수 있는 페이지가 된다.

*데이터는 폴더나 이미지를 의미합니다.

API 응답값 파악

먼저 주어진 API는 폴더와 이미지 데이터를 받아오는 것으로 화면을 랜더링하기전 받아야 한다. 그러므로 응답값을 살펴본다.

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

화면구성시 폴더나 이미지를 랜더링 해야한다. 여기서 그 구분값으로 type을 사용하면 되는 것을 알 수있다. 폴더는 "DIRECTORY”, 이미지는 "FILE"로 구분하는 것을 파악이 가능하다.

최종 설계

만들어야 되는 애플리케이션의 구조와 설계가 끝났다. 처음 로드시 root에 속한 이미지와 폴더 데이터를 받아오고 아이템을 랜더링한다. 그리고 아이템 클릭 시 폴더인지 이미지인지를 파악하여 폴더면 해당 폴더의 속한 이미지와 폴더 데이터를 받아와서 다시 랜더링한다. 이미지라면 이미지를 볼 수 있는 뷰 페이지를 랜더링한다. 이러한 순서가 반복하는 로직을 사용하면 된다.

1. 맨 처음 root에 속한 데이터 로드 후 type 이용하여 폴더는 "DIRECTORY”, 이미지는 "FILE"로 구분하여 아이템을 랜더링한다.
2. 아이템 클릭 시 type 에 따라 다른 폴더로 이동할 지 이미지 뷰 페이지로 이동 할 지 결정한다.
   1. "DIRECTORY” 시 해당 폴더의 속한 이미지와 폴더 데이터를 받아와서 다시 랜더링한다. (1번 으로)
   2. "FILE” 시 이미지를 볼 수 있는 뷰 페이지를 랜더링한다.

## 유의사항 참고하기

구현 유의사항에 따르면 ui 구성은 작은 단위인 컴포넌트로 구성해야 된다.

• 각 화면의 UI요소는 가급적 컴포넌트 형태로 추상화 하여 동작하도록 합니다.
  • 각 컴포넌트가 서로 의존성을 지니지 않고, App 혹은 그에 준하는 컴포넌트가 조율하는 형태로 동작하게 만드는 것을 지향합니다.

유의사항과 구현 예시 이미지를 살펴보면 여러가지 컴포넌트를 담고 조율하는 가장 큰 APP 컴포넌트, 현재 path 위치를 알려주는 Breadcrumb 컴포넌트, 폴더 속에 있는 데이터를 보여주는 Nodes 컴포넌트를 구성 할 수 있다.

컴포넌트 설계

유의사항을 잘 읽어보면 컴포넌트 형태로 추상화, 서로 의존성을 지니지 않고...라는 두 가지가 존재한다. 서로 의존성을 지니게 될 때는 언제일까? Nodes 컴포넌트에서 폴더 아이템을 클릭 했을 때 Breadcrumb 컴포넌트에 path가 변경되어야 한다. 이때 단순히 Nodes 컴포넌트 안에서 Breadcrumb 컴포넌트를 건드리게되면 Nodes 는 Breadcrumb 에 의존성이 생긴다. 이를 방지하기 위해 이 두 컴포넌트를 조율 할 수 있는 상위의 컴포넌트를 만든다.