🚬 본 페이지는 프로그래머스 해설페이지를 보고 정리한 페이지입니다.

가급적 컴포넌트 형태로 추상화하라

DOM 접근 부분을 최소화하고, 명령형 프로그래밍보단 선언적 프로그래밍 접근하기
[지양해야하는 코드]

[지향해야하는 코드]

생성자 - render - setState 크게 세개의 구조를 갖는다.

다음은 Breadcrumps 와 Nodes들이다.

기능은 다음과 같다.

Breadcrump - Nodes 들을 짤 때 주의점

Nodes 코드내에서 Breadcrump 직접 다루거나 업데이트 하도록 코드를 작성하게 되면 Nodes 컴포넌트를 독립적으로 사용할 수 없다. => 독립적 사용을 위해

이런 경우 더 상위의 컴포넌트를 만들고 콜백함수로 느슨하게 연결한다(?)

App 사용은 다음과 같이 index.js 파일에서

fetch

fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject 하지 않는다.

• 그렇기 때문에 요청이 정말로 성공했는지 체크하려면 response의 ok를 체크해야한다.

async-await

const request = (nodeId) => {
  try {
    const res = await fetch(`${API_END_POINT}/${nodeId ? nodeId : ""}`);
    if (!res.ok) {
      throw new Error("");
    }
    return await res.json();
  } catch (e) {
    throw new Error();
  }
};

Promise

const API_END_POINT = `...`;

const request = (nodeId) => {
  // nodeId의 유무로 root directory인지 특정 directory를 조회할지 처리
  fetch(`${API_END_POINT}/${nodeId ? nodeId : ""}`)
    .then((res) => {
      if (!res.ok) {
        throw new Error("서버의 상태가 이상합니다");
      }
      return res.json();
    })
    .catch((e) => {
      throw new Error("무언가 잘못됨");
    });
};

디렉토리 클릭

• 디렉토리에 들어있는 노드들 노출
• depth 변경 ( breadcrump )

파일 클릭

• 사진을 노출
  
  다음과 같이 노출시킨다.
  

App컴포넌트 에서 ImageView를 생성하고 파일을 클릭하면 image url을 넘겨 보이게한다.

App의 onclick함수

뒤로가기 클릭

• 이전 디렉토리로 가게되면 마지막 depth 제거 후 이전요소로 이동
  

dataset을 이용하면 e.target.dataset 으로 원하는 data-로 시작하는 attribute 꺼내올 수 있다. ( 기존에 data- attribute에 nodeId넣어놨었음 )

여기서 노드 아이디가 없는 경우 뒤로 가기를 누른 것이므로 onBackClick() 함수 실행한다. 이 때 onBackClick함수는 인자로 전달 받음(app으로 부터)

컴포넌트간 독립성을 보장하기위해 onClick &onBackClick 함수는 App.js에서 관리한다. 완성된 onBackClick 함수이다.

이때의 this는 App의 this이다.

import export

Reference

• 프로그래머스 해설