TIL_fetch API

우리가 흔히 보는 인터넷 사이트를 보면

위의 사진처럼
날씨정보나 뉴스정보같은 실시간으로 변하는 동적인 정보들이 존재한다.

웹사이트를 개발할 때, 이러한 정보들은 요청 API를 통해 받아온다.
그 중 대표적인 fetch API를 이용해 해당 정보를 원격 URL로 불러오는 방법이 있다.

fetch API

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

fetch는 정보를 받아올 url을 전달받아 그 url에서 응답한 결과를 .then이나 .catch등에 전달해준다.

보통, url을 통해 응답을 받으면, 그 응답은 JSON 객체로 이루어져 있다.

우리는 이 응답에서 우리가 원하는 정보를 받기 위해 .json()을 이용하여 우리에게 익숙한 객체의 형태로 가공해준다.

위의 사진의 경우, 응답결과가 유사배열로 나왔고 실제 배열에 접근하기 위해서

fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json.data))

.data 즉, 객체의 dot notation을 이용하여 접근할 수 있었다.

다시 정리하자면, fetch API는 url을 전달받아 객체 형태의 응답을 받아오고, 그 응답에서 우리가 원하는 대로 가공하여 사용하는 방식이다.