자바스크립트의 fetch API를 활용하면 웹 애플리케이션에서 비동기적으로 데이터를 가져오고 전송할 수 있습니다. 이번 블로그 포스트에서는 웹 티켓팅 시스템을 구현하기 위해 자바스크립트 fetch API를 사용하는 방법에 대해 알아보겠습니다.

fetch API란?

fetch API는 웹 브라우저 내장 API로, 서버와 네트워크 요청을 주고받는 기능을 제공합니다. 이 API는 Promise 기반으로 동작하며, JSON 데이터를 주고받는 데 특히 유용합니다. fetch API는 다음과 같은 형식으로 사용할 수 있습니다.

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 데이터를 처리하는 로직 작성
  })
  .catch(error => {
    // 에러 처리 로직 작성
  });

fetch 함수를 호출하면 지정된 URL로 데이터 요청이 전송되고, 서버로부터 응답을 받으면 화살표 함수로 정의된 다음 단계의 로직이 실행됩니다. 받은 응답은 .json() 메서드를 통해 JSON 데이터로 변환됩니다.

웹 티켓팅 시스템 구현하기

이제 fetch API를 사용하여 웹 티켓팅 시스템을 구현해보겠습니다. 해당 시스템은 사용자가 티켓을 예약하고 결제를 마친 후 티켓 정보를 서버로 전송하는 기능을 포함합니다.

먼저, HTML 파일에는 티켓 예약 폼과 결제 버튼이 있어야 합니다.

<form id="booking-form">
  <input type="text" id="name" placeholder="이름">
  <input type="email" id="email" placeholder="이메일">
  <input type="number" id="quantity" placeholder="수량">
  <button type="button" id="payment-button">결제</button>
</form>

자바스크립트에서는 fetch API를 사용하여 폼 데이터를 서버로 전송하는 함수를 작성합니다.

const submitForm = () => {
  const form = document.querySelector('#booking-form');
  const nameInput = document.querySelector('#name');
  const emailInput = document.querySelector('#email');
  const quantityInput = document.querySelector('#quantity');

  const ticketData = {
    name: nameInput.value,
    email: emailInput.value,
    quantity: quantityInput.value
  };

  const url = 'https://api.example.com/tickets';

  fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(ticketData)
  })
  .then(response => response.json())
  .then(data => {
    // 서버로부터 응답 받은 데이터 처리 로직 작성
  })
  .catch(error => {
    // 에러 처리 로직 작성
  });
};

document.querySelector('#payment-button').addEventListener('click', submitForm);

위의 예제 코드에서, 함수 submitForm은 폼 데이터를 받아와서 JSON 형식으로 변환한 후 지정된 URL로 POST 요청을 보냅니다. fetch 함수의 두 번째 인수로 전달된 객체는 요청에 대한 설정을 담고 있습니다. 애플리케이션이 JSON 데이터를 보낸다는 것을 서버에 알려주기 위해 headers 속성을 설정하였습니다.

서버로부터 응답을 받은 후, 응답 데이터를 화면에 표시하거나 다른 로직을 수행할 수 있습니다.

결론

이번 블로그 포스트에서는 자바스크립트 fetch API를 사용하여 웹 티켓팅 시스템을 구현하는 방법에 대해 알아보았습니다. fetch API는 간단하고 강력한 인터페이스를 제공하여 웹 애플리케이션의 네트워크 요청을 관리할 수 있습니다. 다양한 데이터 요청과 응답을 처리하기 위해 fetch API를 적극적으로 활용해보세요.