웹 티켓팅 시스템은 사용자가 이벤트 티켓을 구매하고 예약하는데 사용되는 시스템입니다. 이번 블로그 게시물에서는 자바스크립트의 fetch API를 사용하여 웹 티켓팅 시스템을 구현하는 방법에 대해 알아보겠습니다.

fetch API란?

fetch API는 웹 브라우저에서 서버와 데이터를 주고받을 수 있게 해주는 기능입니다. 이전에는 XMLHttpRequest를 사용하여 데이터를 가져오고 보냈지만, fetch API는 좀 더 간단하고 강력한 기능을 제공합니다. fetch API는 Promise 기반으로 동작하며, JSON, XML, 텍스트 등 다양한 형식의 데이터를 주고받을 수 있습니다.

티켓 정보 가져오기

티켓 정보를 가져오기 위해 웹 서버에 GET 요청을 보내는 예제를 살펴보겠습니다. 이 예제에서는 JSON 형식으로 데이터를 가져오는 것을 전제로 합니다.

fetch('/tickets') // 티켓 정보를 가져오기 위해 '/tickets' 경로로 GET 요청을 보냄
  .then(response => response.json()) // 응답 데이터를 JSON 형식으로 변환
  .then(data => {
    console.log(data); // 티켓 정보 출력
  })
  .catch(error => {
    console.error('Error:', error); // 에러 발생 시 에러 메시지 출력
  });

위의 코드에서는 fetch 함수를 사용하여 ‘/tickets’ 경로로 GET 요청을 보냅니다. 서버에서 응답이 오면 해당 응답을 JSON 형식으로 변환합니다. 그리고 변환된 데이터를 콘솔에 출력합니다. 만약 에러가 발생하면 catch 블록에서 에러 메시지를 출력합니다.

티켓 예약하기

티켓을 예약하기 위해 웹 서버에 POST 요청을 보내는 예제를 살펴보겠습니다. 이 예제에서는 예약하려는 티켓의 정보를 JSON 형식으로 전송하는 것을 전제로 합니다.

const ticket = {
  eventId: 1,
  quantity: 2
};

fetch('/reservations', {
  method: 'POST', // POST 요청 설정
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(ticket) // 티켓 정보를 JSON 형식으로 변환하여 요청에 첨부
})
  .then(response => response.json())
  .then(result => {
    console.log(result); // 예약 결과 출력
  })
  .catch(error => {
    console.error('Error:', error);
  });

위의 코드에서는 fetch 함수의 두 번째 매개변수로 객체를 전달하여 POST 요청을 보내고 있습니다. 이 객체의 method 속성을 ‘POST’로 설정하여 POST 요청을 보냅니다. headers 속성에는 요청 헤더에 포함될 내용을 설정하고, body 속성에는 요청에 첨부할 데이터를 JSON 형식으로 변환하여 설정합니다. 서버에서 예약 결과를 받으면 그 결과를 콘솔에 출력합니다.

결론

이번 블로그 게시물에서는 자바스크립트의 fetch API를 사용하여 웹 티켓팅 시스템을 구현하는 방법에 대해 살펴보았습니다. fetch API를 사용하면 간단하고 강력한 웹 서버와의 통신을 구현할 수 있습니다. 티켓 정보를 가져오는 예제와 티켓 예약하는 예제를 통해 fetch API의 사용법을 알아보았습니다. 이 예제들을 참고하여 자신만의 웹 티켓팅 시스템을 구현해보세요!