Supabase란,

supabase는 데이터베이스와 인증 같은 백엔드 기능을 제공하는 서비스야.
프론트엔드 개발자가 복잡한 서버 작업 없이 바로 사용할 수 있도록 도와주고, PostgreSQL 기반이라 데이터베이스를 강력하게 활용할 수 있어.

📍주요 기능

1. Database(데이터베이스)

• PostgreSQL 기반으로 데이터를 저장하고 관리 가능.
• 데이터 테이블을 쉽게 만들고 수정 가능.
• 실시간 데이터 업데이트 지원!

2. Authentication(인증)

• 이메일/비밀번호 로그인, 소셜 로그인(Kakao, Google 등) 같은 인증 기능 제공.
• 사용자를 쉽게 관리.

3. Storage(스토리지)

• 이미지, 동영상, 파일 같은 데이터를 업로드하고 저장 가능.

4. Realtime(실시간)

• 채팅 앱처럼 실시간 데이터 업데이트가 필요한 앱 개발에 유용.
• 테이블 데이터를 변경하면, 프론트엔드에서 바로 반영 가능.

5. API 자동 생성

• 데이터베이스 테이블을 만들면, 자동으로 RESTful API와 GraphQL API를 제공.

6. 호스팅

• 정적 사이트를 배포하거나, 백엔드 호스팅 가능.

🔍 자주 사용되는 패턴(예시)

1️⃣ 데이터베이스 CRUD

Supabase에서 테이블을 생성하고 데이터를 추가, 조회, 수정, 삭제 가능.

// 데이터 조회 예시
const { data, error } = await supabase
  .from('table_name') // 테이블 이름
  .select('*');       // 모든 데이터 가져오기

🙌 insert([{ ... }]): 데이터 추가, select('*'): 데이터 조회 , update({ ... }).eq('id', ...): 데이터 수정, delete().eq('id', ...): 데이터 삭제

2️⃣ 사용자 인증 (로그인/회원가입)

// 이메일 회원가입
const { user, error } = await supabase.auth.signUp({
  email: 'example@example.com',
  password: 'password123',
});
// 이메일 로그인
const { session, error } = await supabase.auth.signInWithPassword({
  email: 'example@example.com',
  password: 'password123',
});
// 로그아웃
await supabase.auth.signOut();

🙌 supabaseAuth는 추가로 정리할 예정!!

3️⃣ 소셜 로그인

Supabase 대시보드에서 Authentication → Providers에서 Kakao, Google 등을 활성화하하면 됨.

// 소셜 로그인 (예: Google)
const { user, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
});

🙌 소셜로그인도 추가로 정리할 예정!!

4️⃣ 파일 업로드 (Storage)

이미지나 파일을 업로드하고 다운로드 가능.

// 파일 업로드
const { data, error } = await supabase.storage
  .from('bucket_name') // 스토리지 버킷 이름
  .upload('path/to/file', file);

🙌 추가로 정리할 예정!!

5️⃣ 실시간 데이터 업데이트

테이블의 데이터가 변경되면 실시간으로 반영 가능.

supabase
  .channel('public:table_name')
  .on('postgres_changes', { event: '*', schema: 'public', table: 'table_name' }, (payload) => {
    console.log('Change received!', payload);
  })
  .subscribe();

6️⃣ Next.js와 통합

Supabase는 Next.js와 잘 어울려요. getServerSideProps나 middleware와 함께 사용하면 서버에서 인증 상태를 확인하거나 데이터를 미리 가져올 수 있음.

export async function getServerSideProps(context) {
  const { data: user } = await supabase.auth.getUser();
  if (!user) {
    return { redirect: { destination: '/login', permanent: false } };
  }
  return { props: { user } };
}

🙌 middleware도 추가로 정리 예정!!

🚀 진짜 쉬운 설명

• Supabase 대시보드 활용
  • Auth: 사용자 관리.
  • Database: 데이터 테이블 생성 및 쿼리 실행.
  • Storage: 파일 업로드 및 관리.
  • Settings: API 키 및 프로젝트 설정 확인.

🔍 supabase 장점

• 간편함: 코드 몇 줄로 복잡한 백엔드 기능을 구현 가능.
• 무료 플랜: 초기에 무료로 시작 가능.
• 오픈소스: Firebase와 다르게 오픈소스라서 유연하게 커스터마이징 가능.
• TypeScript 친화적: 타입 안정성을 높이기 좋고, Next.js와 잘 어울림.

🔍 supabase로 만들 수 있는 것

• 소셜 로그인 앱: Kakao, Google, GitHub 같은 로그인 추가.
• To-Do 리스트: 데이터 저장, 실시간 업데이트.
• 채팅 앱: 실시간 채팅 기능.
• 이미지 업로드 앱: 파일 업로드 및 관리.

---

✏️ 더 알아가기

• BaaS란?
  웹과 모바일 앱 개발을 쉽고 빠르게 할 수 있도록 도와주는 클라우드 기반의 백엔드 서비스야. 복잡한 백엔드 시스템을 직접 관리하지 않아도 되니, 개발자들이 프론트엔드에 더 집중할 수 있어!