27일차 배운 것 정리 (1)

목차

1. 고양이 사진첩

1-1. 요구사항 분석 (~20분)

• root 탐색
• 디렉토리 클릭 시 → 하위 디렉토리 및 파일들 렌더링
• 디렉토리 이동 시 → BreadCrumb 영역도 업데이트

• 특정 디렉토리 탐색
• 좌상단 화살표 클릭 시 → 이전 디렉토리로 이동
• 파일 클릭 시 → filePath를 통해 이미지 보여주기

• 사진 클릭 시
• esc 혹은 사진 영역 밖 클릭 → 이미지 닫기

• 유의 사항
UI요소는 컴포넌트 형태로 추상화
• 의존성 분리, App이 전체 중재
API 호출 에러 처리
ES6 모듈 형태 작성
fetch 함수 사용 및 API 함수 분리하기
이벤트 바인딩 최적화

• 필수 구현 사항
main에 app이라는 class를 가진 애플리케이션 렌더링
BreadCrumb

현재 탐색 중인 경로 나타내기 ( root가 가장 왼쪽부터 차례대로)

마크업

<nav class="Breadcrumb">
  <div>root</div>
  <div>노란고양이</div>
</nav>

Nodes

현재 탐색 중인 경로에 속한 파일/디렉토리 렌더링

DIRECTORY 클릭 시, 해당 디렉토리 내 파일/디렉토리 렌더링

<div class="Node">
  <img src="./assets/directory.png">
  <div>2021/04</div>
</div>

FILE 클릭 시, filePath값 이용 해 이미지를 화면에 렌더링

<div class="Node">
  <img src="./assets/file.png">
  <div>하품하는 사진</div>
</div>

뒤로가기 버튼

<div class="Node">
  <img src="./assets/prev.png">
</div>

ImageView

파일 클릭 시, Modal을 띄우고, 모달에서 파일 이미지 렌더링

<div class="ImageViewer">
  <div class="content">
    <img src="https://fe-dev-matching-2021-03-serverlessdeploymentbuck-t3kpj3way537.s3.ap-northeast-2.amazonaws.com/public/images/a2i.jpg">
  </div>
</div>

• API 문서
• 루트에 존재하는 모든파일,디렉토리 가져오기 Get https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev

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

• 특정 디렉토리의 파일,디렉토리 가져오기 GET
• url/${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"
        }
    }
]

• 이미지 불러오기
• filePath / 포함 주의

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

어려웠던 점

• 마지막에 사진을 Modal에 띄었을 때, esc를 눌러 닫는 기능 구현
• keyup 이벤트들은 input에서만 작동하여, div에서도 작동하는 event를 찾지 못함

2. 고양이 사진첩 강의 (전반부)

요구사항 분석

• 요구사항 리스트업
고양이 사진 API 를 통해 사진과 폴더를 렌더링
폴더를 클릭하면 내부 폴더의 사진과 폴더를 렌더링
• 현재 경로도 렌더링
루트경로가 아닌 경우, 파일 목록 맨 앞에 뒤로가기 추가
사진을 클릭하면 고양이 사진을 모달창으로 보여줌
• esc를 누르고너, 사진 밖을 클릭하면 모달을 닫음
API를 불러오는 중인 경우 로딩 중 처리

• 컴포넌트 구조
• App이 전체 컴포넌트를 조율하는 형태



App
• state: {isRoot, isLoading, nodes, paths}
Nodes
• $target, onClick, onPrevClick
• state: {isRoot: false, nodes: [] }
ImageView
• $target,
• state: {imageUrl}

더미데이터 렌더링

• Nodes의 props
• $target, onClick, onPrevClick
• state: {isRoot: false, nodes: [] }

• 내 코드와 비교했을 때 개선 점
• isRoot 여부 컴포넌트 외부에서 던져주기
• template부분 공통점 최대한 살려서, 템플릿 분기 처리 해주기

3. API 연동하기

• request.js 모듈 만들고 더미데이터 부분 API호출로 받은 data로 교체해주기

• 로딩처리
• Loading 컴포넌트 따로 만들어서 재사용

• 내 코드와 비교했을 때 개선 점
• App에서 dataFetch 받아 내려주기
• 모든 Node에 data-id 주지말고, 최소한으로 주기 (prev Node제외)