---

220524

---

Fetch

D3 Js

---

// 프라미스 체이닝이 아닌 경우
let p = new p(function(resolve, reject) {
    setTimeout(() => resolve(10), 1000);
});

p.then(result => {
    console.log(result);
    return result ** 2;
});

p.then(result => {
    console.log(result);
    return result ** 2;
});

p.then(result => {
    console.log(result);
    return result ** 2;
});

• 에러핸들링
  // if
  // else if
  // else

Fetch

Fetch는 비동기 네트워크 통신을 구현하기 위해 사용하는 Web API이다.
fetch함수는 클라이언트 사이드 Web API로, HTTP요청 전송 기능을 제공한다. Ajax를 지원하는 여러가지 기술 중 비교적 최신 기술이며, 기존 방식에 비해 더 유연하고 분명하다. 

Ajax

동기 통신 방식은 속도 저하와 화면 깜빡임 현상 등의 문제가 발생해 매끄러운 작동과는 거리가 멀었다.

// 해결방법
1. 서버의 응답이 완료될 때까지 기다리지 않고 다른 작업들을 진행한다.
2. 변경 사항이 있는 부분만 렌더링한다.

fetch 구조

const promise = fetch(resource, [options]);

• fetch()의 매개변수
• 첫 번째 매개변수 (resource) : 필수 사항, HTTP 요청을 보낼 URL
• 두 번째 매개변수 (options) : 선택 사항, method, headers, body 등

get - 요청을 보내서 데이터를 읽어올때
post - 데이터를 쓸 때
foot - 데이터를 수정할 때
delete - 데이터 삭제할 때

D3의 JS란 ?

• Data - Driven Documents의 약자(데이터 주도 문서!)
• 데이터를 시각화하려는 목적
• SVG(Scalable Vector Graphic)를 통해 다양한 해상도에서 깨짐없는 시각화 가능
• 뒤에 번외로 다룰 chartjs는 어떤 그래프를 그릴 때 원하는 그래프를 선택하기만 하면 된다. D3는 그렇지 않고, 일일이 그려줘야 해서 단점이자 장점이다.
• 동작과정
  • Loading - 데이터 로딩
  • Selecting-Binding - 코드 연동
  • Transform - 그래프의 색상, 축 등 설정
  • Transition - 클릭 등의 효과 지정
• 기본메서드
  • d3.select : 태그 하나 선택(Selecting) - querySelector와 유사
  • d3.selectAll : 태그 전체 선택(Selecting) - querySelectorAll과 유사
  • .data : 데이터 로딩
  • .enter : 태그가 데이터에 비해 부족하면 데이터의 수만큼 태그 생성(부족한 태그를 생성후 반환)
  • .append : 새로운 태그 추가
  • .exit : 태그가 데이터에 비해 많다면 나머지 태그 반환, 주로 태 그 속성 지정을 종료하고 아래 remove로 나머지 태그 제거하는 용도로 사용
  • .remove : 선택된 태그 제거