์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

[ํ’€์Šคํƒ ์ž…๋ฌธ] Firebase๋ณด๋‹ค 10๋ฐฐ ์ข‹์€ Supabase

ํ’€์Šคํƒ ๊ฐœ๋ฐœ์— ๋‚ ๊ฐœ๋ฅผ ๋‹ฌ์•„์ค„ Supabase! Firebase์˜ ์ƒ์œ„ํ˜ธํ™˜์ธ Supabase๋กœ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„ 2์‹œ๊ฐ„๋งŒ์— ์™„์„ฑํ•ฉ๋‹ˆ๋‹ค.

(4.9) ์ˆ˜๊ฐ•ํ‰ 108๊ฐœ

์ˆ˜๊ฐ•์ƒ 2,062๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

์ด๋ก  ์‹ค์Šต ๋ชจ๋‘
์ด๋ก  ์‹ค์Šต ๋ชจ๋‘
์ด๋ก  ์‹ค์Šต ๋ชจ๋‘
์ด๋ก  ์‹ค์Šต ๋ชจ๋‘

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

4.9

5.0

๊ตฌ๊ตฌ๋‹˜

31% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

์ˆ˜ํŒŒ๋ฒ ์ด์Šค ๊ฐ•์˜๊ฐ€ ์ ์–ด์„œ ์‚ฌ์‹ค์ƒ ๋ง‰๋ง‰ํ–ˆ๋Š”๋ฐ ์งง๊ณ  ๊ฐ„๊ฒฝํ•ด์„œ ์ •๋ณด๋ฅผ ์Šต๋“ํ•˜๊ธฐ ์ข‹์Šต๋‹ˆ๋‹ค. ์‹œ์ž‘ ํ•˜์‹œ๋Š” ๋ถ„๋“ค์—๊ฒŒ ์ตœ๊ณ ์˜ ๊ฐ•์˜.

5.0

๋‚˜๋ฅผ์‘์›ํ•ด

81% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

supabase์ž…๋ฌธ์— ํฐ ๋„์›€์ด ๋์”๋‹ˆ๋‹ค!!!! ์กฐ๊ธˆ ์ง„ํ–‰ํ•ด๋ณด๋‹ค๊ฐ€ ์œ ๋ฃŒ๊ฐ•์˜ ์ƒ๊ฐํ•ด๋ณด๊ฒ ์”€๋‹ˆ๋‹คใ…Žใ…Ž

5.0

๊บผ๋ฟ์ด์™€๋šœ๋ฃจ๋ฏธ

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

Supabase๊ฐ€ ๋ญ”์ง€ ๊ถ๊ธˆํ•ด์„œ ํ™€๋ฆฌ๋“ฏ์ด ๋“ค์–ด์™”๋Š”๋ฐ ์œ ์ตํ–ˆ์Šต๋‹ˆ๋‹ค! ๋˜ํ•œ Javascript ์ƒํƒœ๊ณ„์— ๋Œ€ํ•ด์„œ ์ต์ˆ™ํ•˜์ง€ ์•Š์•˜๋Š”๋ฐ ๋ฉ๋‹ฌ์•„ ์ดํ•ด๋„๋ฅผ ์˜ฌ๋ฆด ์ˆ˜ ์žˆ์–ด ์ข‹์•˜์–ด์š”! ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • Supabase์™€ Next.js๋กœ ํ’€์Šคํƒ ๊ฐœ๋ฐœ ํ•˜๋Š”๋ฒ•

  • Supabase์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ 4๊ฐ€์ง€

  • Firebase vs Supabase ์ „๊ฒฉ๋น„๊ต

  • PostgreSQL, Tailwind CSS, Next.js 14

์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ์—ฌ๋Ÿฌ๋ถ„์€



SSR ๊ธฐ๋ฐ˜์˜ ์›น ํ”„๋ ˆ์ž„์›Œํฌ์ธ Next.js์™€

๊ฐ•๋ ฅํ•œ ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค์ธSupabase์˜ ์กฐํ•ฉ์œผ๋กœ



๋ฏธ๋‹ˆ ๋…ธํŠธ์•ฑ์„ ํ’€์Šคํƒ์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋ฉฐ

Supabase ์‚ฌ์šฉ๋ฒ•์„ 2์‹œ๊ฐ„๋งŒ์— ํ„ฐ๋“ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค!

ํŒŒ์ด์–ด๋ฒ ์ด์Šค์˜ ๊ฐ•๋ ฅํ•œ ๋Œ€ํ•ญ๋งˆ,

๐Ÿš€์ŠˆํŒŒ๋ฒ ์ด์Šค๐Ÿš€

PostgreSQL ๊ธฐ๋ฐ˜์œผ๋กœ ๋ณต์žกํ•œ ์š”๊ตฌ์‚ฌํ•ญ๋„ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•ด์š”

์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๊ธฐ๋Šฅ์œผ๋กœ ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ… ๊ฐœ๋ฐœ๋„ ๋”์ด์ƒ ๋ฌด์„ญ์ง€ ์•Š์•„์š”

์†Œ์…œ ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ๋„ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•ด์š” (์นด์นด์˜ค, ๊ตฌ๊ธ€, etc)

SDK, GraphQL, API ๋“ฑ ๋‚˜์—๊ฒŒ ํŽธํ•œ ๋ฐฉ์‹์œผ๋กœ ์†์‰ฝ๊ฒŒ ์—ฐ๋™ํ•ด์š”

์–ด๋“œ๋ฏผ ํŽ˜์ด์ง€์™€ ์ž๋™์œผ๋กœ SQL์„ ๋งŒ๋“ค์–ด์ฃผ๋Š” AI ๊ธฐ๋Šฅ๋„ ๋‹ค ๋ฌด๋ฃŒ์—์š”

์ด ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜์‹  ๋ถ„๋“ค๋งŒ

์–ป์–ด๊ฐ€์‹ค ์ˆ˜ ์žˆ๋Š” ํ˜œํƒ 3๊ฐ€์ง€!

ํ˜œํƒ 1โƒฃ

Supabase์˜ ์ด๋ก ๊ณผ ์‹ค๋ฌด๋ฅผ ๋ชจ๋‘ ๋ฐฐ์›Œ์š”!

(โœ… ๋Œ€์‹œ๋ณด๋“œ ์‚ฌ์šฉ๋ฒ•๊ณผ DB ์ฟผ๋ฆฌ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฒ•์„ ์ƒ์„ธํžˆ ๋ฐฐ์›Œ์š”)

Supabase์˜ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ๋“ค์„

์‚ดํŽด๋ณด๋ฉด์„œ Supabase๋ผ๋Š” ์„œ๋น„์Šค์— ๋Œ€ํ•ด

๋น ๋ฅด๊ฒŒ ์•Œ์•„๊ฐ€์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜‰

ํ˜œํƒ 2โƒฃ

Supabase์™€ Next.js 14๋กœ

๋ฏธ๋‹ˆ ๋…ธํŠธ์•ฑ์„ ๋งŒ๋“ค์–ด๋ณด๋ฉฐ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„ ๋ฐฐ์›๋‹ˆ๋‹ค!

(โœ… Supabase๋ฅผ ํ™œ์šฉํ•œ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์— ๋น ๋ฅด๊ฒŒ ์ต์ˆ™ํ•ด์ง‘๋‹ˆ๋‹ค)

ํ˜œํƒ 3โƒฃ

์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ๋๊นŒ์ง€ ์ˆ˜๊ฐ•ํ•˜์‹ค ๊ฒฝ์šฐ

[ํ’€์Šคํƒ ์™„์„ฑ] Supabase๋กœ ์›น์‚ฌ์ดํŠธ 3๊ฐœ ํด๋ก ํ•˜๊ธฐ

๊ฐ•์ขŒ์˜ํ• ์ธ์ฟ ํฐ์„ ์ œ๊ณตํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Supabase๋ฅผ ๋” ๊นŠ๊ฒŒ ๋ฐฐ์›Œ๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค์„ ์œ„ํ•ด

์ธ์Šคํƒ€๊ทธ๋žจ, ๋„ทํ”Œ๋ฆญ์Šค, ๋“œ๋ž๋ฐ•์Šค๋ฅผ ํด๋ก ํ•˜๋Š” ํ’€์Šคํƒ ๊ฐ•์ขŒ์˜

ํ• ์ธ์ฟ ํฐ์„ ์ œ๊ณตํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค!

("๊ฐ•์˜๋ฅผ ๋งˆ์น˜๋ฉฐ" ๊ฐ•์ขŒ ์ˆ˜์—…๋…ธํŠธ ์ฐธ๊ณ )

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ๊ฐ•๋ ฅํžˆ ์ถ”์ฒœํ•ด์š”

ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„
์‹œ์ž‘ํ•˜๊ณ  ์‹ถ์€
ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์ž

Supabase๊ฐ€
์–ด๋–ค ์„œ๋น„์Šค์ธ์ง€
๊ถ๊ธˆํ–ˆ๋˜ ๋ถ„

์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ
์œ„ํ•œ ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค๋ฅผ
์ฐพ๊ณ ์žˆ๋Š” ๊ฐœ๋ฐœ์ž

Next.js 14์™€ Supabase์˜ ๊ฐ•๋ ฅํ•œ ์กฐํ•ฉ์œผ๋กœ๐Ÿš€

๊ฐ€์žฅ ๋น ๋ฅด๊ฒŒ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๋กœ ๋งŒ๋“ค์–ด๋“œ๋ฆฝ๋‹ˆ๋‹ค!

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

ํ•™์Šต ์ž๋ฃŒ

์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

  • Supabase ๊ฐœ๋…๊ณผ ์‚ฌ์šฉ๋ฒ•์€ ๋ˆ„๊ตฌ๋‚˜ ๋”ฐ๋ผ๊ฐ€์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

    โ˜บ

  • UI ๊ตฌํ˜„ ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜์‹œ๋ ค๋ฉด Next.js, Tailwind CSS ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๊ตฌ๋งค ํ›„์—๋„ ์ง€์†์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ๋˜๋Š” ๊ฐ•์ขŒ

  • ์ดํ•ดํ•˜๊ธฐ ์–ด๋ ค์šฐ์‹  ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด Q&A ์™ธ์—๋„ ๋ณด์ถฉ์„ค๋ช… ๊ฐ•์˜๊ฐ€ ์ถ”๊ฐ€๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

  • Supabase์— ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋œ๋‹ค๋ฉด ๊ฐ•์˜๊ฐ€ ์—…๋ฐ์ดํŠธ ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

#Next.js, #supabase, #tailwind-css, #react-query, #recoiljs, #firebase

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•˜๊ณ  ์‹ถ์€ ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์ž

  • Supabase๊ฐ€ ์–ด๋–ค ์„œ๋น„์Šค์ธ์ง€ ๊ถ๊ธˆํ–ˆ๋˜ ๋ถ„

  • ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ค€๋น„ํ•˜๊ณ  ์žˆ๋Š” ๊ฐœ๋ฐœ์ž

์•ˆ๋…•ํ•˜์„ธ์š”
๋กœํŽ€์ž…๋‹ˆ๋‹ค.

3,766

๋ช…

์ˆ˜๊ฐ•์ƒ

229

๊ฐœ

์ˆ˜๊ฐ•ํ‰

64

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

7

๊ฐœ

๊ฐ•์˜

๐Ÿš€ โ€œํ•ซํ•œ ์Šคํƒ์œผ๋กœ ์‹ค์ „ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๊ณผ์ •์„ ์ˆจ๊น€์—†์ด ๋ณด์—ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.โ€

์ด๋ก ๋ณด๋‹ค๋Š” ํ”„๋กœ์ ํŠธ ์œ„์ฃผ์˜ ์‹ค๋ฌด ๊ฐ•์˜๋กœ ํ˜„์—…์— ๋ฐ”๋กœ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ๋Š” ๋‚ด์šฉ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

  • (ํ˜„) ๋„ค์นด๋ผ์ฟ ๋ฐฐ ์žฌ์ง

  • (ํ˜„) 7๋…„์ฐจ ํ’€์Šคํƒ ๊ฐœ๋ฐœ

  • (๊ฐ•์˜) ์ŠคํŒŒ๋ฅดํƒ€ ์ฝ”๋”ฉํด๋Ÿฝ ๊ฐ•์‚ฌ

  • (๊ต์œก) ํ•œ๊ตญ๊ณผํ•™๊ธฐ์ˆ ์›(KAIST) ์ „์‚ฐํ•™๊ณผ ์กธ์—…

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

16๊ฐœ โˆ™ (1์‹œ๊ฐ„ 43๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

108๊ฐœ

4.9

108๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • csstumings804๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    csstumings804

    ์ˆ˜๊ฐ•ํ‰ 2

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    63% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    • ๊ฐ•๋ฏผ์žฌ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      ๊ฐ•๋ฏผ์žฌ

      ์ˆ˜๊ฐ•ํ‰ 5

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      63% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      • ํ˜„ํƒœํ›ˆ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        ํ˜„ํƒœํ›ˆ

        ์ˆ˜๊ฐ•ํ‰ 2

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        63% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        • bibipapa๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          bibipapa

          ์ˆ˜๊ฐ•ํ‰ 4

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          ๊ฐ•์˜๋ฅผ ๊ธฐ๋‹ค๋ฆฌ๊ณ  ์žˆ๋˜ Supabase๋ฅผ ๋“œ๋””์–ด ๋ฐฐ์šธ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๊ทธ๋ž˜์„œ ๋ฐ”๋กœ "[ํ’€์Šคํƒ ์™„์„ฑ] Supabase๋กœ ์›น์‚ฌ์ดํŠธ 3๊ฐœ ํด๋ก ํ•˜๊ธฐ (Next.js 14)"๋ฅผ ๊ฒฐ์ œํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋กœํŽ€๋‹˜๊ป˜์„œ ์นด์นด์˜ค๋งต ์ง€๋„ API์™€ ๊ณต๊ณต๋ฐ์ดํ„ฐํฌํ„ธ API ๊ฐ•์˜๋„ ๋งŒ๋“ค์–ด ์ฃผ์‹œ๋ฉด ์ •๋ง ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์•ž์œผ๋กœ๋„ ๋งŽ์€ ์œ ์ตํ•œ ๊ฐ•์˜ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

          • ๋กœํŽ€
            ์ง€์‹๊ณต์œ ์ž

            ํ’€์Šคํƒ ์‹ฌํ™” ๊ฐ•์˜๊นŒ์ง€ ๋“ค์–ด์ฃผ์‹œ๋‹ค๋‹ˆ ๋„ˆ๋ฌด ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ๐Ÿ™‡โ€โ™‚๏ธ ๋‹ค์Œ ๊ฐ•์˜๋Š” ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ๋ฐฑ์—”๋“œ ๊ฐ•์˜๊ฐ€ ๋  ๊ฒƒ ๊ฐ™์•„์š” ใ…Žใ…Ž ์–ธ๊ธ‰ํ•ด์ฃผ์‹  ์นด์นด์˜ค๋งต API, ๊ณต๊ณต๋ฐ์ดํ„ฐํฌํ„ธ API๋ฅผ ํ™œ์šฉํ•œ ๊ฐ•์˜๋„ ๊ฐ•์˜ ์ œ์ž‘ํ•  ๋•Œ ์ฐธ๊ณ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! ์ข‹์€ ์˜๊ฒฌ ์ฃผ์…”์„œ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค~

        • ์ •ํ˜ธ์—ฐ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          ์ •ํ˜ธ์—ฐ

          ์ˆ˜๊ฐ•ํ‰ 74

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          31% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          ๋กœํŽ€๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

          ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

          ๋น„์Šทํ•œ ๊ฐ•์˜

          ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

          โ‚ฉ22,000