๐Ÿฆ• Supabase๋ž€ ๋ฌด์—‡์ธ๊ฐ€!

Janeยท2023๋…„ 11์›” 3์ผ
18
post-thumbnail

์ด๋ฒˆ ์œ ๊ธฐ๋™๋ฌผ ๊ณต๊ณ  ๊ด€๋ จ ํ† ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ,
์‚ฌ์šฉ์ž ๊ด€๋ จ ๋ฐ์ดํ„ฐ ๋กœ์ง์„ Supabase๋ฅผ ํ†ตํ•ด ๊ตฌํ˜„ํ•˜์˜€๋‹ค.
๊ทธ๋Ÿฐ๋ฐ ์—ฌ๊ธฐ์„œ Supabase๋Š” ์ •ํ™•ํžˆ ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š” ๊ฑธ๊นŒ?

๐Ÿ–ฅ๏ธ BaaS

  • Backend as a Service; ์„œ๋น„์Šคํ˜• ๋ฐฑ์—”๋“œ
  • ํ”„๋ก ํŠธ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋ธ์ด๋‹ค.
  • ๋ฐฑ์—”๋“œ ์ธก๋ฉด ๊ฐœ๋ฐœ์„ ์ž๋™ํ™”์‹œํ‚ค๊ณ  ํด๋ผ์šฐ๋“œ ์ธํ”„๋ผ๋ฅผ ๋‹ค๋ฃจ๋Š” ํ”Œ๋žซํผ์ด๋‹ค.
  • BaaS์˜ ์˜ˆ์‹œ
    - Firebase
    - Supabase
    - AWS Amplify
    - Game Sparks
  • BaaS ๊ณต๊ธ‰์—…์ฒด๋Š” ํ™•์žฅ์„ฑ ๋ฐ ๋ณด์•ˆ ๋ณด์žฅ์„ ์œ„ํ•ด ํด๋ผ์šฐ๋“œ ๋ฐ ์„œ๋ฒ„๋ฆฌ์Šค ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•œ๋‹ค.
  • BaaS๋ฅผ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋Š” ํŽธ๋ฆฌํ•˜๊ฒŒ ์ตœ์ƒ์˜ UI/UX๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๋ฉฐ, ๋ชจ๋“  ๋ฐฑ์—”๋“œ ์ฝ”๋“œ๋ฅผ BaaS ๊ณต๊ธ‰์—…์ฒด์— ์•„์›ƒ์†Œ์‹ฑ ํ•  ์ˆ˜ ์žˆ๋‹ค.
    - ๋‹ค์‹œ ๋งํ•ด ๊ฐœ๋ฐœ์ž๋Š” ์ œ3์ž์—๊ฒŒ ์„œ๋ฒ„ ์šด์˜ ๋ฐ ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ์ฑ…์ž„์„ ์œ„ํƒํ•˜๊ณ  ํ”„๋ก ํŠธ์—”๋“œ ๋ฐ ์‚ฌ์šฉ์ž ์ธก๋ฉด ๊ฐœ๋ฐœ์— ์ดˆ์ ์„ ๋งž์ถœ ์ˆ˜ ์žˆ๋‹ค.
  • ๋˜ํ•œ BaaS๋Š” ๋ฐฑ์—”๋“œ ์ฝ”๋“œ๋ฅผ ๋งŒ๋“ค๊ณ  DX๋ฅผ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” ๋„๊ตฌ๋“ค์„ ์ œ๊ณตํ•œ๋‹ค.
    - API๋ฅผ ํ†ตํ•ด DB์— ๋Œ€ํ•œ ์ ‘๊ทผ์„ ๋ณด์žฅํ•˜๊ณ , ์‚ฌ์šฉ์ž ์ธ์ฆ, ํŒŒ์ผ ์ €์žฅ, ํ‘ธ์‹œ ์•Œ๋ฆผ, ์ž๋™ํ™”๋œ ํ…Œ์ŠคํŠธ ์†”๋ฃจ์…˜ ๋“ฑ์˜ ์„œ๋น„์Šค๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋‹ค.
    - ์ด๋กœ์จ ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค ์†๋„๊ฐ€ ํ–ฅ์ƒ๋˜๋ฉฐ ์ตœ์ข… ์‚ฌ์šฉ์ž๋Š” ๊ฐ€๋Šฅํ•œ ํ•œ ๋น ๋ฅด๊ฒŒ ์„œ๋น„์Šค์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

BaaS VS. Custom Backend

  • ๋ฐฑ์—”๋“œ๋ฅผ ์ง์ ‘ ์ปค์Šคํ…€ํ•  ๊ฒฝ์šฐ ์ง์ ‘ ๋ฐฑ์—”๋“œ ์˜์—ญ์„ ๊ตฌ์ถ•ํ•˜๊ณ  ์ธํ”„๋ผ๋ฅผ ๋‹ค๋ค„์•ผ ํ•œ๋‹ค.
    - ์žฅ์ : ์œ ์—ฐ์„ฑ ๋ฐ ๋งž์ถคํ™” ๊ธฐ๋Šฅ
    • ๋‹จ์ : ๋” ๋†’์€ ๊ฐœ๋ฐœ ๋น„์šฉ๊ณผ ์‹œ๊ฐ„ ์†Œ๋ชจ
  • BaaS๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ๋งŒ๋“ค์–ด์ง„ ๋ธ”๋ก๊ณผ ์ฝ”๋“œ ์ƒ์„ฑ ๋„๊ตฌ๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ์žฅ์ : ๋น ๋ฅธ ๊ฐœ๋ฐœ ์†๋„, ๊ฐœ๋ฐœ ๋น„์šฉ ์ ˆ์•ฝ, ํด๋ผ์šฐ๋“œ ์ธํ”„๋ผ ๊ด€๋ฆฌ ์œ„ํƒ
    • ๋‹จ์ : ์œ ์—ฐ์„ฑ์ด ๋‚ฎ๊ณ  ํ‘œ์ค€ํ™”๋œ ๊ตฌ์กฐ๋ฅผ ๋”ฐ๋ฅด๊ฒŒ ๋œ๋‹ค.

๐Ÿ”ฅ Firebase ๋Œ€์‹  Supabase๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

Firebase ์žฅ์ 

  • ์›น์†Œ์ผ“๊ณผ SSE(Server-Sent-Event)๊ฐ€ ๋Œ€์ค‘ํ™” ๋˜๊ธฐ ์ „๊นŒ์ง€ ํ˜์‹ ์ ์ธ ์‹ค์‹œ๊ฐ„ DB๋ฅผ ์ œ๊ณตํ–ˆ๋‹ค.
  • RTSP(Real-Time-Stream-Protocol) ๋ฐฉ์‹์˜ DB๋ฅผ ์ง€์›ํ•˜์—ฌ ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ ๋™๊ธฐํ™” ๊ธฐ๋Šฅ์„ ๋ฌด๋ฃŒ๋กœ ์ œ๊ณตํ•ด์ค€๋‹ค.
  • ์ตœ์‹  ๋ฐ์ดํ„ฐ์— ๊ด€๋ จ๋œ ํด๋ผ์ด์–ธํŠธ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฌธ์ œ์ ์ด ํ•ด๊ฒฐ๋œ๋‹ค.
  • ์„œ๋ฒ„ ๊ด€๋ฆฌ์ž ํŽ˜์ด์ง€, ์›๊ฒฉ ๊ตฌ์„ฑ ๋ฐ ์‚ฌ์šฉ์ž ํ†ต๊ณ„ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

Firebase ๋‹จ์ 

  • ์„œ๋ฒ„๊ฐ€ ํ•ด์™ธ์— ์œ„์น˜ํ•˜์—ฌ ์„œ๋ฒ„์˜ ์‘๋‹ต ์ฒ˜๋ฆฌ ์†๋„๊ฐ€ ๋Š๋ ค์งˆ ๋•Œ๊ฐ€ ์žˆ๋‹ค.
  • NoSQL ๊ธฐ๋ฐ˜์˜ DB์ด๋ฏ€๋กœ ์ฟผ๋ฆฌ๊ฐ€ ๋นˆ์•ฝํ•ด ๋ฐ์ดํ„ฐ ๊ฒ€์ƒ‰์ด ์–ด๋ ต๋‹ค.
  • ๋กœ์ปฌ์—์„œ์˜ ์™„๋ฒฝํ•œ ์‹คํ–‰์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋ฉฐ ์ธ๋ฑ์Šค ์ƒ์„ฑ์ด ๋”๋””๋‹ค.
  • ์˜คํ”ˆ์†Œ์Šค๊ฐ€ ์•„๋‹ˆ๋ผ ์ง€์†์ ์ผ ๊ฒƒ์ด๋ผ๋Š” ๋ณด์žฅ์ด ์—†๊ณ , CLI(๋ช…๋ น์ค„ ์ธํ„ฐํŽ˜์ด์Šค)๊ฐ€ ํ์‡„์ ์ด๋‹ค.
  • Cloud Function CI/CD(์ง€์†์  ํ†ตํ•ฉ/์ง€์†์  ๋ฐฐํฌ)๊ฐ€ ๋‚˜๋น ์กŒ๋‹ค.

๊ทธ๋ž˜์„œ, Supabase

  • Supabase๋Š” PostgreSQL ๊ธฐ๋ฐ˜์˜ SQL DB ๊ธฐ๋Šฅ๊ณผ REST API, ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ ๋“ฑ์˜ ๊ณ ์œ ํ•œ ๊ธฐ๋Šฅ์„ ์˜คํ”ˆ์†Œ์Šค๋กœ ์ œ๊ณตํ•œ๋‹ค.
  • Firebase์ฒ˜๋Ÿผ ํŽธ๋ฆฌํ•˜๋ฉฐ Firebase์—์„œ๋Š” ์ œ๊ณตํ•˜์ง€ ๋ชปํ•˜๋Š” RDB๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
    - RDB(Relational-DataBase): ์—‘์…€ ์‹œํŠธ์ฒ˜๋Ÿผ ๋นˆ ์นธ์— ๋‚ด์šฉ์„ ์ฑ„์›Œ๊ฐ€๋Š” DB ๋ฐฉ์‹
  • ํŽธ๋ฆฌํ•œ ์‚ฌ์šฉ์ฐฝ
    - SQL Editor: SQL ์ฟผ๋ฆฌ๋ฅผ ์›นํŽ˜์ด์ง€์—์„œ ์ž‘์„ฑ, ์ €์žฅ, ์‹คํ–‰ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. ํ…Œ์ด๋ธ” ์Šคํ‚ค๋งˆ๋ฅผ ์‰ฝ๊ฒŒ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.
    • Table Editor: DB ๋‚ด๋ถ€์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์Šคํ”„๋ ˆ๋“œ์‹œํŠธ(์—‘์…€)์ฒ˜๋Ÿผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
  • ํด๋ผ์ด์–ธํŠธ, ์„œ๋ฒ„ ํ™˜๊ฒฝ ๋‘ ๊ณณ์—์„œ ๋™์ผํ•œ ๋ฐฉ์‹์˜ ์ž‘์—…์ด ๊ฐ€๋Šฅํ•˜๋„๋ก isomorphic JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
    - isomorphic: ๋™ํ˜• ์‚ฌ์ƒ. ์„œ๋กœ ๊ตฌ์กฐ๊ฐ€ ๊ฐ™์€ ๋‘ ๋Œ€์ƒ ์‚ฌ์ด์— ๋ชจ๋“  ๊ตฌ์กฐ๋ฅผ ๋ณด์กดํ•˜๋Š” ์‚ฌ์ƒ

๐Ÿค“ Supabase, ์ด๋ ‡๊ฒŒ ์‚ฌ์šฉํ•ฉ์‹œ๋‹ค!

ํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ

  • ์œ„์˜ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ์‹œ ํ•ด๋‹น ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ•  ์„œ๋ฒ„ ์ธ์Šคํ„ด์Šค์™€ PostgreSQL DB๊ฐ€ ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋œ๋‹ค.
  • Next.js ํ”„๋กœ์ ํŠธ์— Supabase ์ ์šฉํ•˜๊ธฐ

์†Œ์…œ ๋กœ๊ทธ์ธ ๊ตฌํ˜„ํ•˜๊ธฐ

const { data, error } = await supabase.auth.signUp({
  email: "example@email.com",
  password: "example-password",
});
  • supabase.auth.signup๋ฅผ ํ˜ธ์ถœํ•ด Supabase์˜ ์„œ๋ฒ„์— ์ €์žฅ๋  ์ƒˆ๋กœ์šด ์œ ์ €๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ด๋Ÿฌํ•œ ์‚ฌ์šฉ์ž์— ๋Œ€ํ•œ ๋กœ๊ทธ์ธ์„ ๊ตฌํ˜„ํ•˜๋ ค๋ฉด
    - ๋‹จ์ˆœ ID/password ๋กœ๊ทธ์ธ: supabase.auth.signInWithPassword
    • ๋กœ๊ทธ์ธ ๋œ ์œ ์ € ์ •๋ณด ํ™•์ธ: supabase.auth.getUser() (์„ธ์…˜์ด ๋กœ์ปฌ ์ฟ ํ‚ค์— ์ €์žฅ๋จ)

์†Œ์…œ ๋กœ๊ทธ์ธ ๊ตฌํ˜„ํ•˜๊ธฐ

  • Supabase๋Š” 10๊ฐœ ์ด์ƒ์˜ ์ฃผ์š” ์†Œ์…œ ๋กœ๊ทธ์ธ ํ”„๋กœ๋ฐ”์ด๋”๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ  ์žˆ์–ด์„œ ๊ฐ„ํŽธํ•˜๊ฒŒ ์ฝ”๋“œ ๋ช‡ ์ค„๋งŒ ์ž…๋ ฅํ•˜๋ฉด ์†Œ์…œ ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
async function signInWithGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "google", // kakao๋„ ๊ฐ€๋Šฅํ•˜๋‹ค!
  });
}

DB ์ƒ์„ฑํ•˜๊ธฐ

  • Supabase ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ์‹œ ๊ฐ™์ด ๋งŒ๋“ค์–ด์ง„ PostgreSQL DB๋Š” Supabase ํŽ˜์ด์ง€์˜ ๋Œ€์‹œ๋ณด๋“œ์—์„œ ๊ฐ„ํŽธํ•˜๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ํ…Œ์ด๋ธ”์„ ์ƒˆ๋กœ ์ถ”๊ฐ€ํ•˜๋ ค ํ•œ๋‹ค๋ฉด ์•„๋ž˜์˜ ์ฐฝ์— ์ด๋ฆ„์„ ๋ถ€์—ฌํ•˜์—ฌ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ๊ฐ ๋ฐ์ดํ„ฐ์˜ key์™€ value์˜ type ๋“ฑ๋„ ํŽธ๋ฆฌํ•˜๊ฒŒ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ์ด์ฒ˜๋Ÿผ ํ…Œ์ด๋ธ”์„ ์ƒ์„ฑํ•˜๋ฉด ์ด์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•œ REST API๊ฐ€ ์ž๋™ ์ƒ์„ฑ๋˜๊ณ , ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ๋Š” SDK๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‰ฝ๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.
    - SDK (Software Development Kit): ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ ๋„๊ตฌ ๋ชจ์Œ
    • ํ”„๋ก ํŠธ์—”๋“œ์—์„œ DB ์ฟผ๋ฆฌ๋ฅผ ํ•„์š”์— ๋”ฐ๋ผ ์ง์ ‘ ์ž‘์„ฑํ•ด ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋‹จ์ˆœ CRUD๋ฅผ ์œ„ํ•ด ๋ฐฑ์—”๋“œ์—์„œ ๋ณ„๋„์˜ API๋ฅผ ๊ตฌํ˜„ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค.

RLS (Row-Level-Security)

  • ํ–‰ ์ˆ˜์ค€ ๋ณด์•ˆ
  • '์ž์‹ ์˜ ๋ฐ์ดํ„ฐ๋งŒ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค'๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ณด์•ˆ ์ •์ฑ… ์„ค์ •์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ํ”„๋ก ํŠธ์—”๋“œ ์ธก์—์„œ ํ•„์š”ํ•œ DB ์ฟผ๋ฆฌ๋ฅผ ์ง์ ‘ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•˜๋‹ค.
  • PostgreSQL์˜ Row Level Security ๊ธฐ๋Šฅ์„ ํ†ตํ•ด Supabase์— ๊ตฌํ˜„๋˜์–ด ์žˆ๋‹ค.
  • ์˜ˆ: Supabase ๋Œ€์‹œ๋ณด๋“œ๋ฅผ ์‚ฌ์šฉํ•ด ํŠน์ • ํ…Œ์ด๋ธ”์— ๋Œ€ํ•ด ๋ณธ์ธ์˜ Row๋งŒ ์กฐํšŒ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ •์ฑ… ์ถ”๊ฐ€ํ•˜๊ธฐ
    - ์ด๋•Œ Supabase๋Š” ์•”๋ฌต์ ์œผ๋กœ ์ด ์ •์ฑ…์— ๊ธฐ๋ฐ˜ํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ์‹คํ–‰ํ•˜๋Š” ์ฟผ๋ฆฌ์— ๋Œ€ํ•œ ํ•„ํ„ฐ๋ง ์กฐ๊ฑด์„ ์ž๋™์œผ๋กœ ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.

๐Ÿ”Ž References

profile
An investment in knowledge pays the best interest๐Ÿ™ƒ

0๊ฐœ์˜ ๋Œ“๊ธ€