이번 블로그 포스트에서는 자바스크립트와 React.js를 사용하여 웹 사이트의 방문자 통계를 추적하는 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.

1. 환경 설정

먼저, React.js 프로젝트를 생성하기 위해 Node.js와 npm을 설치해야 합니다. 이를 위해서는 Node.js 공식 웹사이트에서 Node.js를 다운로드하고 설치하세요.

설치가 완료되면 터미널을 열고 다음 명령어를 입력하여 create-react-app 패키지를 글로벌로 설치하세요.

npm install -g create-react-app

이제, 프로젝트를 생성할 디렉토리로 이동하여 다음 명령어를 실행하세요.

create-react-app visitor-stats-app

위 명령어는 visitor-stats-app이라는 이름의 React.js 프로젝트를 생성합니다.

2. API 통신 설정

웹 사이트의 방문자 통계를 추적하기 위해서는 서버와의 API 통신을 설정해야 합니다. 여기서는 Google Analytics Reporting API를 사용하여 데이터를 가져올 것입니다.

Google Analytics Reporting API를 사용하기 위해 프로젝트에 Google API 라이브러리를 추가해야 합니다. 이를 위해 Google API Console에 접속하여 새 프로젝트를 생성하고, “Google Analytics Reporting API” 를 활성화하세요. 그런 다음, API 키를 생성하세요.

API 키를 생성한 후, React.js 프로젝트의 src 디렉토리 안에 .env 파일을 생성하고, 다음과 같이 API 키를 추가하세요. (실제 API 키 값을 사용하세요)

REACT_APP_GOOGLE_API_KEY=YOUR_API_KEY_HERE

3. 컴포넌트 개발

이제, 방문자 통계를 표시할 컴포넌트를 개발해야 합니다. 예를 들어, VisitorStats라는 컴포넌트를 생성하여 방문자 수, 페이지 뷰, 이탈률 등의 정보를 표시할 수 있습니다.

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

const VisitorStats = () => {
  const [stats, setStats] = useState(null);

  useEffect(() => {
    fetchStats();
  }, []);

  const fetchStats = async () => {
    try {
      const response = await fetch(`https://www.googleapis.com/analytics/v3/data/ga?ids=ga%YOUR_VIEW_ID%&metrics=ga:users,ga:pageviews,ga:bounceRate&key=${process.env.REACT_APP_GOOGLE_API_KEY}`);
      const data = await response.json();
      setStats(data);
    } catch (error) {
      console.error(error);
    }
  };

  if (!stats) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>방문자 통계</h1>
      <p>방문자 수: {stats.totalsForAllResults['ga:users']}</p>
      <p>페이지 뷰: {stats.totalsForAllResults['ga:pageviews']}</p>
      <p>이탈률: {stats.totalsForAllResults['ga:bounceRate']}</p>
    </div>
  );
}

export default VisitorStats;

위 컴포넌트는 fetchStats 함수를 사용하여 Google Analytics API에서 통계 데이터를 가져오고, 해당 데이터를 화면에 표시합니다.

4. 컴포넌트 사용

마지막으로, VisitorStats 컴포넌트를 애플리케이션에 사용해야 합니다. 예를 들어, App 컴포넌트에서 VisitorStats 컴포넌트를 가져왔다고 가정해보겠습니다.

import React from 'react';
import VisitorStats from './VisitorStats';

const App = () => {
  return (
    <div>
      <h1>방문자 통계 애플리케이션</h1>
      <VisitorStats />
    </div>
  );
}

export default App;

이제, npm start 명령어를 실행하여 React.js 애플리케이션을 실행하고 http://localhost:3000에서 방문자 통계를 확인할 수 있습니다.

마무리

이렇게 자바스크립트와 React.js를 활용하여 웹 사이트의 방문자 통계를 추적하는 애플리케이션을 제작하는 방법을 알아보았습니다. Google Analytics Reporting API를 사용하여 데이터를 가져오고, React.js를 사용하여 컴포넌트를 개발하고 사용했습니다.

#React #JavaScript