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

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

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("무언가 잘못됨");
    });
};