React/한입 크기로 잘라 먹는 리액트(React.js)
3-10. API & fetch (Promise/async&await/fetch/API)
ddo_0ii
2022. 6. 28. 00:19
API(Application Programming Interface) - 응용 프로그램 프로그래밍 인터페이스
- 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상처리, 문자 제어등을 위한 인터페이스를 제공한다.
JSONPlaceholder - OPEN API
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
https://jsonplaceholder.typicode.com/posts 여기에 JSON형태로 저장되어있다.
// fetch에 마우스를 올리면 Promise라고 나오는데,
// Promise를 반환하는 함수는
// 비동기 함수처리를 하며, 아 함수는 then을 사용할 수 있다.
// 결과 값은 포장지라고 생각하면 된다.
let response = fetch("https://jsonplaceholder.typicode.com/posts").then((res) =>
console.log(res)
);
async function getData() {
let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
let jsonResponse = await rawResponse.json();
console.log(jsonResponse);
}
getData();
이렇게 json 내역들을 가져올 수 있다.