API 호출
API(Application Programming Interface) : 응용 프로그램 프로그래밍 인터페이스
-> 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.
예시) 레스토랑
레스토랑에 방문하는 손님은 음식을 먹으려면 4가지 단계를 거쳐야 함
1. 웨이터에게 음식 주문
2. 웨이터는 냉장고에서 음식 찾기
3. 찾은 음식을 가져오기
4. 음식을 나름대로 조리해서 서빙
이 과정은 우리가 웹사이트를 통해 어떤 데이터를 보는 방식과 매우 유사
우리가 웹사이트로 어떤 정보를 본다는 것은
1. 웹 브라우저(크롬)가 서버에 데이터 요청
2. 질의
3. DB에서 값 꺼내오기
4. 응답
1,4번 과정을 API 호출이라 부름
API는 클라이언트(웹 브라우저)와 서버간의 연결 다리, 대화를 할 수 있는 방법 정도로 생각하면 됨
-> API 호출 : 다른 프로그램한테 데이터를 받기 위해 말을 건다
API 호출은 js에서 함수랑 비슷함
but, 응답을 언제 받을지 모른다는 점에서 함수와 차이점
언제 끝날지 모르는 작업들을 모두 동기적으로 처리할 수 없으니, 우리는 promise객체를 이용하여 비동기 호출을 하게됨
특정서버에 데이터를 요청하고 그 데이터를 받아보는 API 호출을 해보자
API도 보통은 인증된 누군가에 한해서만 요청에 대해 대답을 해줌
JSONPlaceholder
-> 개발자들을 위해 무료로 아무 조건없이 API 호출에 대해 더미 데이터를 응답해주는 서비스를 하고 있음 (오픈 API : 별 조건 없이 무료로 공개해놓은 API)
Resources라는 항목 : 우리가 쓸 수 있는 자원들이 나와있음
Resources탭에서 posts를 클릭해보면 어떤 주소로 이동하게 되고, 객체 배열처럼 생긴 애들이 나오게 됨
이 주소는 API를 호출할 때 누군가에게 말 걸지 결정하는 주소
노출되는 데이터들은 JSON 형식으로, 응답 결과를 보여준다고 생각하면됨
API를 호출하려면 주소를 알아야 함
let response = fetch('https://jsonplaceholder.typicode.com/posts').then((res) =>
console.log(res)
);response 변수에 응답 저장
fetch라는 내장함수는 js에서 API 호출을 할 수 있도록 도와주는 내장함수(Promise 반환)
-- Promise를 반환하는 함수는 비동기처리를 하는 함수이고, 이 함수의 처리 결과는 then을 통해 사용 가능
-> fetch가 주소를 통해 API호출을 하고, 결과값이 성공했다면 resolve 호출(res에 값을 담아) -> 콜백함수 실행
-> 결과값(이상)
fetch를 통해 API를 호출하게 되면 API의 결과값을 그냥 반환하는게 아니라 API 성공 객체 자체를 반환하기 때문에 Response라는 객체가 반환됨(결과값의 포장지)
-> 편지를 보내면 우체통에서 편지봉투를 꺼내게 됨
포장지에서 JSON형식의 값을 뜯어오기👇
async function getData(){
let rawResponse = await fetch('https://jsonplaceholder.typicode.com/posts');
let jsonResponse = await rawResponse.json();
console.log(jsonResponse);
}
getData();
//배열에 100개 정상적으로 담겨옮