JSON(JavaScript Object Notation)은 많은 웹 애플리케이션에서 데이터 교환 형식으로 널리 사용되고 있습니다. 자바스크립트에서 JSON 데이터를 사용하여 실시간으로 통계를 처리하는 방법을 살펴보겠습니다.

1. JSON 데이터 가져오기

첫 번째 단계는 JSON 데이터를 가져오는 것입니다. 이를 위해 fetch() 함수를 사용할 수 있습니다. fetch()는 비동기적으로 네트워크 요청을 보내고 응답을 처리할 수 있는 자바스크립트의 메서드입니다. 예를 들어, 웹 서버로부터 JSON 데이터를 가져오는 코드는 다음과 같습니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터 처리
  })
  .catch(error => console.error(error));

fetch() 함수는 URL을 매개변수로 받아서 해당 URL로 요청을 보내고 응답을 반환합니다. response.json() 메서드를 사용하여 응답 데이터를 JSON으로 변환하고, 이후의 .then()으로 데이터를 처리할 수 있습니다.

2. JSON 데이터 처리

JSON 데이터를 성공적으로 가져왔다면, 이제 해당 데이터를 실시간 통계를 위해 처리해야 합니다. 예를 들어, JSON 데이터에는 사용자의 방문 기록이 들어있고, 각 방문 기록에는 방문 시간과 페이지 URL이 포함되어 있다고 가정해봅시다. 이 데이터를 이용하여 최근 방문 기록 및 각 페이지의 방문 횟수를 실시간으로 통계화할 수 있습니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터 처리
    const recentVisits = data.slice(-10); // 최근 10개 방문 기록 가져오기

    const pageVisits = {};
    for (let i = 0; i < data.length; i++) {
      const pageUrl = data[i].url;
      pageVisits[pageUrl] = pageVisits[pageUrl] ? pageVisits[pageUrl] + 1 : 1;
    }

    // 최근 방문 기록 및 페이지별 방문 횟수 출력
    console.log('최근 방문 기록:', recentVisits);
    console.log('페이지별 방문 횟수:', pageVisits);
  })
  .catch(error => console.error(error));

위 예시에서, slice() 메서드를 사용하여 최근 10개의 방문 기록을 가져오고, for 루프를 통해 각 페이지의 방문 횟수를 계산합니다. 이렇게 처리된 데이터는 즉시 로그에 출력되지만, 필요에 따라 다른 방식으로 활용할 수 있습니다.

결론

자바스크립트에서 JSON 데이터를 사용하여 실시간 통계를 처리하는 방법을 알아보았습니다. JSON 데이터를 가져오고, 해당 데이터를 실시간으로 처리하여 통계를 생성할 수 있습니다. 이를 통해 웹 애플리케이션 등에서 다양한 데이터 분석과 관련된 작업을 수행할 수 있습니다.