[React 숙련] 1주차_Supabase

오늘의 학습내용 :  Supabase

 

◆ Baas

 

모바일, 웹 애플리케이션을 제작할 때에는 백엔드 서버 개발도 함께 진행하게 된다. 백엔드 이야기를 하자면, 서버 개발을 할 때 고려해야 할 사항들이 있다. 만약 유저가 늘어난다면 서버를 확장해야 하고, 보안도 주의해야 한다. 이러한 웹, 모바일 앱 개발을 더 쉽고 빠르게 할 수 있도록 돕는 클라우드 기반의 백엔드 서비스가 Baas 이다. 복잡한 백엔드 시스템을 직접 관리할 필요가 없기 때문에 프론트엔드에 집중하는 것이 가능해진다! (참고: https://velog.io/@ki5970)

 

백엔드 시스템은 알아서 해 준다. 프론트엔드만 집중할 수 있도록...

 

대표적인 BaaS 플랫폼에는 Firebase(Google 운영), Parse, AWS Amplify 등이 있다. 이러한 서비스들은 데이터베이스, 소셜 미디어 서비스와의 연동, 파일 스토리지 등 애플리케이션 개발에서 필요로 하는 기능들을 API로 제공하면서 서버 개발을 직접 하지 않고도 원하는 내용을 구현할 수 있고, 서버의 이용자가 늘어난다면 따로 대비할 필요 없이 확장되기도 한다. 이렇게 보면 백엔드에 대한 지식이 부족해도 개발하는 데 큰 어려움이 없는 유익한 플랫폼이지만, 몇 가지 단점도 있다.

• 클라이언트 위주 코드  백엔드 로직들이 클라이언트 쪽에 구현되는데, 이때 데이터 로직이 변경되면 클라이언트 코드도 수정되고, 재배포하거나 JS를 새로 받아야 한다. 업데이트가 강제되는 일이 발생할 수 있다.
• 앱의 규모가 커질수록 상승하는 데이터베이스 비용  많은 BaaS 플랫폼이 초기에 무료로 프로젝트를 생성할 수 있게 하지만, 앱의 규모가 커지면 유료 서비스 가격도 높아진다.
• 복잡한 쿼리 불가능  

 

 

◆ Supabase

 

파이어베이스만큼 편리한데 RDB까지 제공해준다고?

 

Supabase는 객체-관계형 데이터베이스 시스템을 기반으로 하는 대표적인 오픈 소스 BaaS 플랫폼으로, 데이터베이스 및 이늦오가 스토리지 등 다양한 기능을 제공한다. 개인적으로는, 자바스크립트 기초를 배울 때 사용했던 Firebase보다도 이용하기 편하다고 느꼈다. 데이터베이스 업데이트가 필요할 때마다 사용자 인터페이스가 자동으로 반응해서 변경사항을 보여줄 수 있다. 관계형 데이터베이스를 사용하면서 실시간 기능 지원을 원하는 개발자들 사이에서 파이어베이스의 대안으로 많이 쓰인다고 한다.

 

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

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

export default App;

// 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;

 

 

+ React에서 Supabase 설치, 세팅하는 법.

// 패키지 설치하기
yarn add @supabase/supabase-js

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

// 1) project url
const SUPABASE_PROJECT_URL = "YOUR_SUPABASE_URL";

// 2) anon key
const SUPABASE_ANON_KEY = "YOUT_SUPABASE_KEY";

const supabase = createClient(SUPABASE_PROJECT_URL, SUPABASE_ANON_KEY);
export default supabase;

 

 

질문 & 더 알아보기

: 서버리스? BaaS? FaaS?

이름만 들어 보면 서버가 없다는 뜻처럼 들리지만, 실제로 서버가 없는 것은 아니다. 다만 특정 작업을 수행하기 위해 컴퓨터에 서버를 설정하고 처리하는 것이 아니라, BaaS 혹은 FaaS에 의해 작업을 처리하는 것이다. 강의에서 배운 BaaS와 달리, FaaS는 프로젝트를 여러 개의 함수로 쪼개서 분산된 컴퓨팅 자원에 등록하고, 함수를 실행하는 횟수와 시간만큼 비용을 내게 된다. 필요로 할 때에만 함수를 호출해서 처리할 수 있기 때문에 비용 절감이 가능하고, 네트워크 장비 구성에 대해 고민하지 않아도 된다. 확장성 면에서도 장점을 보이지만, 단점도 있다.

• 함수에서 사용 가능한 자원의 제한
• FaaS 제공사에 대한 높은 의존성