[CS] fetch(네트워크 요청) Day-27

비동기 요청의 가장 핵심은 네트워크 요청이라고 볼 수 있습니다.

네트워크 요청 형태는 다양하지만 URL로 요청하는 경우가 많습니다. 이걸 가능하게 만들어주는 것이 fetch API 입니다.

fetch API

특정 URL로부터 정보를 받아오는 역할을 합니다. 이 과정은 비동기로 이루어지기 때문에 시간이 걸릴 수 있습니다. blocking 발생 시 UX가 떨어지기 때문에 로딩 창을 띄우는 경우도 있습니다.

fetch API 형식

let url ="kakao.com/최신뉴스"
fetch(url)
  .then((response) => response.json()) // json() 메소드를 통해 변환 후 다음 promise로 전달
  .then((json) => console.log(json)) // console에 json을 출력
  .catch((error) => console.log(error)); // err 발생 시 err 출력

Event Loop

블로킹 함수 문제를 비동기를 통해 해결할 수 있습니다. 비동기는 setTimeout등을 통해서 동기적으로 구현할 수도 있습니다. 이렇게 비동기를 동기적으로 구현할 때 이벤트 루프와 동시성이 역할을 하게 됩니다.

=> 클릭 막 하면 스텍에 쌓이기 때문에 큰일난다를 깨달았다..