fetch API
1. fetch를 이용한 네트워크 요청
비동기 요청의 가장 대표적인 사례를 꼽자면 단연 네트워크 요청을 들 수 있겠다.
네트워크를 통해 이루어지는 요청은 그 형태가 다양하지만 그중에서
URL로 요청하는 경우가 가장 흔하다. 그리고 그 URL로 요청하는걸 가능하게 해주는 API가 바로
fetch API 이다.
$ API 가 무엇인가?
비유를 들어 쉽게 설명을 한다면, 당신이 멋진 레스토랑에 있다고 가정해보자.
점원이 가져다준 메뉴판을 보면서 먹고싶은 스테이크를 고르면, 점원에게 주문을 하고
점원은 그 주문을 받아 요리사에 요청을 할 텐데, 그러면 요리사는 정성껏 스테이크를 만들어
점원에게 주고, 당신은 점원이 가져다준 맛있는 음식을 먹을 수 있게 된다.
여기서 점원의 역할을 한 번 살펴보자. 점원은 손님에게 메뉴를 알려주고, 주방에 주문받은 요리를 요청한다.
그다음 주방에서 완성된 요리를 손님께 다시 전달한다. API는 점원과 같은 역할을 한다.
API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면
요리사(응용프로그램)와 상호작용하여 요청된 메뉴(명령에 대한 값)를 전달한다.
쉽게 말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있겠다.
$ API의 역할은?
-
API는 서버와 데이터베이스에 대한 출입구 역할을 한다.
: 데이터베이스에는 정보들이 저장되는데, 모든 사람들이 이 데이터베이스에 접근할 수 있으면 안된다.
API는 이를 방지하기 위해 당신이 가진 서버와 데이터베이스에 대한 출입구 역할을 하며,
허용된 사람들에게만 접근성을 부여해준다. -
API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다.
: 여기서 애플리케이션이란 우리가 흔히 알고 있는 스마트폰 어플이나 프로그램을 말한다.
API는 애플리케이션과 기기가 데이터를 원활히 주고받을 수 있도록 돕는 역할을 한다. -
API는 모든 접속을 표준화한다.
API는 모든 접속을 표준화하기 때문에 기계/ 운영체제 등과 상관없이 누구나 동일한 액세스를 얻을 수 있다.
쉽게 말해, API는 범용 플러그처럼 작동한다고 볼 수 있습니다.
$ API를 사용하면 뭐가 좋을까?
-
외부 데이터를 사용하여 풍부한 사용자 경험을 창출한다.
: API는 처음부터 개발하거나 유지 보수할 필요가 없는 외부 데이터 및 기능에 안전하고 즉각적으로
접속할 수 있게 해 준다. -
워크플로우를 개선하여 보유 사용자를 증가시킨다.
: 플랫폼에서 검색, 라이선스, 다운로드할 때 플랫폼에서 고객을 내보내고 다시 자료를 업로드하기 위해 돌아오게 하는 대신 Shutterstock API를 사용하여 매끄러운 워크플로우를 만들어낼 수 있다. -
유연한 애플리케이션 기능 개발.
:API는 애플리케이션과 서버를 분리하여 유지할 수 있도록 디자인되었다.
즉, 다른 기능에 영향을 주지 않으면서 애플리케이션 또는 서버를 수정할 수 있다.
분리 기능으로 자유롭게 확장이 가능 한 새로운 기술을 탐험하고
시장의 수요에 신속하게 대응할 수 있다. -
새로운 수익 창출 기회 만들기.
:API를 통합하여 외부 데이터를 인터페이스 내에서 제공하면 비즈니스에서
추가 수익 창출 기회를 만들 수 있다. 많은 창의적인 플랫폼들은 다양한 파트너의 요구에 적응할 수 있는
유연한 비즈니스 모델인 Shutterstock API 통합을 이용한다. 이 방법으로 로열티 없는 자료를 이용하여
더 많은 상품을 사게 만들고 수익을 증가시킬 수 있는 기회로 활용할 수 있다.
2. fetch API 사용하기
실무에서는 여러 이유로 axios를 많이 사용하지만,
fetch 함수로도 웬만한 기능을 충분히 구현할 수 있다.
$ fetch() 함수의 기본 형식
ES 5
fetch('api 주소')
.then(function (res) {
return res.json();
}).then(function (res) {
// data를 응답 받은 후의 로직
})ES 6
fetch('api 주소')
.then(res => res.json())
.then(res => {
// data를 응답 받은 후의 로직
});각각의 단계가 무엇을 뜻하는지 명확히 알아야 한다.
그리고 화살표 함수로 몸통을 확 줄인 위의 코드도 ES5의 함수 선언식으로 바꿨을 때
어떤 모양인지 알아야 더 복잡한 fetch를 구현할 수 있다.
첫 번째 코드에서 res를 보며 드는 생각은 무엇인가? 3개의 res가 모두 똑같은 변수라고 생각했으면
변수의 scope(스코프) 부터 다시 공부하고 와야 한다. 위 코드에서 변수의 scope는 각 함수이므로
첫 번째 then와 두 번째 then 안에 있는 res는 서로 다른 것이다.
단지 둘다 응답이다 보니 response의 줄임말인 res를 사용했을 뿐,
$ fetch() 함수로 get 형식 호출하기
이런 api 명세서가 있다고 가정하자.
설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user/3
method: get
응답형태:
{
"success": boolean,
"user": {
"name": string,
"batch": number
}
}우리가 받아온 이 api명세서를 보고 어떻게 fetch()를 사용할까?
fetch('https://api.google.com/user/3')
.then(res => res.json())
.then(res => {
if (res.success) {
console.log(`${res.user.name}` 님 환영합니다);
}
});이렇게 하면 된다, 별거 아니다. 위의 틀에 필요한 정보만 넣으면 된다.
그런데 api 주소를 딱 보니 user 뒤에 있는 3이 아마도 user id 인것 같다.
고정된 api라면 그냥 자바스크립트 코드에서도 고정해서 사용하면 되는데,
위와 같이 api 주소를 상황에 맞게 유동적으로 바꿔줘야 할 때가 정말 많다.
리액트를 써서 user id 의 변동이 생길때 구현하는 방법은 아래와 같다.
import React, { Component } from 'react';
class User extends Component {
componentDidMount() {
// user id가 props를 통해 넘어온다고 가정
const { userId } = this.props;
fetch(`https://api.google.com/user/${userId}`)
.then(res => res.json())
.then(res => {
if (res.success) {
console.log(`${res.user.name}` 님 환영합니다);
}
});
}
}3. res => res.json() 은 뭔가요?
자세히 설명하려면 promise의 개념을 알아야한다, 다 안다고 생각하고 내용만 간략히 설명하겠다.
밑의 코드를 예시로 들어보겠다.
fetch('https://api.google.com/user', {
method: 'post',
body: JSON.stringify({
name: "yeri",
batch: 1
})
})
.then(res => res.json()) // 왜 then이 두개고 res.json() 은 뭔지?
.then(res => {
if (res.success) {
alert("저장 완료");
}
})then의 res가 어떤 값이 들어오길래 res.json()을 리턴하는가??
궁금하면? console.log를 찍어보면 된다.
fetch('https://api.google.com/user', {
method: 'post',
body: JSON.stringify({
name: "yeri",
batch: 1
})
})
.then(res => { // 첫 번째 then
console.log(res); // 어떤 값이 나오는지 확인해보자. 실제 잘 작동하는 api 주소가 필요하다.
return res.json();
})
.then(res => { // 두 번째 then
if (res.success) {
alert("저장 완료");
}
})첫 번째 then 함수에 전달된 인자 res는 http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체이다.
Response Object 라고 한다.
그런데 console을 확인해보면 백앤드에서 넘겨주는 응답 body, 즉 실제 데이터는 보이지 않을 것이다.
즉 { success: true } 라는 JSON 데이터는 위의 코드로는 console에 찍히지 않을 것이라는 말이다.
응답으로 받는 JSON 데이터를 사용하기 위해서는 Response Object 의 json 함수를 호출하고,
return 해야한다. 그러면 두 번째 then 함수에서 응답 body의 데이터를 받을 수 있다.
Thanks to
출처: https://www.shutterstock.com/ko/blog/what-is-an-api/
출처: https://yeri-kim.github.io/posts/fetch/
