자바스크립트에서 JSON 데이터를 이용하여 로그 분석 도구 생성하기

15 Sep 2023

vuejs

도입

로그 분석은 웹 개발자들에게 중요한 작업입니다. 웹 애플리케이션의 로그를 분석하여 사용자 동작이나 시스템 동작에 대한 통찰을 얻을 수 있습니다. 이번 글에서는 자바스크립트를 사용하여 JSON 데이터를 분석하는 간단한 로그 분석 도구를 생성하는 방법에 대해 알아보겠습니다.

JSON 데이터란?

JSON(JavaScript Object Notation)은 데이터를 표현하기 위한 경량의 형식입니다. JavaScript에서는 이를 쉽게 처리할 수 있으며, 웹 애플리케이션에서 주고받는 데이터 형식으로 많이 사용됩니다. JSON은 키-값 쌍의 집합으로 이루어져 있으며, 중첩된 구조를 가질 수 있습니다.

로그 분석 도구의 요구사항

우리는 JSON 형식의 로그 데이터를 분석하는 도구를 만들겠습니다. 이 도구는 다음과 같은 요구사항을 만족해야 합니다:

JSON 파일 또는 JSON 문자열을 입력으로 받아야 함
필요한 정보를 추출하여 화면에 표시해야 함
필터링 및 집계 기능을 제공해야 함

자바스크립트로 로그 분석 도구 만들기

자바스크립트를 사용하여 로그 분석 도구를 만들어보겠습니다. 다음은 간단한 예제 코드입니다.

// 필요한 라이브러리 import
import jsonToTable from 'json-to-table';    // JSON 데이터를 테이블로 변환하는 라이브러리

// JSON 데이터를 입력받아 화면에 테이블로 표시하는 함수
function displayLogs(jsonData) {
  const tableData = jsonToTable(jsonData);
  document.getElementById('logTable').innerHTML = tableData;
}

// 로그 데이터를 가져와서 분석하는 함수
function analyzeLogs(logs) {
  // 필요한 로직 구현
}

// JSON 파일 또는 문자열을 입력으로 받아서 로그 분석하는 함수
function processLogData(input) {
  let jsonData;
  
  // 파일인 경우
  if (input.type === 'file') {
    const reader = new FileReader();

    reader.onload = (event) => {
      const fileData = event.target.result;
      jsonData = JSON.parse(fileData);
      analyzeLogs(jsonData);
      displayLogs(jsonData);
    };

    reader.readAsText(input.file);
  }
  
  // 문자열인 경우
  else if (typeof input === 'string') {
    jsonData = JSON.parse(input);
    analyzeLogs(jsonData);
    displayLogs(jsonData);
  }
}

// 사용자로부터 입력을 받아 로그 분석을 시작하는 함수
function startLogAnalysis() {
  const rawInput = prompt("JSON 파일 경로 또는 JSON 문자열을 입력하세요:");
  const input = rawInput.trim();

  processLogData(input);
}

위의 코드는 json-to-table 라이브러리를 사용하여 입력된 JSON 데이터를 테이블 형태로 화면에 표시하는 예제입니다. processLogData() 함수는 입력이 파일인지 문자열인지에 따라 처리를 다르게 합니다.

마치며

이번 글에서는 자바스크립트를 이용하여 JSON 데이터를 분석하는 로그 분석 도구를 개발하는 방법을 알아보았습니다. 이 도구를 사용하면 로그 데이터에서 필요한 정보를 추출하고 시각화할 수 있어 웹 개발 작업에 큰 도움이 될 것입니다. 추가로 기능을 확장하거나 사용자 인터페이스를 개선하여 실용적인 도구로 만들어보세요.