[Supabase] Supabase 간단한 사용법 / 예제

---

사용이유, 장단점

장점:

• 오픈 소스: Supabase는 오픈 소스로 제공되어 개발자가 소스 코드를 검토하고 수정할 수 있습니다.
• 실시간 기능: 실시간 웹소켓을 통해 실시간 데이터 업데이트를 지원하여 빠르고 동적인 애플리케이션을 구축할 수 있습니다.

단점:

• 상대적으로 새로운 플랫폼: Supabase는 상대적으로 새로운 플랫폼이기 때문에 생태계와 자료가 아직 많지 않을 수 있습니다.

 

---

Supabase 프로젝트 생성 및 설정

• Supabase 홈페이지에 가입하고 프로젝트를 생성합니다.
• 프로젝트 대시보드에서 "Database" 섹션으로 이동하여 데이터베이스를 설정하고 테이블을 생성합니다.

 

npm install @supabase/supabase-js

yarn add @supabase/supabase-js

 

 

---

 

Supabase 설정

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

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseKey = 'YOUR_SUPABASE_KEY';
const supabase = createClient(supabaseUrl, supabaseKey);

export default supabase;

 

 

 

---

TodoList.js

// src/components/TodoList.js
import React, { useState, useEffect } from 'react';
import supabase from '../supabase';

function TodoList() {
  const [tasks, setTasks] = useState([]);

  const fetchTasks = async () => {
    const { data, error } = await supabase.from('tasks').select('*');
    if (error) {
      console.error('Error fetching tasks:', error.message);
      return;
    }
    setTasks(data);
  };

  useEffect(() => {
    fetchTasks();
  }, []);

  return (
    <div>
      <h1>To-Do List</h1>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>{task.description}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

 

---

TaskForm.js

// src/components/TaskForm.js
import React, { useState } from 'react';
import supabase from '../supabase';

function TaskForm() {
  const [newTask, setNewTask] = useState('');

  const addTask = async () => {
    if (!newTask) return;

    const { data, error } = await supabase.from('tasks').insert([{ description: newTask }]);
    if (error) {
      console.error('Error adding task:', error.message);
    } else {
      setNewTask('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={newTask}
        onChange={e => setNewTask(e.target.value)}
        placeholder="Enter a new task"
      />
      <button onClick={addTask}>Add Task</button>
    </div>
  );
}

export default TaskForm;