27일차 배운 것 정리 (1)

목차

1. 고양이 사진첩

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

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

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

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

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

• 필수 구현 사항
main에 app이라는 class를 가진 애플리케이션 렌더링
BreadCrumb
현재 탐색 중인 경로 나타내기 ( root가 가장 왼쪽부터 차례대로)
마크업
Nodes
현재 탐색 중인 경로에 속한 파일/디렉토리 렌더링
DIRECTORY 클릭 시, 해당 디렉토리 내 파일/디렉토리 렌더링
FILE 클릭 시, filePath값 이용 해 이미지를 화면에 렌더링
뒤로가기 버튼
ImageView
파일 클릭 시, Modal을 띄우고, 모달에서 파일 이미지 렌더링

• API 문서
• 루트에 존재하는 모든파일,디렉토리 가져오기 Get https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev
• 특정 디렉토리의 파일,디렉토리 가져오기 GET
• url/${nodeId}
• 이미지 불러오기
• 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제외)