[JS] API & fetch

API란?

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

간단하게 말해서 API를 호출할 때 client 입장에서는 request와 response만 알면 되는 것 입니다.

API 호출해보기

https://jsonplaceholder.typicode.com/
해당 사이트는 무료로 api 호출에 더미응답을 해주는 open api 입니다.

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

여기서 fetch는 자바스크립트에서 api 호출을 할 수 있도록 도와주는 내장 함수입니다.
fetch의 return 자료형은 Promise<Response> 입니다.

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

Promise 객체의 then 메서드를 사용하여 결과 값을 출력해보았습니다.

결과를 보게되면 다양한 정보들이 많습니다. fetch 내장 함수로 api를 호출하게 되면 해당 api의 결과값을 그대로 반환하는 것이 아니라 api 성공 객체 자체를 반환하기 때문에 Response 객체가 출력된 것입니다.

async function getJsonData() {
  let rawRes = await fetch("https://jsonplaceholder.typicode.com/posts");
  let jsonRes = await rawRes.json();
  console.log(jsonRes);
}

getJsonData();

정상적으로 원하는 json 데이터가 출력된 것을 확인할 수 있습니다.
기본적인 api 호출 방식과 결과를 확인해 보았습니다.

해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.