Supabase RPC로 이벤트 트래킹 구현

1. 개요

 노마드코더 강의를 들으면서 RPC라는 것을 알게 되었다. 이를 활용해서 프로필 페이지에 사람들이 얼마나 방문했는지를 기록하는 것을 알게 되었다. 그래서 이에 대해 간단히 기록하려 한다.

 

2. RPC란 

 RPC란 Remote Procedure Call의 약자로, 노마드코더 강의에서 이용한 것은 PostgreSQL 데이터베이스에서 정의한 함수를 클라이언트에서 직접 호출할 수 있게 하는 Supabase의 기능이다. 

 

3. 구현 과정

3-1. PostgreSQL 함수 정의

create or replace function track_event(
    event_type event_type,
    event_data jsonb
) returns void as $$
begin
    insert into events (event_type, event_data) values (event_type, event_data);
end;
$$ language plpgsql;

 

우선 이벤트를 추적하는 함수를 만들고 저장한다.

 

3-2. 클라이언트에서 RPC로 호출

import { useOutletContext } from "react-router";

import client from "~/supa-client";

import type { Route } from "./+types/profile-page";

export const loader = async ({ params }: Route.LoaderArgs) => {
  await client.rpc("track_event", {
    event_type: "profile_view",
    event_data: {
      username: params.username,
    },
  });
  return null;
};

export default function ProfilePage() {
	// 생략
}

 

client.rcp("함수 이름", { 파라미터 }) 형식으로 PostgreSQL 함수를 호출할 수 있다. 위 코드는 유저의 프로필 페이지 컴포넌트 코드로, loader에서 client.rpc를 통해 3-1 과정에서 저장한 track_event를 호출하고, 이벤트 타입은 profile_view, event_data는 username을 전달한다. 여담으로 username, 즉 유저 이름은 변경할 수 있으므로 user id를 활용해서 저장하게 수정하는 것이 좋을 것 같다. 

 

 // 직접 INSERT
  await client.from("events").insert({
    event_type: "product_visit",
    event_data: { product_id: params.productId }
  });

 

만약 이를 일반 쿼리를 이용해서 직접 구현하려면 아마 위처럼 구현하면 될 것이다.

 

3-3. 유저 프로필 페이지 진입 후 확인해보기

 

우선 유저 프로필 페이지에서 새로고침을 해보았다.

 

 

그리고 위 이미지처럼 events에서 각 이벤트 타입별로 저장되어 있는 것을 확인할 수 있다.

 

3-4. RPC를 사용하는 이유

• 복잡한 로직을 DB에서 처리할 수 있다. 여러 테이블 조작, 조건문, 트랜잭션 등을 PostgreSQL에서 처리할 수 있게 한다.
• 네트워크 왕복 횟수 감수 등으로 성능 향상을 기대할 수 있다. (여러 쿼리를 한 번의 함수 호출로 구현 가능)
• 같은 로직을 여러 곳에서 함수 이름만으로 호출할 수 있기 때문에 재사용성이 좋다.
• 지금 예시는 별로 안 복잡한데, 추후 복잡한 INSERT 로직을 캡슐화해서 간결하게 이용할 수 있다.