22-10-18-JavaScript(10) 비동기 Fetch, D3, Chart.js, canvas, 콜백 지옥, 로컬스토리지

Fetch

비동기 네트워크 통신 구현을 위해 사용하는 Web Api

Ajax

Asynchronous Javascript and XML (비동기)
서버에게 비동기적으로 데이터를 요청하고 받은 데이터를 동적으로 페이지에 렌더링 하는 방식

비동기 통신 -> 응답 받을 때까지 기다리지 않고 다른 일을 처리하는 방식

Ajax 이전)
동기적
응답 전까지 다른 일처리 못함
서버로부터 전체 HTML을 받아 전체 페이지 렌더링

Ajax 이후)
비동기적
응답 기다리지 않고 다른 일처리
변경 사항 부분만 렌더링

=> 자바스크립트를 이용한 비동기 네트워크 통신 방식
Web API 기반 동작 (XMLHttpRequest 객체, JQuery, fetch)

fetch

Web API로 Ajax 지원하는 가장 최신 기술
네트워크 통신을 포함한 리소스를 가지고 오기 위한 인터페이스 제공

const promise = fetch(resource, [options])
// resource -> 필수사항으로 HTTP 요청 보낼 URL
// options -> Request() 생성자로 생성된 객체 올 수 있다.

프로미스 객체를 반환
사용자가 원하는 형태로 파싱 가능

response.json() -> JSON 형태로 반환
response.text() -> text 형태로 반환
response.bolb() -> 이진 데이터로 반환 (이미지, 오디오 등)

const promise = fetch('url').then(function (response) {
	console.log(response);
})
// then() 메서드는 fetch가 정상적인 응답이 들어온 경우 응답값 처리
// url 응답값 답는 콜백 함수 생성

fetch를 프로미스만으로 작성

// 1. fetch 하기
fetch('url...');

// 2. 원하는 데이터 추출하기
fetch('url')
.then(response => response.json())

// 3. 이메일 주소 데이터 출력하기
fetch('url')
.then(response => response.json())
.then(json => console.log(json.email))

fetch를 async / await 사용하여 작성

const userData = await fetch('https://jsonplaceholder.typicode.com/users/3')
.then(response => response.json())
console.log(userData)

// bolb()를 이용하여 이미지 받아오기
aync function getImg() {
	const response = await fetch('url...');
  	// blob() 형태로 받아오기
  	const blobImg = await(response.blob());
  
  	const img = document.createElement('img');
  	// html, body에 img 태그 삽입하기
  	document.body.append(img);
  	// img 주소 설정
  	img.src = URL.createObjectURL(blobImg);
  	// createObjectURL 메소드는 Blob URL을 DOMString로 변환
  	// URL로 활용하고 싶다면 URL.createObjectURL 사용하여 url로 변환
}
getImg()

fetch HTTP 요청

두 번째 매개변수에 요청 메서드를 전달
GET, POST< DELETE, PATCH, PUT 요청
-> headers, methods, body 정보를 "객체" 형태로 담아서 전달

// async/await 패턴
async function request() {
  const response = await fetch('url 기입',
  {
    method: "GET", //POST, DELETE, PATH, PUT
	headers: {
		"Content-type": "콘텐츠 형태",
		//application/json, text/plain 등
	},
	body: JSON.stringify(
		서버에 전달할 데이터
	);
  });
  const data = await response.json();
  console.log(data);
}
request();

// Promise 패턴
function get() {
  fetch('url 기입',{
    method: "GET",
  })
  .then(response => response.json())
  .then(json => console.log(json));
}
get()

1. GET 요청
   생략하는 경우 디폴트 값으로 GET이 들어감
   서버에서 데이터를 가져올 때 사용

2. POST 요청
   데이터 생성을 요청
   생성할 내용을 body에 넣어서 전달하면 됨
   JSON.stringify() 메서드는 배열이나 객체를 JSON 포맷 문자열로 변환
   서버 전송 가능한 형태로 바꿔주는 문자열화 작업 : 직렬화

body: JSON.stringify({ //문자열로 변환하지 않으면 에러발생
  "title": "오늘의 간식",
  "body": "고소미",
  "userId": 3
 })

객체 -> 문자열 : 직렬화
문자열 -> 객체 : 역직렬화

3. DELETE 요청
   리소스 삭제를 요청

4. PUT 요청
   리소스 업데이트 요청
   업데이트할 리소스 없다면 새로운 리소스 생성
   전체 업데이트만 가능 (전부 body에 담아 요청)

5. PATCH 요청
   PUT과 마찬가지로 리소스 업데이트 요청
   부분 업데이트 가능

D3

Data - Driven Documents 약자 (데이터 주도 문서)
데이터 시각화하는 목적
일일이 그려야하지만 섬세한 작업 가능

color = ['red','green','blue', 'pink', 'yellowgreen'] // 16진수(#ffffff) 됩니다. -> 연산을 통해 color 값에 변동을 줄 수 있습니다.
for(let i = 1; i < 6; i++) {
    svg
    .append('circle')
    .attr('cx', 100*i)
    .attr('cy', 100*i)
    .attr('r', (30*i)/2)
    .attr('fill', color[i-1]);
}

Chart.js

html의 canvas 태그를 통해 차트를 생성

<div class="col-md-6">
	<canvas id="one"></canvas>
</div>

<script>
const labels = ["1월", "2월", "3월", "4월", "5월", "6월"];
const data1 = {
labels: labels,
datasets: [
    {
        label: "월별 매출액 현황(억원)",
        backgroundColor: "rgb(255, 99, 132)",
        borderColor: "rgb(255, 99, 132)",
        data: [0, 2, 5, 2, 4, 2],
    },
],
};
const config1 = {
	type: "line", //pie, line, doughnut, polarArea...
	data: data1,
	options: {},
};
const one = new Chart(document.getElementById("one"), config1);
  .....
</script>

Canvas

자바스크립트를 사용하여 그림을 그림
캔버스의 크기는 300px 150px (너비 높이)가 초기 설정값이며, HTML height와 width 속성을 사용하여 바꿀 수 있다.

function 삼각형(ctx){
    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75); // 경유
    ctx.lineTo(100, 25);
    ctx.fillStyle = 'red';
    ctx.fill();
}
삼각형(ctx);

콜백 지옥

콜백 함수 사용이 증가하면서 들여쓰기가 많이 발생하는 현상
비동기 작업들을 동기적으로 처리하려다 보니 많은 콜백 함수가 사용되어
가독성이 떨어지면서 콜백 지옥에 빠짐

해결 방법 -> 기명함수 사용, Promise, async-await를 사용하여 콜백 지옥 해결하기

콜백 지옥

프로미스 사용

.then, .catch 사용

로컬스토리지

브라우저에 key - value 값을 스토리지에 저장 가능
쿠키와 달리 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않음
쿠키보다 더 많은 자료 저장 가능
자바스크립트 내에서만 스토리지 객체 조작 가능
재시작하더라도 데이터 파기 안됨
문자형 데이터 타입만 지원

VS 세션 스토리지
-> 웹 페이지의 세션 끝나면 데이터가 지워짐

• setItem(key, value) – 키-값 쌍 저장
• getItem(key) – 키에 해당하는 값 호출
• removeItem(key) – 해당 값 삭제
• clear() – 모든 데이터 삭제
• key(index) – 인덱스(index)에 해당하는 키 호출
• length – 저장된 항목의 개수

// 키에 test, 값에 1 데이터 쓰기
localStorage.setItem('test',1);

JSON 형태로 데이터 읽고 쓰기

// 문자열 밖에 저장 못하므로 JSON 형태로 데이터를 읽고 쓰기
localStorage.setItem('json', JSON.stringify(memo3));