#기본기11_fetch()

fetch()는 정말 많이 사용하는 메서드이다.

fetch() 메서드를 통해 웹브라우저에서 제공하는 비동기 네트워크 통신(대표적으로 AJAX)을 할 수 있다.

* AJAX(Asynchronous Javascript and XML) : 페이지 새로고침없이 동적으로 데이터 로드 및 업데이트 가능

기본적으로 fetch()메서드는 Promise를 반환하기 때문에, 비동기적으로 데이터를 가져올 수 있다.

 

GPT에게 fetch()에 대해 물어봤다.

fetch()의 주요 특징과 사용법은 다음과 같다.

1. HTTP 요청: fetch() 메서드를 사용하여 GET, POST, PUT, DELETE 등 다양한 HTTP 요청을 보낼 수 있습니다.
2. Promise 반환: fetch() 메서드는 네트워크 요청에 대한 응답을 처리하기 위해 Promise를 반환합니다.
3. CORS 지원: 기본적으로 Same Origin Policy에 따라 브라우저에서 Cross-Origin 요청이 차단됩니다. fetch() 메서드는 CORS(Cross-Origin Resource Sharing)를 지원하여 다른 도메인의 리소스에 접근할 수 있도록 합니다.
4. JSON 파싱: .json() 메서드를 사용하여 응답을 JSON 형식으로 파싱할 수 있습니다.
5. 에러 처리: .catch() 메서드를 사용하여 네트워크 요청 중 발생하는 오류를 처리할 수 있습니다.

fetch()메서드의 기본적인 문법

fetch(url [, options])
  .then(response => {
    // 응답을 처리
  })
  .catch(error => {
    // 오류를 처리
  });

1. url: 요청할 리소스의 URL입니다. 이는 필수 매개변수입니다.
2. options (선택사항): 요청에 대한 추가 옵션을 지정합니다. 이는 객체 형태로 전달되며, 다양한 옵션을 설정할 수 있습니다. 주요 옵션은 다음과 같습니다:
   • method: 요청 메서드를 지정합니다. 기본값은 "GET"입니다.
   • headers: 요청 헤더를 지정합니다. 이는 헤더의 키-값 쌍으로 이루어진 객체입니다.
   • body: 요청 본문을 지정합니다. 이는 요청 메서드가 "POST"나 "PUT" 등인 경우에 사용됩니다.
   • mode: 요청 모드를 지정합니다. "cors", "no-cors", "same-origin" 등이 가능합니다.
   • credentials: 인증 정보를 포함시킬지 여부를 지정합니다.
   • cache: 캐시 옵션을 지정합니다.
   • 등등
3. .then(): fetch() 메서드는 Promise를 반환하며, 성공적인 응답을 처리하기 위해 .then() 메서드를 사용합니다. .then() 메서드에 전달되는 콜백 함수는 응답 객체를 받아서 처리합니다.
4. .catch(): 네트워크 요청이 실패했을 때 발생하는 오류를 처리하기 위해 .catch() 메서드를 사용합니다. .catch() 메서드에 전달되는 콜백 함수는 발생한 오류를 받아서 처리합니다.

+

await와 fetch를 함께 사용하면 비동기 코드를 동기적(순차적)으로 실행할 수 있다.

await fetch() // fetch가 완료되면 다음코드를 실행한다.

// fetch와 await를 활용한 코드

const receiveOtp = await fetch('api url', {
        method: 'POST', // 작성안하면 기본값은 GET
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            name: userNameValue,
            mobile: userMobileValue,
        })
    });
    const otpNumber = await receiveOtp.json();

    if (otpNumber.code === 400) {
        alert(otpNumber.message);
    } 
    if (otpNumber.code === 200) {
        if (!mobileDiv.contains(authNumberSection) || !mobileDiv.contains(authNumberResend)) {
            mobileDiv.appendChild(authNumberSection);
            mobileDiv.appendChild(authNumberResend);
            mobileNumber.appendChild(otpTimerSpan);
        }
        
        (생략)

 

그런데 fetch() API 라고 많이 말하는데 API가 정확히 뭘까?

Application Programming Interface의 약자로 응용프로그램 간에 데이터를 주고받고 서비스를 사용하는데 필요한 규칙세트를 제공하는 인터페이스를 말한다. API문서는 API활용법을 알려준다.

 

API의 종류 (GPT씨)

1. 웹 API: 웹 서비스 또는 웹 애플리케이션에서 사용되는 API입니다. RESTful API, SOAP API 등이 있습니다. 예를 들어, 페이스북 API는 외부 애플리케이션이 페이스북의 데이터를 읽고 쓰는 데 사용할 수 있는 웹 API의 한 예입니다.
2. 라이브러리 API: 소프트웨어 라이브러리에서 제공되는 API로, 라이브러리의 기능 및 클래스와 같은 프로그래밍 인터페이스를 제공합니다. JavaScript의 DOM API나 Python의 NumPy API 등이 있습니다.
3. 운영 체제 API: 운영 체제에서 제공되는 기능에 접근하기 위한 API입니다. 예를 들어, Windows API는 Windows 운영 체제에서 시스템 리소스를 관리하고 프로그램을 제어하는 데 사용됩니다.

 

그런데 RESTful API가 뭐지? 이건 진짜 안외워진다..

 

GPT씨

RESTful API는 Representational State Transfer(REST) 아키텍처 스타일을 따르는 API를 의미합니다. REST는 네트워크 아키텍처를 위한 설계 원칙의 집합으로, 자원을 표현하고 그 자원에 대한 상태를 전송하는 방법을 정의합니다. RESTful API는 이러한 REST 원칙을 따르는 웹 API를 말합니다.

 

RESTful API의 주요 특징은 다음과 같습니다:

1. 자원 (Resources): 모든 자원은 고유한 식별자(URI)를 가지며, 이를 통해 접근됩니다. 예를 들어, /users, /products와 같은 URI는 각각 사용자와 제품과 같은 자원을 나타냅니다.
2. 표현 (Representation): 클라이언트와 서버 간에 자원의 상태가 전송될 때 사용되는 데이터 표현입니다. 일반적으로 JSON이나 XML 형식으로 표현됩니다.
3. 상태 전송 (State Transfer): 클라이언트가 서버와 상호작용하는 데 필요한 모든 정보가 요청에 포함되어 있어야 합니다. 즉, 요청에 필요한 모든 정보가 URI, 헤더, 쿼리 매개변수 등에 포함되어야 하며, 서버는 이를 통해 클라이언트의 상태를 이해할 수 있어야 합니다.
4. 통합된 인터페이스 (Uniform Interface): RESTful API는 자원에 대한 표준화된 인터페이스를 제공해야 합니다. 이를 통해 클라이언트가 자원을 조작하는 방법을 알 수 있으며, 서버와 클라이언트 간의 상호작용이 단순화됩니다.
5. 무상태성 (Statelessness): 각 요청은 서버에 대한 충분한 정보를 포함하여 완전한 요청이어야 합니다. 서버는 각 요청을 개별적으로 처리하며, 이전 요청과의 상태를 유지하지 않습니다. 이를 통해 서버의 확장성이 향상되고, 시스템의 의존성이 줄어듭니다.

RESTful API는 웹 애플리케이션 간의 통신을 위한 표준적인 방법을 제공하여 상호운용성을 향상시키고 개발을 간소화합니다. 따라서 많은 웹 서비스와 애플리케이션에서 RESTful API를 사용하여 데이터를 공유하고 상호작용합니다.