[리액트 React] 아웃소싱프로젝트_수파베이스 (SupaBase)

supaBase

Firebase처럼 백엔드 기능을 제공하는 플랫폼

 

Supabase와 Firebase 차이

데이터베이스	PostgresSQL를 제공하며 SQL 쿼리를 사용하여 데이터를 조작 할 수 있다	NoSQL Firestore를 기본으로 제공하며 문서 기반 데이터베이스이다
인증 및 사용자 관리	사용자 인증, OAuth, 소셜 로그인, JWT와 함께 사용자 정의 인증을 쉽게 구현할 수 있다	사용자 인증, OAuth, 소셜 로그인 등 다양한 인증 기능을 제공한다
실시간 데이터 동기화	PostgreSQL의 LISTEN/NOTIFY 기능을 활용하여 실시간 업데이트	실시간 데이터베이스와 실시간 업데이트를 통해 실시간 데이터 동기화
서버리스 기능	Supabase Functions를 통해 서버리스 함수 제공, 클라우드 함수로 비즈니스 로직 실행 가능	Firebase Functions를 통해 클라우드 기능 추가 가능
접근성 및 가용성	독자적으로 운영되며, 서버 위치 및 가용성에 따라 차이가 있다	Google의 클라우드 인프라를 기반으로 하며, 전 세계적으로 빠른 속도와 높은 가용성을 제공한다

 

Supabase 데이터 등록하기

공식 문서
https://supabase.com/docs/reference/javascript/insert

Insert data | Supabase

const addReview = async (e) => {
    e.preventDefault();

    // storage에 이미지 등록
    if (addImg) {
      const imgPath = imgRef.current.files[0];

      const { data, error } = await supabase.storage.from('reviewImage').upload('reviewFile/testImg', imgPath, {
        cacheControl: '3600',
        upsert: false
      });
      console.log('data', data);
      console.log('addImg', addImg);

      if (!error) {
        console.log('data', data);
      } else {
        console.error('error', error);
      }
    }

    const newReviews = {
      marker: '안양천길',
      email,
      nickname,
      avatar,
      content: reviewContent,
      reviewimg: addImg ? addImg : null
    };
    console.log('reviewimg', addImg);

    // 데이터 등록
    const { data, error } = await supabase.from('reviewWrite').insert([newReviews]).select();
    if (data) {
      alert('게시물이 등록 되었습니다.');
      reset();
      setAddImg(null);
      setIsImg(false);
      return data;
    } else {
      alert('게시물 등록에 실패했습니다.');
      console.error('error', error);
    }
  };

 

• 공식 문서를 확인하면 데이터 등록, 수정, 삭제 및 storage도 어렵지 않게 구현이 가능하다
• 게시물 등록 시 회원 정보 연결이 되어있지 않아 임시 데이터로 테스트 중으로 이미지 등록 시 파일명이 중복될 경우 등록이 안되므로 회원 정보 연결 후 회원 ID + uuid를 이용해 파일마다 다른 이름이 들어가게 수정할 예정이다