초보 개발자의 일기

JS API 본문

Frontend practice/java script

JS API

판다꼬마 2022. 5. 19. 21:59
728x90

-API

응용 프로그램 프로그래밍 인터페이스

응용프로그램에서 사용할 수 있도록
운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스이다

 

 

1. 클라이언트가 서버에 데이터 요청(request)
2. 서버가 데이터베이스에서 데이터 검색(query)
3. 데이터베이스에서 찾아서 서버에 가져옴 (query result)
4. 서버가 클라이언트에서 요청 데이터 전달(response)

 

이 중에서 1번과 4번 과정이 우리가 지금 배울 API 과정이다.

 

간단 정리!
api를 호출한다 ==다른 프로그램한테 데이터를 받기 위해 말을 건다.
like 웨이터에게 말을 거는 것과 같다.

 

https://jsonplaceholder.typicode.com/

 

JSONPlaceholder - Free Fake REST API

{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month.

jsonplaceholder.typicode.com

이 사이트는 개발자들을 위해 무료로 조건없이 api 호출에 대해 더미 데이터를 응답해주는 서비스
이런 것을 open api라고 부른다.

 

이 주소로 요청을 했을때 이렇게 결과를 보여주겠다는 response이다.
api를 호출하려면 주소를 알아야 한다. 

주소:https://jsonplaceholder.typicode.com/posts

 

 


fetch 자바 스크립트에서 api를 호출할 수 있도록 도와주는 내장 함수이다.

 

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


fetch를 통해 호출하면 편지봉투를 연 것과 다름이 없다.

안의 내용을 볼 수가 없는데 이것을 열기 위해서는 봉투를 뜯어야 한다!

 

 

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

getData();

이렇게 작성을 하면 응답이 다 들어가 있고 하나하나 열어보면 response가 제대로 된 것을 볼 수 있다!

728x90

'Frontend practice > java script' 카테고리의 다른 글

React  (1) 2022.05.22
Node.js  (2) 2022.05.22
JS await,async  (0) 2022.05.19
JS spread, 비 구조화 할당  (0) 2022.05.19
JS 단락회로 평가  (1) 2022.05.18