Vue.js와 Supabase 연결하기

Supabase DOCS를 참고하여 Vue에서 Supabsae의 Project를 연동하는 방식을 정리해보겠다. Supabase는 Framework, Web App, Mobile, AI tools 등 여러 종류의 플랫폼과의 연결을 지원한다. 나의 프로젝트는 Quasar Framework 기반으로 만든 크로스플랫폼 웹(WAS surver)와 앱(하이브리드 앱)이다. 이는 Vue.js 기반이라 Framework Quickstarts에서 vue 부분을 참고했다. 이외에도 Next.js, React, Flutter 등의 프레임워크와 Vue3, Nuxt3 등의 웹앱과 Swift, kotlin 등의 모바일을 지원한다.

순서

1. Create a Supabase Project
2. Add some sample data to your database
3. Query the data from a Vue app

Create a Supabase Project.

이전 포스팅을 통해서 Supabase Project를 만드는 방법을 정리해놨다.

Add some sample data

먼저 새로운 table을 만든다. 이는 table editor에서 해도 되고 sql editor에서 해도 된다. table editor에서 하는 편이 직관적이고 초보자가 이용하기 쉽다. sql editor을 사용하면 sql문을 이용하여 database에 쉽게 접근하고 간단하고 명확한 작업을 할 수 있으니 sql을 공부하여 접근하는 것도 하나의 좋은 방법이다. 그 외에도 Datagrip과 같은 도구를 이용하여 작업할 수도 있다.

create table (TableName) (
	id bigint primary key generated always as identity,
    name text not null
);

그리고 샘플 데이터를 만든다.

insert into (TableName) (name)
values
	('ex1'),
    ('ex2'),
    ('ex3');
    
alter table (TableName) enable row level security;

RLS를 추가하여 테이블의 접근성을 설정한다.

create policy "public can read (TableName)"
on public.(TableName)
for select to anon
using (true);

Vue(quasar) app

vue, quasar 앱을 연동하기 위해서는 가장 먼저 클라이언트 라이브러리를 설치해야 한다.

npm install @supabase/supabase-js

그리고 supabase.js를 만들어 클라이언트 생성 스크립트를 만든다. url, key를 가져오는 방식은 두 가지로 나눠서 사용하고 있다. 둘다 공통적으로 env(환경변수파일)을 만들어서 이곳에서 url과 key를 가져오는 방식을 사용하고 있다. 이 방식을 사용하면 추후에 supabase가 변경되더라도 쉽게 코드를 교체할 수 있고(하드코딩 방지), gitignore에 추가함으로서 민감한 정보의 유출을 줄일 수 있다.

VITE_SUPABASE_URL=""
SUPABASE_ANON_KEY=""
SUPABASE_SERVICE_ROLE_KEY=""

두 방법 중 먼저 VITE는 vue와 quasar에서 직접 사용할 때 사용하는 접두어이다. 이를 통해 vue에서 직접 url을 이용하여 다른 접근을 할 때 이용할 수 있다. 그리고 process로 가져오는 방식은 javascript에서만 사용이 가능하다. 그래서 vue에서는 이렇게 가져올 수 없어 vite를 이용하는 것이다.

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = process.env.SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseKey)

Data query

<script setup>
import { ref, onMounted } from 'vue'
import { supabase } from 'src/boot/supabase'

const (TableNmae) = ref([])

async function get(TableName)() {
  const { data } = await supabse.from('TableName').select()
  (TableName).value = data
  
onMounted{() => {
  get(TableName)()
})

</script>
          
<template>
  <ul>
  	<li v-for="(name) in (TableName)" :key="(name).id">{{ (name).name }}</li>
  </ul>
</template>