React에서 Supabase 사용하기

Sanhol·2024년 7월 28일

Supabase는 PostgreSQL을 기반으로 하며, 실시간 데이터베이스 기능을 제공하여 데이터 변경을 실시간으로 감지할 수 있습니다. 또한 REST API, 이벤트 처리 등의 고유한 기능을 오픈소스로 제공하여 데이터베이스와 API를 구축하는 데 필요한 복잡한 설정과 관리를 최소화할 수 있는 장점이 있습니다.

이번 프로젝트에서 저는 OpenAI의 응답값을 JSON 형태로 저장하고 사용하는 방법을 Supabase를 이용하여 진행했습니다. 다음은 그 과정입니다.

📌 Supabase 초기 세팅

Supabase 생성

Supabase 웹사이트(supabase.com)에 방문하여 계정을 생성합니다.
대시보드에서 새 프로젝트를 생성합니다.
프로젝트가 생성되면 프로젝트의 API URL과 anon 키를 기록해 둡니다. 이 정보는 프로젝트 설정의 API 탭에서 찾을 수 있습니다.

Supabase 설치

프로젝트에서 Supabase 클라이언트를 설치합니다. 다음 명령어를 사용하여 설치할 수 있습니다

npm install @supabase/supabase-js

Supabase 초기화 파일 생성

프로젝트의 초기화 파일(예: index.js 또는 App.js)에서 Supabase 클라이언트를 초기화합니다:

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

const supabaseUrl = '<https://your-project-id.supabase.co>'; // Supabase 프로젝트 URL
const supabaseKey = 'your-anon-key'; // Supabase anon key
const supabase = createClient(supabaseUrl, supabaseKey);

export default supabase;

테이블 생성

Supabase 대시보드에서 JSON 데이터를 저장할 테이블을 생성합니다.

데이터베이스 탭으로 이동하여 "New Table"을 클릭합니다.
테이블 이름을 입력합니다(예: ai_responses).
컬럼을 추가합니다:
- id: UUID, Primary Key, Default Value: gen_random_uuid()
- created_at: Timestamp, Default Value: now()
- response_data: JSONB

📌 Supabase 사용하기

데이터 저장

이제 AI의 JSON 데이터를 Supabase에 저장하는 방법을 보여드리겠습니다. 예를 들어, AI 응답 데이터를 저장하는 함수는 다음과 같습니다:

import supabase from './supabaseClient'; // Supabase 초기화 파일을 import

async function saveAiResponse(responseData) {
  const { data, error } = await supabase
    .from('ai_responses')
    .insert([
      { response_data: responseData }
    ]);

  if (error) {
    console.error('Error inserting data:', error);
  } else {
    console.log('Data inserted:', data);
  }
}

// 예시로 사용할 AI 응답 데이터
const aiResponse = {
  destination: 'Paris',
  recommendation: {
    tripType: 'Vacation',
    tripStyle: 'Relaxed',
    tripActivities: [
      {
        placeType: 'Museum',
        name: 'Louvre',
        description: 'A famous museum in Paris.',
        location: 'Paris, France',
        recommendedMenu: 'Café Louvre',
        link: '<https://www.louvre.fr>'
      }
    ]
  }
};

// AI 응답 데이터를 저장하는 함수 호출
saveAiResponse(aiResponse);

데이터 보여주기

Supabase 테이블에 저장된 데이터를 보여주는 방법에 대해서 예시 코드와 함께 설명을 하자면

import supabase from './supabaseClient';

// JSON 데이터를 조회하는 함수
async function fetchAiResponses() {
  const { data, error } = await supabase
    .from('ai_responses')
    .select('response_data'); // 필요한 컬럼만 선택

  if (error) {
    console.error('Error fetching data:', error);
    return [];
  }

  // JSON 문자열을 JavaScript 객체로 변환
  return data.map(item => JSON.parse(item.response_data));
}

// 예시로 데이터를 사용하는 함수
async function useAiResponses() {
  const responses = await fetchAiResponses();

  // 조회한 데이터를 활용
  responses.forEach(response => {
    console.log('Destination:', response.destination);
    console.log('Recommendations:', response.recommendation);
  });
}

// 데이터 사용 함수 호출
useAiResponses();

데이터 업데이트

import supabase from './supabaseClient';

// 데이터 업데이트 함수
async function updateAiResponse(id, newResponseData) {
  const { data, error } = await supabase
    .from('ai_responses')
    .update({ response_data: JSON.stringify(newResponseData) }) // JSON 데이터를 문자열로 변환하여 저장
    .eq('id', id);

  if (error) {
    console.error('Error updating data:', error);
  } else {
    console.log('Data updated:', data);
  }
}


// 데이터 업데이트 함수 호출
updateAiResponse('existing-id', updatedAiResponse);

데이터 삭제

import supabase from './supabaseClient';

// 데이터 삭제 함수
async function deleteAiResponse(id) {
  const { data, error } = await supabase
    .from('ai_responses')
    .delete()
    .eq('id', id);

  if (error) {
    console.error('Error deleting data:', error);
  } else {
    console.log('Data deleted:', data);
  }
}

// 데이터 삭제 함수 호출
deleteAiResponse('existing-id');