자바스크립트 API 호출하기

API ( Application Programming Interface ) 응용 프로그램 프로그래밍 인터페이스

응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스.
주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.

레스토랑을 떠올리며 알아보자.

방문하는 손님이 음식을 먹으려면 4가지의 단계를 거쳐야한다.

위 과정은 웹사이트를 통해서 어떤 데이터 ( 정보 ) 를 보는 방식과 매우 유사하다.

크롬과 같은 웹 브라우저가 서버에 데이터를 요청하고 질의를 해서 데이터베이스에서 값을 꺼내와 응답을 받아 사용하는 것과 같기 때문이다.

노란 부분이 우리가 우선 개발할 부분으로 데이터 요청과 요청 데이터 전달을 우선으로 제대로 알아가면된다.

물론 지금은 이 영역을 학습하지만 데이터베이스까지 지식을 쌓고 배우는 것이 더 효율적이고 개발에 도움이 된다.

 

웹 브라우저 클라이언트를 통해 서버에 데이터 요청 ( Request ) 과 요청 데이터 전달 ( Response ) 하는 과정을 API 호출이라고 부른다. API 호출은 웹 브라우저와 같은 클라이언트와 서버와의 연결다리이자 대화를 할 수 있는 방법이다.

 

API 를 호출한다는 것 = 다른 프로그램한테 데이터를 받기 위해 말을 거는 것 ( 웨이터에게 주문하는 것 ) 

 

결국 API 호출은 어떤 데이터를 반환받기 위한 목적을 갖고있다.

어떻게 보면 함수와도 비슷하다. 함수도 호출해서 원하는 데이터를 받을려고 사용하는 것이니까.

하지만 API 호출이 자바스크립트로 만든 함수와 가지는 큰 차이점은 응답을 언제 받을지 확실히 알 수가 없다는 점이다.

API 호출은 항상 우리 컴퓨터 안에서 일어나지 않기 때문. 다른 컴퓨터의 서버가 요청한 데이터를 응답해줄 때까지의 시간은 인터넷 연결속도, 서버의 부하상태 때문에 예상할 수 없고 실패할 수 있기 때문이다. ( Rejected 라는 상태가 있는 이유 )

 

언제 끝날지 모르는 이 작업을 전부 동기적으로 처리할 수 없기 때문에 우리는 API 호출에 Promise 객체를 사용해 비동기 호출을 사용하게 된다.

 

https://jsonplaceholder.typicode.com/ 

JSONPlaceholder - Free Fake REST API

JSONPlaceholder 는 개발자들을 위해 무료로 아무 조건없이 API 호출에 대해서 더미 데이터를 응답해주는 서비스를 하고있다. 이렇게 별 조건없이 무료로 공개해놓은 API 들을 오픈 API 라고 부른다.

 

위 서비스를 이용해 API 를 호출하는 코드를 작성해보자. 사용할 데이터는 /posts 에 있는 100가지의 더미 포스트이다.

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

fetch라는 내장함수는 우리 자바스크립트에서 API 호출을 도와주는 내장함수이다.

fetch에 마우스를 올려보면 설명이 뜬다 (Promise<Response> )

위와 같이 Promise를 반환하는 함수는 비동기처리를 하는 함수이고 결과는 then을 통해 사용할 수 있다.

결과를 보면 우리가 본 것과 다른 내용의 데이터를 받아온 걸 알 수 있는데 이것을 우편으로 비유하자면

우리가 필요한 편지라는 내용물이 담긴 포장된 편지봉투를 받아온 것이다.

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

getData();

우리가 확인한 /posts 라는 데이터들은 json 이라는 형식을 갖고있다. 그래서 위와 같이 데이터를 받아와 뽑아 출력하면 우리가 원했던 데이터를 호출해 가져온 것을 확인할 수 있다.