[파트3]javascript 실습(고양이 사진첩 어플리케이션 2회차 사후,추가기능)

실습내용

해설강의를 참고하여 고양이 사진첩 웹사이트를 만든다.

 

실습과정

각 화면의 UI요소는 컴포넌트 형태로 추상화 하여 동작하도록 진행

 

아래와 같이 컴포넌트를 나눌수 있다.

 

App.js : 각 컴포넌트 와 상태값,api 관리 및 제어하는 js

api.js : 이미지에는 없지만 api를 요청하는 js

const API_END_POINT = 'https://cat-photos.edu-api.programmers.co.kr'

export const request = async (url) => {
  try {
    const res = await fetch(`${API_END_POINT}${url}`)
    
    if (!res.ok){
      throw new Error('API Call Fail')
    }

    return await res.json()

  } catch(e) {
      alert(e.message)
  }

}

 

Breadcrumb : 일반적으로 사이트의 header와 기본 컨텐츠 사이에 배치되는 탐색 보조 도구 라고 한다(구글 서치)

문제상에서는 아래 이미지 부분의 컴포넌트를 명칭 하였다.

 

Nodes : 문제상의 각 디렉터리(뒤로가기포함)를 포함하여 Nodes 컴포넌트라고 명칭 하였다.

ImageView : Nodes에 Type이 이미지 파일인 경우 클릭 하였을때 이미지를 표출하는 컴포넌트로 명칭 하였다.

Loading : api 요청 또는 작업중에 로딩되는 컴포넌트를 명칭 하였다.

 

 

추가 작업

해설 강의에서 추가 강의를 내주어 작업 해보았다.

 

1. 컴포넌트별로 state에 대한 정합성 체크

StateValidation.js를 만들어서 각 컴포넌트에서 setState함수에서 데이터 업데이트시
validateState 통하여 정합성 검사를 할수 있도록 하였다.

 

StateValidation.js

//정합성 체크
export default function  validateState(data,component){
  
  if (component === 'Loading') {

    if (typeof data !== "boolean") {
      throw new Error(`${component} Component ValidateState Fail`);
    }
    
  }else if (component === 'Nodes') {

    if (typeof data.isRoot !== "boolean" && !Array.isArray(data.nodes)) {
      throw new Error(`${component} Component ValidateState Fail`);
    }

  }else if (component === 'ImageViewer'){
  
    if (!(typeof data.selectedImageUrl === "string" || data.selectedImageUrl === null)) {
      throw new Error(`${component} Component ValidateState Fail`);
    }

  }else if (component === 'Breadcrumb'){
  
    if (!Array.isArray(data)) {
      throw new Error(`${component} Component ValidateState Fail`);
    }
  
  }

}

 

컴포넌트에서 사용예

ex) Node.js 에서 사용

 

 

 

 

2. setState를 최적화하여 이전상태와 비교해서 변경사항이 있을때만 render 함수 호출하도록 수정

setState 함수에서 조건문을 추가 하여 현제 데이터랑 setState에 들어온데이터(nextState)랑 동일하지 않으면

넘어갈 수 있도록 수정 하였다.

 

3. 한번 로딩된 데이터는 메모리에 캐시하고 이미 탐색한 경로를 다시 탐색할 경우 http 요청을 하지말고 캐시된 데이터를 불러와 랜더링 할수 있도록 추가

nodesCache라는 빈객체를 만든후 fetchNodes함수로 node데이터를 불러올때 nodesCache에 node id 를 인덱스로 하여 데이터를 저장한다. nodesCache 불러온 데이터가 있으면 api 호출하지 않고 바로 상태를 업데이트 할 수 있도록 수정 하였다.(GPT 참고 하여 작성.)

 

4. 루트 탐색중이 아닌경우, 백스페이스 키를 눌렀을때 이전 경로로 이동할 수 있도록 추가

키이벤트 리스너를 추가 하여 백스페이스일 경우에만 onPrevClick 함수를 실행시킬수 있도록 하였다.

 

 

작업이미지(GIF)

작업코드

https://github.com/josungman/Programmer-s_Web_App_Dev_Course/tree/main/week8/part2(after-practice)

Programmer-s_Web_App_Dev_Course/week8/part2(after-practice) at main · josungman/Programmer-s_Web_App_Dev_Course

 

느낀점

추가 기능 작업하면서 자신감이 조금 오른것 같다

그러나 먼가 어설프게 알고 있는것 같아서 위험한? 상태인것 같다..

 

구조가 익숙해질수 있도록 기록하고 반복하는것 밖에 없을 것 같다.

 

추가로

컴포넌트화시 클래스와,함수 방법중 나는 클래스 방식이 조금더 익숙한것 같다