이번 포스팅에서는 자바스크립트 fetch API를 활용하여 웹 서버 기능을 개발하는 방법을 알아보겠습니다.

Fetch API란?

Fetch API는 웹 개발에서 데이터를 비동기적으로 가져오는 용도로 사용되는 API입니다. 이 API는 HTTP 요청을 보내고 서버에서 응답을 받을 수 있는 강력한 기능을 제공합니다. 이전에는 주로 XMLHttpRequest 객체를 사용하여 데이터를 가져왔지만, Fetch API는 좀 더 간결하고 직관적인 방식으로 데이터를 처리할 수 있습니다.

Fetch API 기본 사용법

Fetch API를 사용하기 위해서는 fetch() 함수를 호출해야 합니다. 이 함수는 첫 번째 인자로는 URL을, 두 번째 인자로는 옵션 객체를 전달합니다.

fetch(url, options)
  .then(response => {
    // 응답을 처리하는 코드
  })
  .catch(error => {
    // 에러를 처리하는 코드
  });

우선 가장 기본적인 사용법을 살펴보겠습니다. 아래 예제는 GET 요청을 보내고 응답을 처리하는 예제입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 서버로부터 받은 데이터를 처리하는 코드
  })
  .catch(error => {
    // 에러 처리 코드
  });

위 예제에서는 fetch() 함수를 통해 ‘https://api.example.com/data’ URL에 GET 요청을 보내고, .then() 메소드에서 서버로부터 받은 응답을 처리합니다. 응답은 JSON 형태로 파싱하여 사용할 수 있습니다.

웹 서버 기능 개발 예제

이제 실제로 웹 서버 기능을 개발하는 예제를 살펴보도록 하겠습니다. 예를 들어, 사용자가 웹 애플리케이션 내의 폼을 작성하고 제출하면 서버로 데이터를 전송하고 저장하는 기능을 개발한다고 가정해봅시다.

<form id="myForm">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

위 HTML 코드는 간단한 입력 폼을 가지고 있습니다. 사용자가 폼을 작성하고 제출하면 아래와 같이 자바스크립트 코드를 작성하여 서버로 데이터를 전송하고 응답을 처리할 수 있습니다.

document.getElementById('myForm').addEventListener('submit', function (e) {
  e.preventDefault(); // 폼 기본 제출 동작 방지

  const formData = new FormData(this); // 폼 데이터 가져오기

  fetch('https://api.example.com/submit', {
    method: 'POST',
    body: formData
  })
    .then(response => response.json())
    .then(data => {
      // 서버로부터 받은 응답을 처리하는 코드
    })
    .catch(error => {
      // 에러 처리 코드
    });
});

위 코드에서는 submit 이벤트를 감지하여 폼의 기본 동작을 제거하고, FormData 객체를 사용하여 폼 데이터를 가져옵니다. 이후 fetch() 함수를 사용하여 POST 요청을 보내고, 서버로부터 받은 응답을 처리합니다.

위 예제는 fetch API를 사용하여 간단한 웹 서버 기능을 개발하는 방법을 알려드렸습니다. Fetch API의 다양한 옵션과 활용 방법에 대해 더 알아보고 싶다면 MDN 웹 문서를 참고해주세요.