[JS] API & fetch

Minyoung's Conference·2022년 6월 21일
0

JavaScript

목록 보기
16/28
post-thumbnail

API와 fetch를 알면 자바스크립트를 이용해 정말 많은 어플리케이션을 만들어낼 수 있다. 아주 설레는 부분이 아니지 않을 수 없다.

API란 무엇일까?

위키에서는 다음과 같이 설명하고 있다.
API란 응용 프로그램 프로그래밍 인터페이스(Application Programming Interface)이다. 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.

설명이 어렵지 않은가?
그림을 보며 쉽게 이해해보자.

위 그림처럼 손님은 음식을 먹기 위해선 4단계를 거쳐야 한다.
손님이 주문을 하면, 웨이터는 냉장고에서 음식을 찾는다.
음식을 찾으면, 가져오고, 나름의 조리를 통해 서빙한다.

위의 예시처럼, API 동작도 매우 유사하다.

브라우저와 서버, 데이터베이스의 동작들을 하나씩 떼서 비교해보자.

웹브라우저는 손님이 음식을 요청하는 것처럼 데이터를 요청한다.
그래서 웹브라우저를 client라고 부를 수 있다.
서버는 주문받은 음식(데이터)를 전달해주는 역할을 한다.
그리고 데이터베이스는 음식들(데이터들)이 보관되어있는 냉장고와 같다.


(query는 검색, 질의를 뜻한다.)
여기서 response와 request를 잘 기억하자.

자, 그러면 관점을 나누어 생각해보자. 우선 Client관점에서 생각하자.

Client관점에서는 클라이언트와 서버단에서 Request(1)와 Response(4)에 대해서만 알면 된다. 이렇게 Request와 Response 즉, 데이터를 요청하고 전달받는 것을 API호출 이라고 한다.

API라는 것은 쉽게 말해서 웹브라우저와 서버간의 사이처럼 프로그램과 프로그램 사이의 연결다리이자 대화를 할 수 있는 방법 정도로 생각하면 좋을 것 같다.
(API를 호출한다 -> 다른 프로그램에서 데이터를 받기 위해 말을 건다.)

그렇다면, API를 호출하는 것은 다른 프로그램으로 부터 데이터를 받기 위한 정확한 목적이 있다. 이건 함수와 비슷하다고 생각할 수 있다.

함수 또한 호출을 통해 원하는 데이터를 반환받는다. 하지만 API호출이 자바스크립트의 함수와 가지는 가장 큰 차이점은 응답(Response)를 언제 받을 지 확실히 알 수 없다는 점이다.

API호출은 항상 컴퓨터 내에서 일어나지 않는다.
client, server 컴퓨터가 다를 수 있고, 보통 다른 경우가 많다.

그리고 데이터를 요청했을 때, server에서 데이터를 응답해주는 시간은 인터넷의 속도, 서버의 부하 상태 등으로 예상할 수 없고 때로는 실패하기도 한다. (그래서 이전에 배운 Promise 객체에 Rejected라는 상태가 존재한다.)

그래서 언제끝날 지 모르는 이 상태들을 동기적으로 처리해선 안된다.
그래서 API호출을 Promise객체를 이용해 비동기적으로 호출하게 된다.

이제 특정 서버에 데이터를 요청하고 API호출하는 실습을 진행해보자.

API를 아무렇게나 호출해선 안되고 인증된 상태의 서버에 호출을 해야한다.
{json}placeholder(API 연습용 서버, 조건없이 더미 데이터를 제공해주는 서비스 : OPEN API)를 이용해 실습해보자.


페이지 내에서 스크롤을 내리면 Resourses 가 보일 것이다. 여기서 /posts를 클릭하면 객체형식의 데이터리스트를 확인할 수 있다.


위와 같은 json 파일이 나타난다.(response를 json형식으로 하겠다!라는 말)


API를 호출하기 위해선 URL주소를 알아야 한다. URL주소는 다음과 같다.
(위와 같은 주소로 말을 걸겠다!)

그럼 자바스크립트로 API를 호출해보자.
응답을 response라는 변수에 저장하겠다.

let response = fetch('https://jsonplaceholder.typicode.com/posts');

fetch라는 내장함수를 사용했다.
(fetch: API를 호출할 수 있도록 도와주는 JavaScript 내장함수)

response라는 변수에 마우스를 올리면 다음과 같이 나타난다.
(Promise를 반환하는 함수는 비동기처리를 하는 함수라는 걸 기억하는가? 그리고, 이 함수의 처리결과는 then을 통해서 처리가 가능하다.)

let response = fetch("https://jsonplaceholder.typicode.com/posts").then(
  (res) => {
    console.log(res);
  }
);

위와 같이, 함수를 실행해보면

위와 같은 성공된(status:200) 결과값을 가져오는 것을 알 수 있다.
그런데, 정말 많은 데이터들을 불러왔다. 왜 그럴까?

fetch를 통해 데이터를 불러오게 되면, 데이터의 결과값을 반환하는 게 아니라 그 API의 성공 객체 자체를 반환하기 때문에 Response라는 객체가 출력된다.

우리가 편지를 보냈다고 예를 들어보자. 현재 fetch를 통해 불러온 것은 편지와 내용물을 감싼 편지 봉투라고 보면된다. (결과값의 포장지)

아까 json 데이터 파일에서 원하는 데이터를 뜯어와보자.
(async, await를 이용해보자.

async function getData() {
  let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
}

위와 같이, 만들어낼 수 있다.
(fetch로 불렀기에 rawData가 날아온다. 그래서 변수명을 위와 같이 했다.)

그러면 json 데이터를 불러와보자.

async function getData() {
  let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
  let jsonResponse = await rawResponse.json();
  console.log(jsonResponse);
}

getData();


결과값은 위와 같다.
배열에 100개의 데이터가 담겨 날아왔다. 그리고 하나씩 까보면 데이터가 정상적으로 잘 들어와있음을 확인할 수 있다.

이런식으로 fetch를 통해 API를 호출하는 기본적인 방법에 대해 알아보았다.

profile
안녕하세요, FE 개발자 김민영입니다.

0개의 댓글