JavaScript Fetch API 설명

자바스크립트 Fetch API는 웹 브라우저 환경에서 애플리케이션 클라이언트가 서버로 요청을 보내는 간결하고 효율적인 방법을 제공합니다.

최신 자바스크립트 문법을 준수하며 사용법이 매우 간단합니다. 이 글에서는 Fetch API의 다양한 활용법을 안내합니다.

자바스크립트 Fetch API란 무엇인가요?

자바스크립트 Fetch API는 최신 웹 브라우저에서 제공하는 인터페이스로, 프론트엔드에서 서버로 HTTP 요청을 보낼 때 사용됩니다. 기존의 AJAX 방식인 XMLHttpRequest를 대체하는 최신 기술입니다.

전역 함수인 ‘fetch’를 통해 사용할 수 있습니다. 이 함수는 요청을 보내고, 서버로부터의 응답을 처리하는 Promise를 반환합니다. Fetch API를 이용하면 다양한 종류의 HTTP 요청을 손쉽게 구현할 수 있습니다.

다른 방식 대비 Fetch API의 장점

더욱 간결하고 직관적인 인터페이스를 제공하여 학습과 사용이 용이합니다. 결과적으로, Fetch API를 사용하면 코드를 보다 깔끔하게 유지할 수 있습니다. XMLHttpRequest는 복잡한 설정이 필요하며 Fetch API만큼 코드를 간결하게 유지하기 어렵습니다.
Promise를 지원하여 비동기 코드를 보다 효율적으로 작성할 수 있습니다. 반면 XMLHttpRequest는 콜백 함수를 사용해야 하므로 비동기 코드 관리가 복잡해집니다. 이러한 이유로 많은 개발자들이 자바스크립트 Fetch API를 선호합니다.
별도의 라이브러리 없이 브라우저에서 기본적으로 지원됩니다. 추가 라이브러리는 웹 페이지의 로딩 속도를 저하시키고, 번들 크기를 증가시키는 원인이 됩니다.

Fetch API 사용법

여기서는 자바스크립트 Fetch API를 사용하여 다양한 유형의 요청을 처리하는 방법을 알아봅니다. 원하는 코드 편집기를 사용하여 코드를 작성하고, 웹 브라우저에서 실행해 보세요. HTML 파일 내의 <script> 태그 안에 코드를 작성하면 됩니다.

간단한 GET 요청

먼저, 가장 기본적인 GET 요청을 만드는 방법을 살펴보겠습니다. 기본적인 구조는 다음과 같습니다.

fetch(url)

예를 들어, 다음 JSON Placeholder API에서 게시물 데이터를 가져오려면 다음과 같이 작성합니다.

fetch('https://jsonplaceholder.typicode.com/posts');

이 함수 호출은 API 응답이 성공적으로 처리되거나 오류가 발생했을 때의 결과를 담는 Promise 객체를 반환합니다. 따라서 응답에 접근하려면 ‘await’ 키워드를 사용해야 합니다. 단, ‘await’ 키워드는 비동기 함수 내부에서만 사용할 수 있습니다.

따라서 fetch 함수 호출을 비동기 함수로 감싸고, 해당 함수를 호출해야 합니다. 비동기 자바스크립트가 처음이신 분들을 위해 더 자세한 가이드를 참고하시면 도움이 될 것입니다. 아래는 기본적인 코드 예시입니다.

async function getData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    console.log(response);
}

getData();

위 코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다.

콘솔 출력에서 볼 수 있듯이, fetch 함수는 Response 객체를 반환합니다. 이 객체에는 HTTP 상태 코드, 헤더, 그리고 실제 데이터가 담겨있는 본문 속성이 있습니다. 응답 데이터는 JSON 형식의 문자열로 본문에 저장됩니다. 자바스크립트 객체 형태로 데이터를 사용하려면, 이 문자열을 추출하고 JSON 형식으로 변환해야 합니다.

다행히 Response 객체에는 ‘json()’이라는 편리한 메소드가 제공됩니다. 이 메소드는 응답 본문을 읽어 JSON 형식으로 파싱하여 자바스크립트 객체로 변환합니다. 이 메소드는 JSON 형식으로 변환된 객체를 반환하는 Promise를 반환합니다.

주의해야 할 점은, 응답 본문이 유효한 JSON 문자열이 아닐 경우 오류가 발생한다는 것입니다. 따라서 응답 상태 코드가 200 (성공)인 경우에만 JSON 변환을 시도하는 것이 좋습니다.

따라서, 게시물을 가져오는 최종 코드는 다음과 같습니다.

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("오류 발생:", response.status);
    }
}
getData();

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

이는 100개의 게시물 객체가 담긴 배열입니다.

일부 API 엔드포인트는 헤더 정보를 요구합니다. 헤더는 인증 등의 목적으로 사용될 수 있습니다. 자바스크립트 Fetch API는 요청과 함께 헤더를 간편하게 전송하는 기능을 제공합니다. 헤더를 지정하려면, fetch 함수 호출 시 두 번째 인자로 옵션 객체를 전달해야 합니다.

fetch(url, options);

따라서 이전 예제를 헤더를 추가하여 다음과 같이 수정할 수 있습니다.

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts", {
             headers: {
                 'x-auth': '<your auth token>'
             }
         }
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("오류 발생:", response.status);
    }
}
getData();

JSONPlaceholder API는 인증 헤더를 필요로 하지 않기 때문에 위 코드는 이전 코드와 동일하게 동작합니다. 하지만 헤더를 설정하는 방법을 익혀두는 것이 중요합니다.

다른 옵션 설정

헤더를 설정하는 것 외에도, fetch 함수에는 다양한 옵션을 추가로 설정할 수 있습니다. 주로 사용되는 두 가지 옵션은 요청 메소드와 요청 본문 옵션입니다.

다음 예제를 통해 JSONPlaceholder API에 POST 요청을 보내고, 요청 메소드와 요청 본문을 함께 설정하는 방법을 보여드리겠습니다.

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts", {
             method: 'POST',
             body: JSON.stringify({ 
                 title: 'Fetch API',
                 body: 'Lorem Ipsum',
                 userId: 1,
             })
        }
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("오류 발생:", response.status);
    }
}
getData();

옵션 객체에서, ‘method’ 속성에는 원하는 요청 메소드를 지정하고, ‘body’ 속성에는 요청 본문을 지정합니다. 위 예제에서는 ‘POST’ 메소드와 JSON 문자열 형태의 요청 본문을 사용했습니다. 요청 본문은 필요한 속성을 가진 자바스크립트 객체를 JSON.stringify() 메소드를 사용하여 문자열로 변환하여 생성합니다.

브라우저에서 이 코드를 실행하면 다음과 같은 결과가 출력됩니다.

출력 결과는 서버에서 새로 생성된 게시물의 ID를 포함하는 객체입니다. 이곳에서 fetch 함수에 사용할 수 있는 모든 옵션에 대한 자세한 정보를 확인할 수 있습니다.

자바스크립트 Fetch API 사용 시 발생할 수 있는 오류

#1. 네트워크 오류

네트워크 요청 시 오류가 발생하는 것은 흔한 일입니다. fetch 함수는 네트워크 오류가 발생했을 때 성공 또는 실패 여부를 나타내는 Promise를 반환합니다. 따라서 try/catch 블록을 사용하여 네트워크 오류를 효과적으로 처리해야 합니다.

#2. 기타 오류

네트워크 오류 외에도 404, 403, 500 등 다양한 HTTP 오류가 발생할 수 있습니다. Fetch API는 이러한 오류가 발생하더라도 자체적으로 오류를 발생시키지 않습니다. 따라서 응답의 상태 코드를 확인하여 오류 여부를 확인해야 합니다. 앞서 예제에서 보았듯이, 상태 코드가 200일 때만 응답 본문을 JSON으로 파싱하도록 구현했습니다.

#3. CORS 오류

발생할 수 있는 또 다른 일반적인 오류는 CORS 오류입니다. CORS는 Cross-Origin Resource Sharing의 약자입니다. 오리진은 서버의 프로토콜, 호스트, 포트의 조합으로 정의됩니다. 예를 들어, 웹사이트가 localhost의 5500 포트에서 HTTP 프로토콜로 제공된다면, 이 웹사이트의 오리진은 http://localhost:5500이 됩니다.

웹사이트가 다른 오리진인 https://jsonplaceholder.typicode.com에 API 요청을 보내면, 이것은 Cross-Origin 리소스 공유에 해당됩니다. 이 경우, API 서버는 CORS가 활성화되어 있어야 정상적으로 통신이 가능합니다. 때로는 그렇지 않은 경우도 있습니다. 이러한 CORS 오류를 해결하는 가장 일반적인 방법은 CORS를 지원하는 프록시 서버를 통해 요청을 보내는 것입니다.

브라우저 지원

Fetch API는 비교적 최신 기술입니다. CanIUse.com에 따르면, 전 세계 사용자의 약 95%가 Fetch API를 지원하는 브라우저를 사용하고 있습니다.

결론

자바스크립트 Fetch API는 API 요청을 보내는 보다 세련되고 간결한 방법을 제공합니다. 하지만 브라우저 지원이 제한적인 경우, 다른 HTTP 클라이언트 라이브러리를 사용하는 것을 고려해 볼 수 있습니다.