#기본기11

개발공부/Javascript

#기본기11_fetch()

킴승 2024. 4. 3. 12:55

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

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

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

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

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

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

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

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

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

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

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

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

GPT씨

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

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

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

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