Promise를 이용한 웹사이트의 로그 분석 방법

13 Sep 2023

Promise

로그 분석은 웹사이트 운영자에게 매우 중요한 작업입니다. 로그는 웹사이트의 사용자 행동과 성능에 대한 유용한 정보를 제공하므로, 이 정보를 효과적으로 분석하여 웹사이트를 개선할 수 있습니다.

이번 글에서는 JavaScript의 Promise를 활용하여 웹사이트의 로그를 분석하는 방법을 소개하겠습니다.

1. 로그 수집

로그를 분석하기 전에 먼저 로그를 수집해야 합니다. 웹사이트에서 발생하는 각각의 이벤트나 동작에 대한 로그를 만들어야 합니다. 이때, Promise 패턴을 사용하여 비동기적으로 로그를 수집하는 것이 효과적입니다.

예를 들어, 사용자의 클릭 이벤트를 로그로 남기는 코드를 작성해보겠습니다. 이 코드는 JavaScript와 jQuery를 사용한 예시입니다.

function logClickEvent(elementId) {
  return new Promise((resolve, reject) => {
    const element = $('#' + elementId);
    if (element) {
      element.click(() => {
        const logData = {
          action: 'click',
          elementId: elementId,
          timeStamp: new Date().toISOString()
        };
        // 로그 데이터를 서버로 전송하거나 로컬에 저장하는 작업을 수행합니다.
        // 여기서는 단순히 콘솔에 출력하는 것으로 가정합니다.
        console.log(logData);
        resolve();
      });
    } else {
      reject(new Error('Element not found'));
    }
  });
}

이 코드는 logClickEvent 함수를 호출하면 해당 elementId를 가진 요소의 클릭 이벤트가 발생할 때마다 로그를 생성하고 출력합니다. 이 로그는 웹사이트의 이벤트를 효과적으로 추적할 때 사용될 수 있습니다.

2. 로그 분석

로그를 수집하는 기능을 구현했다면, 이제 해당 로그를 분석하여 유용한 정보를 얻을 수 있습니다. Promise를 사용하면 비동기적인 로그 분석 작업을 효과적으로 처리할 수 있습니다.

예를 들어, 클릭 이벤트 로그를 분석하여 가장 많이 클릭된 요소를 찾는 코드를 작성해보겠습니다.

function analyzeClickLogs() {
  return new Promise((resolve, reject) => {
    // 서버에서 클릭 이벤트 로그를 가져오는 작업을 수행합니다.
    // 여기서는 임의의 로그 데이터로 가정합니다.
    const logs = [
      { action: 'click', elementId: 'button1' },
      { action: 'click', elementId: 'button2' },
      { action: 'click', elementId: 'button1' },
      { action: 'click', elementId: 'button3' },
      { action: 'click', elementId: 'button2' }
    ];

    // 클릭 이벤트 별로 발생 횟수를 계산하기 위해 객체를 생성합니다.
    const clickCount = {};

    logs.forEach(log => {
      if (log.action === 'click') {
        if (clickCount[log.elementId]) {
          clickCount[log.elementId]++;
        } else {
          clickCount[log.elementId] = 1;
        }
      }
    });

    // 가장 많이 클릭된 요소를 찾아 resolve합니다.
    const mostClickedElement = Object.keys(clickCount).reduce((a, b) => clickCount[a] > clickCount[b] ? a : b);
    resolve(mostClickedElement);
  });
}

위 예시 코드는 analyzeClickLogs 함수를 호출하면 클릭 이벤트 로그를 분석하여 가장 많이 클릭된 요소의 elementId를 반환합니다. 실제로는 서버에서 로그를 가져와 분석하는 작업이 이루어질 수 있습니다.

3. 활용

로그 분석은 웹사이트 개선에 매우 유용한 정보를 제공하므로, 분석 결과를 활용하는 것이 중요합니다. 예를 들어, 가장 많이 클릭된 요소를 파악하면 해당 요소를 개선하거나 주목도를 높일 수 있습니다.

로그 분석 작업은 실시간으로 이루어지는 것이 아니므로, 주기적으로 실행되도록 스케줄링하는 것이 좋습니다. 이를 위해 JavaScript의 setInterval 함수 또는 서버 사이드 스케줄링 도구를 활용할 수 있습니다.

#로그분석 #Promise