웹 애플리케이션 개발 시 중요한 부분은 사용자의 활동을 기록하고 이벤트를 로깅하는 것입니다. 이를 통해 앱의 동작을 이해하고 사용자 경험을 개선할 수 있습니다. 이번 포스트에서는 자바스크립트의 fetch API를 사용하여 웹 앱 로깅을 수행하는 방법에 대해 알아보겠습니다.

fetch API란?

fetch는 웹 개발에서 서버와 HTTP 요청-응답을 주고받는 기능을 간편하게 구현할 수 있는 API입니다. 이전에는 XMLHttpRequest를 사용했지만 fetch는 더 간결하고 직관적인 사용법을 제공합니다. 이 API를 사용하여 서버에 로그를 기록하는 것은 웹 애플리케이션 모니터링과 디버깅에 도움이 됩니다.

fetch API를 사용한 로깅 예제

간단한 로깅 시스템을 만들어 보겠습니다. 사용자가 웹 앱에서 특정 동작을 수행할 때마다 해당 정보를 서버에 로깅하는 예제입니다.

function logEvent(eventName, eventData) {
  // 로깅할 데이터 생성
  const logData = {
    event: eventName,
    data: eventData,
    timestamp: new Date().toISOString()
  };

  // POST 요청으로 로그 전송
  fetch('/api/logs', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(logData)
  })
  .then(response => {
    if (response.ok) {
      console.log('로그 전송 성공');
    } else {
      console.error('로그 전송 실패');
    }
  })
  .catch(error => {
    console.error('로그 전송 중 오류 발생:', error);
  });
}

위의 예제 코드는 logEvent 함수를 정의합니다. 이 함수는 두 개의 인자를 받습니다. 첫 번째 인자는 이벤트의 이름(eventName)이고, 두 번째 인자는 이벤트에 대한 데이터(eventData)입니다.

logEvent 함수 내부에서는 로깅할 데이터를 생성한 뒤, fetch를 사용하여 POST 요청으로 서버에 데이터를 전송합니다. 데이터는 JSON 형식으로 전달되며, Content-Type 헤더를 설정해야 합니다. 응답이 성공적으로 도착하면 콘솔에 ‘로그 전송 성공’ 메시지가 출력되고, 실패한 경우 ‘로그 전송 실패’ 메시지가 출력됩니다. 또한, 오류가 발생하면 ‘로그 전송 중 오류 발생’ 메시지가 출력됩니다.

로깅 시나리오 예시

이제 위에서 작성한 logEvent 함수를 사용하여 간단한 로깅 시나리오를 예시로 살펴보겠습니다. 웹 앱에서 버튼을 클릭할 때마다 이벤트가 로그로 전송되도록 구현해 보겠습니다.

const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
  logEvent('buttonClick', {
    buttonId: this.id,
    clickedAt: new Date().toISOString()
  });
});

위의 예시 코드에서는 myButton ID를 가진 버튼 엘리먼트를 선택하고, 클릭 이벤트가 발생할 때 logEvent 함수를 호출합니다. eventName은 ‘buttonClick’으로 설정되고, eventData는 버튼의 ID와 클릭한 시각으로 구성됩니다. 이벤트가 발생할 때마다 해당 정보가 서버에 로깅됩니다.

결론

이번 포스트에서는 자바스크립트의 fetch API를 사용하여 웹 앱 로깅을 수행하는 방법을 살펴보았습니다. fetch API는 간편하고 직관적인 요청-응답 기능을 제공하여 서버와의 통신을 개선하는 데 도움을 줍니다. 웹 앱 로깅을 효과적으로 구현해야 사용자의 동작을 파악하고 앱의 성능을 개선할 수 있습니다.