Supabase와 웹 프로그램 연결

앞서 포크 뜬 프로젝트에서 Supabase의 연결 부분을 내가 만든 Supabase 프로젝트로 변경해야 한다.

1. Supabase 환경변수 설정 업데이트

먼저 환경 변수 업데이트를 해야 한다. Supabase 디렉토리에 .env 파일을 수정(생성)한다. .env 파일은 애플리케이션의 환경변수를 저장하는 구성 파일이다. 일반적으로 소스 코드에 포함시키면 안 되는(보안상) API 키와 같은 민감한 정보를 관리하기 위해 사용된다.

SUPABASE_URL=your_new_supabase_project_url
SUPABASE_ANON_KEY=your_new_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_new_service_role_key

URL과 Key들은 Supabase의 프로젝트에 들어가면 Project Setting 내부에 API Setting 부분이 있다. 여기서 key를 복사하여 넣으면 된다.
Project URL은 어떤 주소에서 DB나 Storage를 가져올지를 찾게 해주는 주소이다. 그리고 SUPABASE_SERVICE_ROLE_KEY는 Supabase에서 제공하는 서비스 역할 키로, 데이터베이스 관리 및 백엔드 작업을 수행할 때 사용된다. 형식상 JWT(Json Web Token)형식으로 키의 역할과 발급 시간, 만료 시간이 포함되어 있다. 이는 Row Level Security(RLS)를 우회하여 데이터베이스에 접근 가능하게 만들어준다. 데이터를 분석하고 사용자를 인증하는 등의 작업에 사용된다. 그러므로(높은 권한을 가짐) 브라우저나 클라이언트에 절대 노출되면 안 된다. 따라서 .env파일은 Git에 커밋되지 않도록 gitignore에 추가하는 것이 통상적이라고 한다.

한편 Anon-Key는 클라이언트에서 Supabase가 직접 통신할 때 사용되며, RLS가 적용되어 제한된 권한을 가지게 되어 보안 상 안전해진다. 따라서 서버에서 사용할 때는 서비스 역할 키가 적당하고, 클라이언트(브라우저, 모바일, 웹 등)에서 직접 사용할 때는 익명 키가 사용되어야 한다. 하여간 이때 사용되는 환경변수다.

이를 변경하면 저장해 놓은 변수가 내 코드 전역에서 불러와 사용할 수 있게 된다. 그래서 gitignore에 .env 파일을 올려놓으면 git을 통해 누군가 나의 key를 탈취하지 못하게 방지할 수 있는 것이다. gitignore에 추가하는 방법은 다음 포스팅에서 하도록 하고 다음 단계로 넘어가려고 한다.

2. 클라이언트 초기화 코드 수정

처음에는 무슨 이야기인지 이해가 가지 않았는데, 알고 보니 애플리케이션과 Supabase 백엔드 사이의 연결을 설정하는 필수 과정이라고 한다. 환경변수(.env)에서 URL과 키를 가져와, 클라이언트를 생성하는 방식이다. 우리는 src/boot/supabase.js라는 별도의 파일을 생성하여 supabase 클라이언트를 초기화하고 있다. 이렇게 초기화된 클라이언트를 pinia store 등의 다른 파일에서 가져와 사용한다.
일반적으로는 아래와 같이 사용한다.

// src/boot/supabase.js
import { boot } from 'quasar/wrappers'
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL // Vite 사용 시
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

export default boot(({ app }) => {
  // 필요시 Vue 인스턴스에 전역으로 추가
  app.config.globalProperties.$supabase = supabase
})

우리는 조금 다르게 사용한다.

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

const supabaseUrl = process.env.SUPABASE_URL
const supabaseKey = process.env.SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseKey)

3. Pinia 스토어에서 Supabase 클라이언트를 가져와 작업 수행

일반적으로 Pinia 스토어에서 데이터 작업을 수행한다고 한다. 다음은 그 예시이다.

import { defineStore } from 'pinia'
import { supabase } from 'src/boot/supabase'

export const useProjectStore = defineStore('project', {
  state: () => ({
    projects: [],
    loading: false
  }),
  actions: {
    async fetchProjects() {
      this.loading = true
      try {
        const { data, error } = await supabase
          .from('projects')
          .select('*')
        
        if (error) throw error
        this.projects = data
      } catch (error) {
        console.error('Error fetching projects:', error)
      } finally {
        this.loading = false
      }
    },
    async addProject(project) {
      try {
        const { data, error } = await supabase
          .from('projects')
          .insert(project)
          .select()
        
        if (error) throw error
        return data
      } catch (error) {
        console.error('Error adding project:', error)
      }
    }
    // 추가 CRUD 작업...
  }
})

4. 컴포넌트와 스토어에서 Supabase 활용하기