[React 숙련 1주차(7)] Supabase

BaaS

BaaS(Backend as a Service)란?

웹과 모바일 앱 개발을 쉽고 빠르게 할 수 있도록 도와주는 클라우드 기반의 백엔드 서비스

===> BaaS를 이용하면 복잡한 백엔드 시스템을 직접 관리하지 않아도 되니, 개발자들이 프론트엔드에 더 집중 가능!

• 구성 요소
  • 프론트엔드: 사용자가 보고 상호작용 부분(시각적인 부분 담당)
  • 백엔드: 서버 측에서 데이터 처리, 사용자 관리, 로직 처리 담당.
  • 데이터베이스: 사용자 정보, 게시글 등 모든 데이터를 저장하고 필요할 때 불러오는 저장소

==> BaaS는 서버나 보안 문제를 신경쓰지 않고, 프로트 엔드 개발만 할 수 있도록 도움.

(  서버 걱정 없이, 개발에 필요한 기능들을 클라우드에서 바로 이용 가능!! )

 

<인기 있는 BaaS 플랫폼>

• Firebase: Google이 운영하는 플랫폼으로, 실시간 데이터베이스, 사용자 인증, 애널리틱스 등을 쉽게 이용 가능.
• Parse: 자유도가 높은 오픈 소스 BaaS로, 커스터마이징이 가능함.
• AWS Amplify: 강력한 AWS 클라우드 기반으로, 복잡한 백엔드 작업을 손쉽게 할 수 있도록 도와줌.

 

<BaaS 사용 시 장/단점>

• 장점
  • 개발 속도 향상: BaaS를 쓰면 백엔드를 직접 만들 필요 없음. 이미 준비된 기능들을 바로 사용할 수 있으니, 개발 시간을 크게 단축 가능.
  • 유지보수 간편: 서버 운영이나 백엔드 시스템 관리에 대한 걱정이 줄어들어, 유지보수가 훨씬 편해집니다.
  • 자동 확장: 사용자가 늘어나도 서비스가 자동으로 스케일 업되니, 서버 부하 걱정 없이 안정적인 서비스를 제공할 수 있어요.
• 단점
  • 유연성 부족: 표준화된 기능 외의 특별한 요구사항을 충족시키기 어려울 수 있습니다.
  • 비용 예측 어려움: 사용량이 많아질수록 비용도 늘어납니다. 때로는 초기에 예상했던 비용보다 많이 들 수도 있죠.
  • 플랫폼 의존성: 한 플랫폼에 의존하게 되면 나중에 다른 서비스로 이전하기 어려워질 수 있습니다.

 

Supabase

Supabase는 PostgreSQL을 기반으로 하는 오픈 소스 BaaS 플랫폼.

Firebase의 대안으로 자리잡으면서, 관계형 데이터베이스를 사용하면서도 실시간 기능을 원하면 Supabase 사용 권장!!

• Supabase는 단순한 BaaS가 아님. PostgreSQL을 사용하여 관계형 데이터를 관리하면서도, 실시간으로 데이터 변화를 감지하고 반응할 수 있는 기능을 제공. 즉, 데이터베이스 업데이트가 필요할 때마다 사용자 인터페이스가 자동으로 반응하여 변경사항을 보여줌.
• 관계형 데이터베이스를 사용하면 복잡한 데이터 관계도 쉽게 표현할 수 있고, 강력한 쿼리 기능을 활용 가능!

Supabase 사용 이유:

• 관계형 데이터 모델과 실무적인 역량

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

• 실무에서는 데이터의 일관성과 정확성이 매우 중요하며, 이를 위해 대부분의 기업 시스템은 관계형 데이터베이스를 사용함. Supabase로 SQL 쿼리 작성, 데이터 테이블 간의 관계 설정, 트랜잭션 관리 등을 할 수 있음. ===> 주식 거래 플랫폼, 실시간 대시보드, 협업 도구 등 실시간 데이터 처리가 중요한 어플리케이션 개발에 매우 유용!

• // 제품 가격 변경을 실시간으로 구독하는 코드
  import { supabase } from './supabaseClient';
  
  function subscribeToPriceChanges() {
    supabase
      .from('products')
      .on('UPDATE', payload => {
        alert(`Price updated! New price: ${payload.new.price}`);
      })
      .subscribe();
  }

• Firebase도 실시간 데이터베이스 기능을 제공하지만, Supabase는 이 기능을 관계형 데이터베이스의 장점과 결합하여 제공함!

 

React에서 사용하기

• 설치 및 세팅하기

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

  - 설치가 완료된 후, Supabase 클라이언트를 초기화하는 코드를 작성함. 이를 위해 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);
  
      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;