API, fetch

Carminido·2020년 2월 20일
0

HangOutWithReact

목록 보기
7/12

https://developers.google.com/web/updates/2015/03/introduction-to-fetch
https://ko.reactjs.org/docs/faq-ajax.html

프론트엔드 개발자가 주로 소통하는 상대는 디자이너 & 백앤드이다. 그렇기 때문에 백앤드에서 쓰이는 용어들이 무엇인지, 데이터가 어떤 식으로 왔는지, 구조가 어떻게 되어 있는 지에 대해서 알아야 한다.

우리가 자주 쓰는 말 중에 API를 붙인다는 말을 많이 한다.
만약 우리가 로그인을 한다면 프론트는 백에 Id, password를 전해주고 백엔드에서는 그 아이디와 비밀번호가 맞다 틀리다에 대한 정보를 넘겨줄 것이다.

fetch mdn의 내용

Fetch의 핵심은 인터페이스의 추상화입니다. HTTP Request, Response, Headers, Body의 Payload, 그리고 비동기 리소스 Request의 초기화를 위한global fetch메서드가 이 대상입니다. HTTP의 주요 컴포넌트가 자바스크립트 오브젝트로써 추상화되어있기 때문에 다른 API에서 이러한 기능들을 사용하기 쉽게 해줍니다.

fetch메소드의 첫번째 인자로는 내가 호출하고 싶은 주소가 들어간다.
우리가 fetch 메소드를 통해서 호출을 하면 그에 대한 응답을 어떻게 받을까?

 const categories = fetch('https://api.kurly.com/v2/categories')

변수에 저장해서 그 저장한 것을 가지고 쓸까?
그런데 만약 우리가 불러오는 데이터의 양이 천만개라서 그걸 로딩하는 시간이 오래 걸린다면? 우리는 그 시간동안 계속 기다려야 할까? 그렇게 하면 홈페이지의 로딩을 오랫동안 기다리고 있어야 할지도 모른다.

여기서 나오는 새롭고 중요한 개념

동기, 비동기

자바스크립트는 동기와 비동기로 종류가 나뉘어져 있다. img, API 와 몇몇 은 비동기 방식이고 대부분의 것들은 동기방식이다.

동기방식 (Synchronous)
요청을 보낸 후 그에 대한 응답 ( 결과 ) 를 받아야 그 다음 동작 이루어진다. 내가 앞줄에 써 놓은 코드가 끝나지 않으면 그 다음 줄로 넘어갈 수 없다. 예를 들어 우리가 만약 엄청나게 많은 배열을 가지고 for문을 돌린다고 하면 그 for문이 끝나고 나서야 그 다음 코드가 작동되는 것이다.
그래서 그 일을 처리할 동안 ( 로직이 진행되는 동안 ) 다른 것들은 정지한다.

비동기 방식 (Asynchronous)
요청을 보낸 후 그에 대한 응답( 결과 ) 와 상관 없이 그 다음 동작이 이루어지는 방식이다. 쉽게 말하면 내가 위에 친 코드가 끝나지 않고도 그 다음 줄로 넘어갈 수 있다.
우리가 요청한 결과가 나오는 것까지 기다리지 않고도 그 다음 동작을 할 수 있다.

비동기식은 비동기식 처리가 끝났을 때 그에 대한 처리 결과에 대한 콜백 함수를 수행한다.

API는 비동기 함수이다.
그렇기 때문에 우리가 자료를 받아오는 작업이 끝날 때까지 기다리지 않고도 그 다음 작업을 할 수 있다.
그래서 우리는 fetch를 브라우저에 걸어놓고 그에 대한 응답이 오면 다시 그 fetch에 있는 함수(작업)들을 진행하게 할 수 있다.

/// 비동기는 어떤일이 끝나지 않고도 다음줄로 넘어간는 것

// 동기는 그 줄이 끝날때까지 기다리는 것

*/**

// const cate = fetch('https://api.kurly.com/v2/categories')

cate.map

//이렇게 하면 카테고리 나올때까지 기다려야해서

*/

// 날짜 객체처럼, promise라는 객체가 있다.

// fetch url을 넣으면

// 호출된 것 중에서 우리는 body의 data만 얻고 싶어서

// json()

fetch("https://api.kurly.com/v2/categories")

.then(res => {

return res.json();

})

.then(res => {

console.log(res.data);

res.data.categories.forEach(el => {

let newBox = document.createElement("div");

newBox.className = "_newBox";

let newImg = document.createElement("img");

newImg.src = el.icon_url;

let newList = document.createElement("li");

newList.innerText = el.name;

let list = document.querySelector("#category-list");

newBox.appendChild(newImg);

newBox.appendChild(newList);

list.appendChild(newBox);

});

});

//res는 스코프로 밖으로 나올 수 없으므로 로직을 스코프 안에서 해야 한다.

profile
나는야 코린이 하지만 무럭무럭 자라고 있죠

0개의 댓글