웹 앱을 개발할 때 중요한 부분은 사용자의 활동을 로깅하고 분석하는 것입니다. 이를 통해 앱의 성능을 개선하거나 사용자의 행동 패턴을 이해할 수 있습니다. 자바스크립트 fetch API는 서버와의 통신을 쉽게 처리할 수 있는 강력한 도구입니다. 이를 활용하여 웹 앱 로깅 기능을 구현해 보겠습니다.

fetch API를 사용하여 로그 전송하기

먼저, 서버로 로그를 전송해야 합니다. fetch API를 사용하면 비동기적으로 서버에 데이터를 보낼 수 있습니다. 다음은 로그를 전송하는 예제입니다:

// 로그 전송 함수
function sendLog(data) {
  fetch('/api/logs', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
    .then(response => {
      if (response.ok) {
        console.log('로그 전송 성공');
      } else {
        console.error('로그 전송 실패');
      }
    })
    .catch(error => {
      console.error('로그 전송 오류:', error);
    });
}

// 예시 데이터
const logData = {
  userId: 123,
  action: 'click',
  elementId: 'button'
};

// 로그 전송 호출
sendLog(logData);

이 예제에서는 /api/logs 경로로 POST 요청을 보내고 있습니다. 요청 헤더에 Content-Type을 application/json으로 설정하고, 전송할 데이터를 JSON 문자열로 변환하여 요청 본문에 담아 보내고 있습니다. 응답이 성공적으로 도착하면 ‘로그 전송 성공’을, 실패하면 ‘로그 전송 실패’를 콘솔에 출력합니다.

로그 데이터 수집하기

앱의 로그를 전송하기 전에, 로그 데이터를 수집해야 합니다. 사용자의 특정 활동이나 이벤트가 발생할 때마다 로그 데이터를 생성하고 전송 함수를 호출해야 합니다. 이를 위해, 이벤트 리스너를 사용하거나 필요한 곳에서 수동으로 로그 데이터를 생성할 수 있습니다.

다음은 이벤트 리스너를 사용하여 버튼 클릭 이벤트가 발생할 때마다 로그를 수집하는 예제입니다:

// 버튼 요소 선택
const button = document.querySelector('#myButton');

// 버튼 클릭 이벤트 리스너
button.addEventListener('click', () => {
  // 로그 데이터 생성
  const logData = {
    userId: 123,
    action: 'click',
    elementId: 'button'
  };

  // 로그 전송 호출
  sendLog(logData);
});

이 예제에서는 #myButton으로 선택한 버튼 요소에 클릭 이벤트 리스너를 추가하고 있습니다. 버튼이 클릭될 때마다 로그 데이터를 생성하고 sendLog 함수를 호출하여 전송합니다.

요약

자바스크립트 fetch API를 사용하면 간단하게 웹 앱의 로깅 기능을 구현할 수 있습니다. fetch API를 사용하여 로그를 서버로 전송하고, 필요한 이벤트에서 로그 데이터를 생성하여 전송 함수를 호출하는 방법을 소개했습니다. 이를 통해 웹 앱의 사용자 활동을 로깅하고 분석할 수 있습니다.