[React] Supabase

01. BaaS

BaaS는 웹과 모바일 앱 개발을 쉽고 빠르게 할 수 있도록 도와주는 클라우드 기반의 백엔드 서비스랍니다. BaaS를 이용하면 복잡한 백엔드 시스템을 직접 관리하지 않아도ok

• 프론트엔드: 사용자가 보고 상호작용하는 면이죠. 웹 사이트의 모든 시각적 요소를 담당해요.
• 백엔드: 서버 측에서 데이터 처리, 사용자 관리, 로직 처리 등을 맡습니다. 보이지 않는 곳에서 많은 일을 해내죠.
• 데이터베이스: 사용자 정보, 게시글 등 모든 데이터를 저장하고 필요할 때 불러오는 저장소입니다.

02. Supabase

Supabase는 PostgreSQL을 기반으로 하는 오픈 소스 BaaS 플랫폼입니다. Firebase의 대안으로 자리잡으면서, 관계형 데이터베이스를 사용하면서도 실시간 기능ok

✔︎ Supabase는 PostgreSQL을 사용하는 관계형 데이터베이스 시스템 (=행과 열이 있는 엑셀 형태)

-- 주문과 연관된 고객 정보를 함께 조회
SELECT orders.order_id, customers.name
FROM orders
JOIN customers ON orders.customer_id = customers.id
WHERE customers.region = 'Asia';

✔︎ 현대의 동적인 웹 애플리케이션에서 필수적!
실시간 데이터 처리가 중요한 어플리케이션 개발에 매우 유용

⭐️ React에서 사용하기

🔍 패키지 설치

yarn add @supabase/supabase-js
# 또는 
npm install @supabase/supabase-js

초기화하는 코드를 작성:

설치가 완료된 후, Supabase 사이트 접속 후 table editor에서 columus를 제작. Supabase 클라이언트를 초기화하는 코드를 작성. 이를 위해 supabaseClient,js 에 URL과 공개 API 키를 작성.(Supabase 사이트에서 URL과 공개 API 키 있음)

데이터베이스 입력하기(콘솔):

// src > components > FetchData.jsx
import { useEffect, useState } from "react";
import supabase from "../supabaseClient";

const FetchData = () => {
  const [users, setUsers] = useState([]);

	useEffect(() => {
    const fetchData = async () => {
      const { data, error } = await supabase.from("NACAMP_SAMPLE").select("*");
      if (error) {
        console.log("error => ", error);
      } else {
        console.log("data => ", data);
        setUsers(data);
      }
    };

    fetchData();
  }, []);
  
  return (
    <div>
      <h3>유저정보</h3>
      {users.map((user) => {
        return (
          <div key={user.id}
            style={{border: "1px solid black",}}>
            <h5>아이디 : {user.id}</h5>
            <h5>이름 : {user.name}</h5>
            <h5>나이 : {user.age}</h5>
            <h5>주소 : {user.address}</h5>
          </div>
        );
      })}
    </div>
  );
};

export default FetchData;

데이터베이스 쓰기:

// src > components > AddData.jsx
import React, { useState } from "react";
import supabase from "../supabaseClient";

const AddData = () => {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState("");

  const handleAdd = async () => {
    const { data, error } = await supabase.from("NACAMP_SAMPLE").insert({
      name,
      age,
      address,
    });

    if (error) {
      console.log("error => ", error);
    } else {
      alert("데이터가 정상적으로 입력됐습니다.");
      console.log("data => ", data);
    }
  };

  return (
    <div
      style={{
        border: "1px solid red",
      }}
    >
      <h2>데이터 추가 로직</h2>
      <div>
        이름 :{" "}
        <input
          type="text"
          value={name}
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>
      <div>
        나이 :{" "}
        <input
          type="number"
          value={age}
          onChange={(e) => {
            setAge(e.target.value);
          }}
        />
      </div>
      <div>
        주소 :{" "}
        <input
          type="text"
          value={address}
          onChange={(e) => {
            setAddress(e.target.value);
          }}
        />
      </div>
      <button onClick={handleAdd}>등록</button>
    </div>
  );
};

export default AddData;

데이터베이스 수정하기:

// src > components > UpdateData.jsx
import React, { useState } from "react";
import supabase from "../supabaseClient";

const UpdateData = () => {
  const [targetId, setTargetId] = useState(0);
  const [address, setAddress] = useState("");

  const handleChange = async () => {
    const { error } = await supabase
      .from("NACAMP_SAMPLE")
      .update({
        address,
      })
      .eq("id", targetId);
    // equal= id가 targetId와 같은 행의 address 값을 업데이트

    if (error) {
      console.log("error => ", error);
    }
  };

  return (
    <div
      style={{
        border: "1px solid blue",
      }}
    >
      <h2>데이터 수정 로직</h2>
      아이디 :{" "}
      <input
        type="number"
        value={targetId}
        onChange={(e) => setTargetId(e.target.value)}
      />
      <br />
      수정주소 :{" "}
      <input
        type="text"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />
      <button onClick={handleChange}>변경</button>
    </div>
  );
};

export default UpdateData;

데이터베이스 삭제하기:

// src > components > DeleteData.jsx
import React, { useState } from "react";
import supabase from "../supabaseClient";

const DeleteData = () => {
  const [targetId, setTargetId] = useState(0);

  const handleDelete = async () => {
    const { error } = await supabase
      .from("NACAMP_SAMPLE")
      .delete()
      .eq("id", targetId);

    if (error) {
      console.log("error => ", error);
    }
  };

  return (
    <div
      style={{
        border: "1px solid blue",
      }}
    >
      <h2>데이터 삭제 로직</h2>
      아이디 :{" "}
      <input
        type="number"
        value={targetId}
        onChange={(e) => setTargetId(e.target.value)}
      />
      <button onClick={handleDelete}>삭제</button>
    </div>
  );
};

export default DeleteData;

• 최종 App.jsx

// src > App.jsx
import "./App.css";
import AddData from "./components/AddData";
import DeleteData from "./components/DeleteData";
import FetchData from "./components/FetchData";
import UpdateData from "./components/UpdateData";

function App() {
  return (
    <>
      <h1>Supabase</h1>
      <DeleteData />
      <FetchData />
      <UpdateData />
      <AddData />
    </>
  );
}

export default App;