[JS] API & fetch

 

 

API란?

 

 

API(Application Programming Interface) 프로그램들이 서로 상호작용하는 것을 도와주는 매개체

단순히 글로 이해하기 어렵고 잘 와닫지 않는다. 그림의 예시를 보며 이해해보자.

 

 

위 그림은 우리가 웹사이트를 보며 정보가 오고가는 과정과 매우 유사하다.

• 손님은 웨이터를 통해 음식을 가져오도록 부탁하고
• 웨이터는 냉장고에서 음식을 찾는다.
• 웨이터는 냉장고에서 음식을 가져와서
• 손님에게 음식을 전달한다.

 

• Chrome과 같은 웹 브라우저가 서버에 데이터를 요청하고
• 서버는 데이터 베이스에서 데이터를 찾는다.
• 서버는 데이터 베이스에서 데이터를 가져와서
• 웹 브라우저에게 전달한다.

 

 

API의 과정은 다음과 같다.

• 클라이언트가 서버에 데이터를 Request한다.
• 서버는 데이터 베이스에서 알맞은 데이터를 가져오기 위해 냉장고에서 데이터를 찾는다. 이 과정을 Query라고 한다.
• 데이터를 데이터 베이스에서 가져오는 것은 Query에 결과를 가져오는 것과 같다.
• 서버는 Request받은 데이터를 클라이언트에게 Request에 대한 Response를 한다.

프론트엔드 개발자로서 중요하게 공부해야 할 부분은 Request와 Response이다.

데이터를 Request하고 Response받는 과정을 API호출이라고 한다.

 

 

API 호출

 

 

API는 아무에게나 호출하도록 허락하지 않는다. 

인증된 누군가에 한에서만 요청에 응답하도록 설정되어 있는 경우가 대부분이다.

연습을 위해 무료로 개발자들을 위해 API를 오픈해놓은 곳이 있다.

아래의 Open API 페이지에서 API호출을 연습해볼 수 있다!

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

 

위 사이트로 접속하여 Resources라는 부분을 찾아 사용해보자.

 

 

위 Resources에서 /posts를 클릭해보면 100개의 posts가 JSON형태로 되어있는 것을 확인할 수 있다.

 

 

그럼 위 API를 통해 호출을 연습해보자

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

아래의 Response 객체로 반환되는 것을 확인할 수 있다.

fetch를 통해서 API를 호출하게 되면 API의 결과값을 그냥 반환하는 것이 아니라 API 성공 객체 자체를 반환하기 때문에 Response객체가 출력되었다.

우리는 편지의 내용을 기대하고 받았지만 현재는 편지 봉투를 보고있는 셈이다. 그럼 편지봉투를 뜯어보자!

 

 

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

getData();

데이터가 정상적으로 잘 들어온 것을 확인할 수 있다.