처음부터 웹 분석 - 파트 2: 클라이언트

내 블로그에 원래 게시됨here.

이 시리즈의 2부입니다. 첫 부분을 읽을 수 있습니다 here

트래커 클라이언트

이제 분석 데이터를 추적할 수 있는 서버가 있으므로 서버에 페이지가 로드되었음을 알리는 클라이언트를 추가해야 합니다.
페이지가 로드될 때 두 개의 JSON 속성이 포함된 단일 요청만 보내면 되므로 매우 간단합니다.

var analytics = async (apiBase) => {
  await fetch(`${apiBase}/tracker`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ url: location.href }),
  });
};

그런 다음 로드하고 다음과 같이 호출할 수 있습니다.

<script src="analytics.js"></script>
<script>
  analytics("http://yourserver.com");
</script>

그리고 이것이 클라이언트 측에서 매우 간단한 분석을 구현하는 데 필요한 전부입니다. 이것은 클라이언트의 번들 크기가 무시할 수 있다는 추가 이점이 있습니다(<250B 미분화).

분석 데이터 가져오기

분석 데이터를 수집하고 저장할 수 있는 방법이 있지만 이제는 얻을 수 있는 방법이 필요합니다.

이미 다음과 같이 redis-cli를 사용하여 데이터를 볼 수 있습니다.

> HGETALL <YOUR_HOST>:resources
1) "/"
2) "42"
3) "/index.html"
4) "7"

그러나 이는 분석 데이터를 빠르게 보기에 좋은 솔루션이 아닙니다. 우리는 이 데이터를 사용자에게 멋지게 제시할 수 있는 방법을 원합니다. 이 데이터를 얻기 위해 API에 엔드포인트를 추가하여 이를 수행할 수 있습니다.

fastify.get("/data", async (req, reply) => {
  const resources = await fastify.redis.hgetall(`${req.query?.host}:resource`);
  return { resources };
});

이제 host 쿼리 매개변수로 HTTP 요청을 하여 이것을 호출하고 다음과 같은 일부 JSON을 반환합니다.

{
  "/": "42",
  "/index.html": "7"
}

이제 숫자가 실제로 문자열이라는 것을 알 수 있습니다. 이것은 Redis가 모든 것을 문자열로 저장하기 때문입니다. 그래서 우리는 그것을 숫자로 변환해야 할 것입니다:

// Helper function to cast Object values
const castValues = <T>(
  object: Record<string, unknown>,
  castFn: (value: unknown) => T
): Record<string, T> =>
  Object.fromEntries(
    Object.entries(object).map(([key, val]) => [key, castFn(val)])
  );

fastify.get("/data", async (req, reply) => {
  const resources = await fastify.redis.hgetall(`${req.query?.host}:resource`);

  // Cast values to numbers
  return { resources: castValues(resources, Number) };
});

이제 다음과 같이 응답합니다.

{
  "/": 42,
  "/index.html": 7
}

이 시리즈의 다음 부분에서는 더 많은 통계를 추가하고 시각적 대시보드에서 작업할 것입니다.