API 호출하기

Promise / async&await / fetch / API

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

- 레스토랑
손님 -1주문-> 웨이터(서버) -2찾기-> 냉장고
손님 <-4음식 서빙- 웨이터(서버) <-3가져오기- 냉장고

- 웹 사이트
BROWSER(CLIENT) -1Request-> SERVER -2Query-> DATABASE
BROWSER(CLIENT) <-4Response- SERVER <-3Query Result- DATABASE

- API
손님(CLIENT) -1데이터 요청(Request)-> 웨이터(SERVER) -2데이터 검색(Query)-> 냉장고(DATABASE)
손님(CLIENT) <-4요청 데이터 전달(Response)- 웨이터(SERVER) <-3데이터 찾기(Query Result)- 냉장고(DATABASE)

자바스크립트로 개발하는 부분은 클라이언트다. 따라서 CLIENT, SERVER, 데이터 요청(Request), 요청 데이터 전달(Response) 만 잘 알면된다.
데이터 요청(Request), 요청 데이터 전달(Response) 과정을 API 호출이라 한다.
다시 말해, API 호출한다는 것은 다른 프로그램에게 데이터를 받기 위해 말을 건다고 생각하면 된다.
API 호출과 자바스크립트 함수와 큰 차이중 하나는 응답을 언제 받을지 확실히 알 수 없다는 점이다.

JSON Placeholder : 개발자들을 위해 무료로 API 호출에 대해 더미 데이터를 응답해주는 서비스를 하는 곳. 오픈 API.
참고링크 : https://jsonplaceholder.typicode.com/posts

 

// API 호출
// fetch() : 자바스크립트에서 API를 호출할 수 있도록 도와주는 내장함수. Promise 반환하는 비동기 처리 함수. 처리 결과는 then() 통해 사용 가능.
let response = fetch("https://jsonplaceholder.typicode.com/posts").then((res) => {
    console.log(res);
})
/*
- 콘솔
Response {...}
- Response 객체 자체가 출력됨 (결과값의 포장지라고 생각하면 됨)
*/

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

getData();
/*
- 콘솔
[Object, Object, ...]
- 하나씩 열어보면 데이터가 정상적으로 잘 들어온 것을 확인할수 있다.
*/

참고강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8#

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 - 인프런