S2_U3_CH4. fetch API

Judevv·2023년 5월 17일

Fetch

코드스테이츠 SEB FE BOOTCAMP

목록 보기

43/55

Chapter 4. fetch API

학습 목표

fetch에 대해 이해할 수 있다.

fetch를 이용하여 데이터를 불러올 수 있다.

4-1. fetch를 이용한 네트워크 요청

흔히 볼 수 있는 포털 사이트에는 시시각각 변하는 정보와 늘 고정적으로 받는 정보가 따로 분리되어 있는 경우가 많음
- 뉴스나 날씨/미세먼지 정보(동적으로 받아야하는 정보)
웹 사이트에서는 해당 정보만 업데이트 하기 위해 요청 API를 이용함

💡) API가 뭐냐고?
프로그램이 다른 프로그램과 정보를 주고 받을 수 있도록 하는 역할을 하는 규칙과 도구의 집합!
프로그램들이 서로 소통하고 상호작용하는 방법을 정의하는 일종의 계약이라고 할 수 있지.
어떤 종류의 데이터를 요청할 수 있는지, 어떻게 요청해야 하는지, 어떤 종류의 응답을 받을 수 있는지에 대한 규칙을 제공해!

그 중 대표적인 fetch API를 이용해 해당 정보를 원격 URL로부터 불러오는 경우를 이번 챕터에서 배움

fetch API

웹 브라우저에서 제공하는 JavaScript 인터페이스
네트워크 요청을 보내고 응답을 처리하는 기능 제공
- 특정 URL로부터 정보를 받아오는 역할
XMLHttpRequest(XMLHttp)객체와 비슷한 역할을 수행
하지만 더 간편하고 유용한 사용법 제공
Promise 기반으로 동작
- 비동기로 이루어짐(경우에 따라 다소 시간이 걸릴 수 있음)
시간이 소요되는 작업을 요구할 경우 → blocking이 발생하면 안됨 → 그래서 특정 DOM에 정보가 표시될 때까지 로딩창을 대신 띄우는 경우가 있음
```
let url =
 "https://koreanjson.com/posts/1";
fetch(url)
 .then((response) => response.json())
 .then((json) => console.log(json))
 .catch((error) => console.log(error));
```

💡) fetch API를 사용하여 HTTP 요청을 보내는 방법
1. fetch() 함수를 호출하여 요청 시작

fetch 함수는 url과 함께 사용하고, 필요에 따라 두 번째 매개변수인 옵션 객체를 전달할 수 있다.

옵션은 MDN에서 참고
fetch(url, options)
  .then(response => {
    // 응답을 처리하는 로직
  })
  .catch(error => {
    // 에러를 처리하는 로직
  });
fetch 함수는 Promise 객체를 반환하기 때문에 응답을 처리하기 위해 then() 메서드를 체인으로 연결할 수 있다.

then() 메서드는 응답 객체를 매개변수로 받으며, 해당 응답에 대한 처리 로직을 구현함

응답 객체를 사용하여 응답 상태코드, 헤더, 바디 데이터 등을 확인할 수 있음
fetch(url, options)
  .then(response => {
    if (response.ok) {
      return response.json(); // JSON 형식의 응답 데이터 추출
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    // JSON 데이터를 처리하는 로직
  })
  .catch(error => {
    // 에러를 처리하는 로직
  });
참고! Fetch API는 모던 브라우저에서 기본적으로 지원되지만, 구형 브라우저에서는 일부 지원이 제한적일 수 있다. 이 경우에는 Fetch API의 폴리필(polyfill)을 사용하여 호환성을 보완할 수 있다.
* 폴리필(polyfill)
- 웹 개발에서 호환성을 위해 사용되는 개념으로, 기능이나 API를 지원하지 않는 구형 브라우저에서 새로운 기능이나 API를 사용할 수 있도록 도와준다.
- 대개 JavaScript 코드로 작성되며, 특정 기능을 검사하고, 그 기능이 없는 경우에 대체 구현을 제공한다.
- 주로 특정 라이브러리나 프레임워크에서 제공된다.

💡) 더 알아보기

XMLHttpRequest(XMLHttp) 객체

웹 브라우저에서 제공하는 JavaScript API, 서버와의 비동기 통신을 위해 사용한다.

웹 페이지를 새로 고치지 않고도 서버로부터 데이터를 요청하거나 서버로 데이터를 보낼 수 있다.

Blocking

프로그램이나 작업의 실행 흐름이 특정 작업이 완료될 때까지 일시적으로 멈추는 현상이다.

해당 작업이 완료될 때까지 다른 작업을 수행할 수 없다.

데이터를 가져오거나 전송하는 네트워크 요청이나 파일 입출력은 일반적으로 블로킹 작업

파일을 업로드할 때 열리는 파일 탐색기와 같은 것이 떠 있을 때, 다른 작업을 하려고 할 경우, 경고음이 들리면서 아무 것도 하지 못하는 상황처럼??

웹 애플리케이션에서 브라우저의 JavaScript 코드가 블로킹 작업을 수행하는 경우, 해당 작업이 완료되기 전까지 사용자 인터페이스가 응답하지 않을 수 있는데, 사용자는 애플리케이션의 멈춤 현상을 경험하게 되고, 웹 페이지가 느리게 로드되는 것처럼 느껴질 수 있다.

블로킹 작업을 피하기 위해 비동기적인 접근 방식을 사용하는 것이 일반적으로 권장된다.

4-2. axios

fetch API와 비슷한 역할을 하는 라이브러리
브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
fetch API보다 사용이 간편하면서 추가적인 기능들이 포함

Fetch API vs Axios

Axios	Fetch API
써드파티 라이브러리로 설치가 필요	빌트인 API라 별도의 설치 필요 없음
자동으로 JSON데이터 형식으로 변환	.json() 메서드를 사용