Blog

최근 웹 개발 영역에서는 JavaScript Fetch API가 더욱 주목받고 있습니다. 특히, 클라이언트 측에서 직접 API를 호출하는 방식이 일반화됨에 따라, 많은 개발자들이 Fetch API를 통해 데이터를 손쉽게 가져오고 처리하려고 하고 있습니다. 이번 글에서는 Fetch API의 기능과 사용 방법에 대해 자세히 알아보겠습니다.

Fetch API란 무엇인가?

Fetch API는 브라우저에서 제공하는 내장 함수로, 비동기적으로 네트워크 요청을 처리할 수 있게 해주는 기능입니다. 기존의 AJAX 방식보다 간편하고 효율적인 방식으로 API 호출을 가능하게 합니다. Fetch API를 활용하면 다양한 HTTP 요청을 수행하고, 서버로부터 데이터를 수신하거나 전송할 수 있습니다.

기본 사용법

Fetch API는 기본적으로 두 가지 인자를 받습니다. 첫 번째 인자는 요청할 URL이며, 두 번째 인자는 옵션 객체입니다. 이 옵션 객체를 통해 HTTP 메서드, 헤더 정보, 요청 본문 등을 설정할 수 있습니다. Fetch API를 사용하면 Promise 객체가 반환됩니다. 이 Promise는 API 호출의 성공 여부에 따라 해결되거나 거부됩니다.

• URL: 서버 API의 주소
• 옵션 객체: 요청 메서드 및 헤더 설정

다음은 Fetch API를 사용하여 데이터를 가져오는 예제입니다:

fetch('https://api.example.com/data')
 .then(response => {
  if (!response.ok) {
   throw new Error('Network response was not ok');
  }
  return response.json();
 })
 .then(data => console.log(data))
 .catch(error => console.error('Fetch error:', error));

GET 요청을 통한 데이터 가져오기

가장 기본적인 HTTP 요청 방식인 GET은 특정 리소스의 데이터를 가져올 때 사용됩니다. Fetch API는 기본적으로 GET 요청을 지원하므로, 추가적인 설정 없이도 데이터를 쉽게 요청할 수 있습니다. 다음은 JSONPlaceholder라는 공개 API를 통해 GET 요청을 보내는 예시입니다:

fetch('https://jsonplaceholder.typicode.com/posts/1')
 .then(response => response.json())
 .then(data => console.log(data));

이 코드는 해당 URL에서 JSON 형식의 데이터를 가져와서 콘솔에 출력합니다. 응답 결과는 JavaScript 객체로 변환되며, 프로그램에서 쉽게 사용할 수 있습니다.

POST 요청으로 데이터 전송하기

POST 메서드는 서버에 새 데이터를 전송할 때 사용됩니다. 요청 본문에 데이터를 담아 전송할 수 있으며, 그에 따라 서버에서 새로운 리소스가 생성됩니다. 다음은 POST 요청의 예시입니다:

fetch('https://jsonplaceholder.typicode.com/posts', {
 method: 'POST',
 headers: {
  'Content-Type': 'application/json'
 },
 body: JSON.stringify({
  title: 'New Post',
  body: 'This is the content of the new post.',
  userId: 1
 })
})
.then(response => response.json())
.then(data => console.log(data));

위 코드에서는 POST 요청을 통해 새로운 게시물을 생성하는 과정을 보여줍니다. 요청 본문은 JSON 문자열로 변환하여 서버에 전달합니다.

PUT 및 DELETE 요청 사용하기

PUT 메서드는 기존 리소스를 업데이트할 때 사용되며, DELETE 메서드는 리소스를 삭제할 때 활용됩니다. PUT 요청의 사용 예시는 다음과 같습니다:

fetch('https://jsonplaceholder.typicode.com/posts/1', {
 method: 'PUT',
 headers: {
  'Content-Type': 'application/json'
 },
 body: JSON.stringify({
  id: 1,
  title: 'Updated Post',
  body: 'This post has been updated.',
  userId: 1
 })
})
.then(response => response.json())
.then(data => console.log(data));

DELETE 요청의 예시는 다음과 같습니다:

fetch('https://jsonplaceholder.typicode.com/posts/1', {
 method: 'DELETE'
})
.then(response => {
 if (response.ok) {
  console.log('Resource deleted');
 }
});

Fetch API의 이점

Fetch API는 다음과 같은 장점을 제공합니다:

• 간편한 구문: Fetch API는 직관적인 문법을 제공하여 사용이 용이합니다.
• Promise 기반: 비동기 처리를 쉽게 처리할 수 있습니다.
• 다양한 메서드 지원: GET, POST, PUT, DELETE 요청을 간편하게 수행할 수 있습니다.
• JSON 자동 변환: 응답 데이터를 JSON 형식으로 쉽게 변환할 수 있습니다.

결론

Fetch API는 현대적인 웹 애플리케이션에서 매우 유용하게 사용되는 기능입니다. 비동기적으로 데이터를 요청하고 처리하는 방식은 사용자 경험을 향상시킬 수 있으며, 다양한 API 호출 작업을 간편하게 수행할 수 있도록 돕습니다. Fetch API의 다양한 기능을 익히고 활용하여 효율적인 웹 개발을 진행하시기 바랍니다.

자주 물으시는 질문