Supabase: Claude Code 활용 가이드

Supabase とは

Supabaseはオープンソースの백엔드プラット폼です。PostgreSQL데이터베이스、인증、실시간サブスクリプション、스토리지を통합的に提供します。Claude Code를 활용하면 Supabaseの각機能を효율적으로구현할 수 있습니다。

セットアップ

// lib/supabase.ts
import { createClient } from "@supabase/supabase-js";
import type { Database } from "./database.types";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient<Database>(
  supabaseUrl,
  supabaseAnonKey
);

// 서버サイド用（Service Role Key）
export function createServerClient() {
  return createClient<Database>(
    supabaseUrl,
    process.env.SUPABASE_SERVICE_ROLE_KEY!,
    { auth: { persistSession: false } }
  );
}

인증

// メール/비밀번호인증
async function signUp(email: string, password: string) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
    options: {
      data: { display_name: email.split("@")[0] },
    },
  });

  if (error) throw error;
  return data;
}

async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });

  if (error) throw error;
  return data;
}

// OAuth인증
async function signInWithGitHub() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "github",
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
    },
  });

  if (error) throw error;
  return data;
}

// 인증状態の監視
supabase.auth.onAuthStateChange((event, session) => {
  if (event === "SIGNED_IN") {
    console.log("Signed in:", session?.user.email);
  } else if (event === "SIGNED_OUT") {
    console.log("Signed out");
  }
});

데이터베이스CRUD

// 타입安全な쿼리
async function getPosts(params: {
  page?: number;
  category?: string;
}) {
  const { page = 1, category } = params;
  const perPage = 20;

  let query = supabase
    .from("posts")
    .select(`
      id,
      title,
      content,
      published_at,
      author:users(id, name, avatar),
      categories(id, name, slug)
    `, { count: "exact" })
    .eq("published", true)
    .order("published_at", { ascending: false })
    .range((page - 1) * perPage, page * perPage - 1);

  if (category) {
    query = query.contains("categories", [{ slug: category }]);
  }

  const { data, error, count } = await query;

  if (error) throw error;
  return { posts: data, total: count };
}

// 挿入
async function createPost(post: {
  title: string;
  content: string;
}) {
  const { data: { user } } = await supabase.auth.getUser();
  if (!user) throw new Error("Not authenticated");

  const { data, error } = await supabase
    .from("posts")
    .insert({
      title: post.title,
      content: post.content,
      author_id: user.id,
    })
    .select()
    .single();

  if (error) throw error;
  return data;
}

실시간サブスクリプション

import { useEffect, useState } from "react";

function useRealtimeComments(postId: string) {
  const [comments, setComments] = useState<Comment[]>([]);

  useEffect(() => {
    // 初期데이터취득
    supabase
      .from("comments")
      .select("*, author:users(name, avatar)")
      .eq("post_id", postId)
      .order("created_at")
      .then(({ data }) => setComments(data || []));

    // 실시간購読
    const channel = supabase
      .channel(`comments:${postId}`)
      .on(
        "postgres_changes",
        {
          event: "INSERT",
          schema: "public",
          table: "comments",
          filter: `post_id=eq.${postId}`,
        },
        async (payload) => {
          // 作者情報を취득
          const { data } = await supabase
            .from("users")
            .select("name, avatar")
            .eq("id", payload.new.author_id)
            .single();

          setComments((prev) => [
            ...prev,
            { ...payload.new, author: data },
          ]);
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [postId]);

  return comments;
}

스토리지

async function uploadAvatar(file: File, userId: string) {
  const ext = file.name.split(".").pop();
  const path = `avatars/${userId}.${ext}`;

  const { error: uploadError } = await supabase.storage
    .from("profiles")
    .upload(path, file, {
      upsert: true,
      contentType: file.type,
    });

  if (uploadError) throw uploadError;

  const { data } = supabase.storage
    .from("profiles")
    .getPublicUrl(path);

  // プロフィールを업데이트
  await supabase
    .from("users")
    .update({ avatar: data.publicUrl })
    .eq("id", userId);

  return data.publicUrl;
}

Row Level Security

-- RLSポリシーの設定
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- 公開済み記事は誰でも閲覧可
CREATE POLICY "Public posts are viewable by everyone"
ON posts FOR SELECT
USING (published = true);

-- 自分の記事のみEdit可
CREATE POLICY "Users can update own posts"
ON posts FOR UPDATE
USING (auth.uid() = author_id);

-- 認証済みユーザーのみ作成可
CREATE POLICY "Authenticated users can create posts"
ON posts FOR INSERT
WITH CHECK (auth.uid() = author_id);

Claude Code로の활용

Supabase개발をClaude Code에依頼する例です。인증에 대해서는OAuth인증の구현、데이터베이스설계はPrisma ORM完全가이드도 참고하세요.

Supabaseでブログアプリのバックエンドを構築して。
- 認証: メール/パスワード + GitHub OAuth
- テーブル: users, posts, comments, categories
- RLSポリシーの設定
- リアルタイムコメント機能
- 画像アップロード機能

Supabase의 상세 정보는Supabase공식 문서를 참고하세요.Claude Codeの使い方は공식 문서에서 확인할 수 있습니다.

정리

Supabaseは인증から데이터베이스、실시간までを통합的に提供するプラット폼です。Claude Code를 활용하면 각機能の구현を효율적으로進め、풀스택애플리케이션を빠르게구축할 수 있습니다。