JavaScript 응용(API 호출)

API 호출 : client에서 필요한 정보를 server에 요청하고 응답을 받아오기 위해 하는 동작

📌 API 호출을 비동기적으로 처리해야하는 이유?
정보를 요청할 서버에서 언제 데이터를 받을 수 있을지 정확하지 않기 때문에 작업의 성공과 실패를 확인할 수 있는 Promise와 async, await을 사용함

let rawResponse = fetch("https://jsonplaceholder.typicode.com/posts");

rawResponse.then((res) => console.log(res));
// Response {type: "cors", url: "https://jsonplaceholder.typicode.com/posts", redirected: false…}
// fetch의 결과값으로 Response 객체가 출력됨
// Response 객체는 쉽게 말해서 우리가 원하는 데이터가 담겨있는 포장지

• fetch : JS 내장함수. API를 호출할 수 있게 하는 기능.
  인자로 정보를 요청할 URL(가져오고자 하는 리소스의 경로)을 받고 Promise를 반환함 => then 메소드를 사용해서 결과값을 이용할 수 있음
• 우리가 원하는 정보는 JSON 형식으로 되어있는 객체 배열

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

getData();
// (100) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

API 호출 내용은 봐도봐도 부족한 느낌ㅠㅠ 중요한 부분이니 연습하며 꼭 숙지하기..