JavaScript 응용5 복습

Udemy - 한입크기로 잘라 먹는 리액트

API API 호출 Fetch

---

---

JavaScript 응용5

📌 API & Fetch

✔️ 핵심 Point

• 이전 시간에 배운 비동기처리와 API 호출까지 모두 할 줄 알면 자바스크립트로 할 수 있는 굉장히 많은 어플리케이션들을 직접 개발하고 운영할 수 있게 됨
• 연관 : API, Fetch

📌 API (Application Programming Interface)

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

• 쉬운 이해 : 손님이 음식점에서 웨이터를 통해 음식을 주문하는 과정은 브라우저에 접속해서 정보를 확인하는 과정과 유사 (대입하여 생각하기)

• 손님 = Browser(Client) | 웨이터 = Server | 냉장고 = Database

1) Request (데이터 요청)
2) Query (데이터 검색)
3) Query Result (데이터 찾기)
4) Response (요청데이터 전달)

• 이 중에서 프론트엔드 개발자가 하는 일

Client를 통해서 Server에서 1번의 데이터 요청(Request)하고
4번의 요청 데이터 전달(Response) 하는 이 과정을 API 호출이라고 부름

• API를 호출한다는 것은 다른 프로그램한테 데이터를 받기 위해 말을 건다(= 대화나 연결을 할 수 있는 다리)라고 생각하기

• 어떻게 보면 함수랑도 비슷한데, 함수도 호출해서 원하는 데이터를 반환받기 위해서 쓰는 것과 동일하지만 그런데 이 API 호출은 자바스크립트에서 만드는 함수와 달리 큰 차이점은 응답을 언제 받을지 확실히 알 수 없다는 점.
• API 호출은 항상 우리 컴퓨터 안에서만 일어나는 것은 아님 (Client와 Server는 보통 다르다) 또한 응답해줄 때까지의 시간은 인터넷 연결속도, 서버의 부하 상태 등등으로 인해 예상할 수 없고 때로는 완전히 실패하는 경우도 있음. (그래서 지난 번에 Promise 객체에 reject가 있는 거기도 함)
• 그래서 이런 언제 끝나는지 시간을 예상할 수 없는 것을 모두 동기적으로 처리할 수 없기 때문에 이런 API 호출에는 Promise 객체를 이용하여, 비동기호출을 하게 됨.

📝 특정 서버에 데이터를 직접 요청하고 그 데이터를 받아보는 API 호출 예제

• API는 보통 인증된 누군가에 한해서만 그런 요청에 응답하게 되는 경우가 대다수임
• 구글 > json placeholder 검색
• JSON Placeholder : 개발자들을 위해서 무료로 조건없이 API 호출에 대해서 더미데이터를 응답해주는 서비스 (Open API)
• 주소(복사하기)는 누구에게 요청할 것인지, json 형식으로 나타나는 data (이런 식으로 응답하겠다-응답결과)

// fetch는 API 호출할 수 있도록 도와주는 내장함수
// function fetch(input: RequestInfo, init?: RequestInit): Promise<Response>)
// Promise를 반환하는 함수는 비동기처리하는 함수이고, 이 함수의 처리 결과는 then을 통해서 사용할 수 있다.

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

중간 확인

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

// 이 포장지에서 json 형식의 값을 뜯어보자

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

getData(); 

확인

---

간단한 응용

• Public API https://github.com/public-apis/public-apis
• Dog API https://dog.ceo/dog-api/documentation/

• 개 이미지 가져오기 이거는 다음에..