자바스크립트의 fetch API를 사용하면 쉽게 서버로부터 데이터를 가져올 수 있습니다. 이 글에서는 fetch API를 사용하여 데이터를 가져오는 방법에 대해 알아보겠습니다.

fetch API란?

fetch API는 웹 브라우저에서 네트워크 요청을 보내고 응답을 받는 기능을 제공하는 자바스크립트의 API입니다. 기본적으로 HTTP 요청을 보내고 응답을 받는 기능을 제공하지만, 다른 프로토콜에도 사용할 수 있습니다.

fetch 함수를 이용한 데이터 가져오기

fetch 함수는 Promise를 반환하며, 비동기적으로 데이터를 가져올 수 있습니다. 이 함수를 사용하여 원하는 URL로 요청을 보내고, 서버의 응답을 처리할 수 있습니다. 아래는 fetch 함수를 사용하여 데이터를 가져오는 예제 코드입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // 데이터 처리 로직을 작성합니다.
  })
  .catch(error => {
    console.error('데이터를 가져오는데 문제가 발생했습니다.', error);
  });

위의 코드에서는 fetch('https://api.example.com/data')와 같이 fetch 함수를 사용하여 서버로 요청을 보냅니다. 그리고 .then(response => response.json())과 같이 체이닝된 then 메서드를 사용하여 응답 데이터를 JSON 형식으로 변환합니다. 마지막으로 .then(data => { ... })와 같이 데이터를 처리하는 로직을 작성할 수 있습니다.

fetch API 옵션 설정하기

fetch 함수를 사용할 때, 다양한 옵션을 설정할 수 있습니다. 아래는 일반적으로 사용되는 옵션 몇 가지입니다.

• method: HTTP 요청 메서드를 설정합니다. 기본값은 GET입니다.
• headers: HTTP 요청 헤더를 설정합니다.
• body: HTTP 요청 본문을 설정합니다.
• mode: Cross-Origin 요청 처리 방식을 설정합니다. 기본값은 cors입니다.

예를 들어, POST 요청을 보내거나 특정 헤더를 추가하려면 아래와 같이 옵션을 설정할 수 있습니다.

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  },
  body: JSON.stringify({ name: 'John Doe' })
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // 데이터 처리 로직을 작성합니다.
  })
  .catch(error => {
    console.error('데이터를 가져오는데 문제가 발생했습니다.', error);
  });

요약

이제 자바스크립트 fetch API를 사용하여 데이터를 가져오는 방법에 대해 알아보았습니다. fetch 함수를 사용하면 간편하게 서버로부터 데이터를 요청하고 처리할 수 있습니다. fetch API를 적절히 활용하여 웹 애플리케이션에서 필요한 데이터를 가져와 사용해보세요.