회사 홈페이지 개편 과정에서 게시판 기능이 필요하다는 의견이 있었고, 실제 작업 전에 Nuxt 3와 Supabase를 활용해 간단한 게시판 기능을 연습용으로 구현해보았습니다.

supabase 프로젝트 생성 및 테이블 설정

1. https://supabase.com 로그인

2. 프로젝트 생성

로그인 후 새 프로젝트 생성 → Project Name, Database Password, Region 등 필수 항목을 입력각

3. 테이블 생성

Supabase 대시보드 → Table Editor → [New Table] 클릭

테이블명을 입력.
연습용 프로젝트이므로 RLS는 체크 해제하여 비활성화하였습니다

primary key로 id를 잡고, 제목, 내용, 날짜 컬럼을 생성

nuxt3에 supabase 연동

패키지 설정

아래 명령어로 패키지를 설치

npm install @supabase/supabase-js

환경변수 설정

// .env
NUXT_PUBLIC_SUPABASE_URL=https://myid.supabase.co
NUXT_PUBLIC_SUPABASE_ANON_KEY=public-anon-key

• project settings → General → Project ID를 카피해서 https://<<myid>>.supabase.co myid 자리에 삽입
• project settings → API Keys → anon key값을 카피서 public-anon-key에 삽입

runtimeConfig 설정

runtimeConfig.public을 사용하면 클라이언트 측에서도 Supabase 키를 접근할 수 있습니다.

// nuxt.config.js
export default defineNuxtConfig({
  ssr: true,
  runtimeConfig: {
    public: {
      supabaseUrl: process.env.NUXT_PUBLIC_SUPABASE_URL,
      supabaseAnonKey: process.env.NUXT_PUBLIC_SUPABASE_ANON_KEY,
    }
  }
})

플러그인 등록

플러그인을 등록하면 모든 컴포넌트에서 useNuxtApp().$supabase 또는 Composable로 접근이 가능합니다.

// plugins/supabase.js
import { createClient } from '@supabase/supabase-js';

export default defineNuxtPlugin((nuxtApp) => {
	const config = useRuntimeConfig();
  
    // Supabase 클라이언트 인스턴스 생성
	const supabase = createClient(
		config.public.supabaseUrl,
		config.public.supabaseAnonKey
	);

    // 전역으로 사용 가능하게 등록
	nuxtApp.provide('supabase', supabase);
});

Composable 작성

이 Composable을 통해 컴포넌트 내에서 손쉽게 Supabase에 접근할 수 있습니다

// composables/useSupabase.js
export const useSupabase = () => {
  const nuxtApp = useNuxtApp()
  return nuxtApp.$supabase    // 플러그인에서 제공한 supabase 인스턴스 반환
}