[개요] 사진 API 출력하기 프로젝트

기간

약 3시간

당신은 고양이들을 모시고 있는 어느 집사에게 자신의 고양이 사진을 관리해달라는 의뢰를 받았습니다. 의뢰인은 당신이 믿을만한 사람인지 테스트하기 위해, 약간의 사진을 당신에게 보냈으며 이 사진들을 웹에서 볼 수 있도록 해달라고 합니다.
이 사진을 어떻게 처리할까 고민 중이던 때, 당신의 절친한 친구 Back-end 개발자가 당신을 돕기 위해 의뢰인이 보낸 사진들을 API 형태로 만들어주었습니다. 이 API를 이용해, 의뢰인을 만족시킬 수 있는 고양이 사진첩 애플리케이션을 만들어봅시다!
('2021 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 기출 문제입니다.)

 

해설은 별개로 있음.

 

이를 제대로 코딩 할 수 있기 위해 준비한 과정은: [1-3], 영상

1. WEB 의 구동원리를 재정립. 이 영역에서 정립하는 method 의 기준 및 HTTP 응답 코드 개념.

2. REST API - fetch 함수의 이용 예시 및 CRUD 를 REST API 로서 소개한 post, get, put, delete.

3. REST API - URI 는 정보의 자원을 표시하도록.

4. const, arrow function 에 대한 재확인. Destructuring assignment 개념 숙지.

5. 선언문과 컴포넌트 형태로 추상화 한다는 점을 작업 중, 지속적으로 염두하며 진행해보기.

해석:

• DOM 으로 접근하는 부분을 최소화 하라. 즉, 명령형을 최소화 하라.
• 대신, 선언적인 프로그래밍 방식으로 (구성하여) 접근하라.

 

현재 파악된 정보들:

• 해당 웹의 이용자(client) 측의 입장을 생각하며 그리는 편이, 코딩 구성에 있어서도 생각하는 시간이 축소됨.
• import, export, SPA 는 react.js 에서만 가능한 게 아님. react.js 도 JS 기반임.
• 모든 브라우저에서 정상 작동하면 '제대로 코딩', 한 곳만 된다면 '뭔가 잘못됨' 으로 판단 하기.

계획면:

index.js : 시작의 장소. App 생성.

App.js, Nodes.js, Breadcrumb.js, ImageView:js, Loading.js : 각 컴포넌트 목록

app.js : fetch 관련 유틸리티 함수.