React.js는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 웹 애플리케이션 개발에 많이 사용됩니다. 이번 블로그 포스트에서는 React.js와 자바스크립트를 활용하여 웹 사이트의 방문자 통계를 추적하고 표시하는 간단한 애플리케이션을 제작하는 방법을 알아보겠습니다.

1. React.js 및 필수 패키지 설치

먼저, 프로젝트를 시작하기 위해 React.js를 설치해야 합니다. 터미널에서 다음 명령을 실행하여 React.js 애플리케이션을 생성합니다.

npx create-react-app visitor-statistics-app

이후 생성된 애플리케이션 폴더로 이동해주세요.

2. Google Analytics API 설정

Google Analytics는 웹 사이트의 방문자 통계를 추적하는 데 널리 사용되는 도구입니다. Google Analytics API를 사용하여 통계 데이터를 가져올 수 있습니다.

1. Google Developer Console에 로그인하고 새 프로젝트를 생성합니다.
2. 생성한 프로젝트로 이동한 후, 좌측 메뉴에서 “API 및 서비스” > “사용자 인증 정보”로 이동합니다.
3. “사용자 인증 정보 만들기”를 선택하고 “OAuth 클라이언트 ID”를 선택합니다.
4. 애플리케이션 유형을 “웹 애플리케이션”으로 선택하고 필요한 정보를 입력한 후 “만들기”를 클릭합니다.
5. 생성된 클라이언트 ID의 클라이언트 비밀번호와 클라이언트 ID를 메모해둡니다.

3. Google Analytics API 사용

이제, Google Analytics API를 사용하여 웹 사이트의 방문자 통계 데이터를 가져올 수 있는 코드를 작성해보겠습니다.

import React, { useEffect, useState } from 'react';

const VisitorStatisticsApp = () => {
  const [visitorCount, setVisitorCount] = useState(0);

  useEffect(() => {
    const fetchVisitorStatistics = async () => {
      const response = await fetch(
        `https://www.googleapis.com/analytics/v3/data/ga?ids=ga:<YOUR_VIEW_ID>&metrics=ga:visitors&start-date=7daysAgo&end-date=today`,
        {
          headers: {
            'Authorization': 'Bearer <YOUR_ACCESS_TOKEN>'
          }
        }
      );
      const data = await response.json();
      setVisitorCount(data.totalsForAllResults['ga:visitors']);
    }

    fetchVisitorStatistics();
  }, []);

  return (
    <div>
      <h1>방문자 통계</h1>
      <p>지난 7일 동안의 방문자 수: {visitorCount}</p>
    </div>
  );
}

export default VisitorStatisticsApp;

위의 코드에서 <YOUR_VIEW_ID> 부분을 Google Analytics View ID로, <YOUR_ACCESS_TOKEN> 부분을 애플리케이션에서 받아온 액세스 토큰으로 변경해주어야 합니다.

4. 애플리케이션 실행

위의 코드를 포함한 파일을 src 폴더 안에 VisitorStatisticsApp.js로 저장한 후, 다음 명령을 실행하여 애플리케이션을 실행할 수 있습니다.

npm start

애플리케이션은 http://localhost:3000에 실행됩니다. 방문자 통계가 표시되는 것을 확인할 수 있을 것입니다.

마무리

React.js와 자바스크립트를 이용하여 웹 사이트의 방문자 통계를 추적하고 표시하는 애플리케이션을 만드는 방법에 대해 알아보았습니다. Google Analytics API를 사용하여 실제 방문자 데이터를 가져올 수 있으며, 이를 활용하여 다양한 통계 정보를 표시할 수도 있습니다.

이번 포스트가 도움이 되었기를 바라며, 추가적인 자료가 필요하다면 React.js 공식 문서 및 Google Analytics API 문서를 참고해보시기 바랍니다.

#ReactJS #GoogleAnalyticsAPI