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

ํ’€์Šคํƒ ๊ฐœ๋ฐœ์— ๋‚ ๊ฐœ๋ฅผ ๋‹ฌ์•„์ค„ Supabase! 3๊ฐ€์ง€์˜ ํด๋ก  ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด Next.js 14์™€ Supabase๋กœ ์‹ค๋ฌด ์ˆ˜์ค€์˜ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„ ํ•˜๋Š” ๋ฒ•์„ ์†์„ฑ์œผ๋กœ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

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

์ˆ˜๊ฐ•์ƒ 875๋ช…

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

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

์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
ํด๋ก ์ฝ”๋”ฉ
ํด๋ก ์ฝ”๋”ฉ
์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
ํด๋ก ์ฝ”๋”ฉ
ํด๋ก ์ฝ”๋”ฉ

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

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

4.9

5.0

official

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

์ด ๊ฐ•์˜๋ฅผ ๋“ค์„์ง€ ๋ง์ง€ ๊ณ ๋ฏผํ•˜์‹œ๋Š” ๋ถ„๋“ค์„ ์œ„ํ•ด ์ œ๊ฐ€ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ ๋А๋‚€ ์žฅ์ ์— ๋Œ€ํ•ด ์„ค๋ช…๋“œ๋ฆฌ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋“ค์œผ๋ฉด ๋„์›€์ด ๋  ์‚ฌ๋žŒ๋“ค์„ ์ •๋ฆฌํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค ์žฅ์  1. 3๊ฐœ์˜ ํด๋ก ์ฝ”๋”ฉ์œผ๋กœ ์ตœ์‹  ๊ธฐ์ˆ  ๋ฐ Supabase๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ๋น ๋ฅด๊ฒŒ ์ต์ˆ™ํ•ด์งˆ ์ˆ˜ ์žˆ๋‹ค 2. Server Actions์™€ ๊ฐ™์€ NextJS์˜ ์ตœ์‹ ๊ธฐ์ˆ ์„ ์ง์ ‘ ๊ฒฝํ—˜ํ•˜๊ณ  ๊ตฌํ˜„ํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค 3. ๋ฌดํ•œ์Šคํฌ๋กค๊ณผ ๊ฐ™์ด ์‹ค์ œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ ํ•„์š”ํ•œ ํ•ต์‹ฌ์ ์ธ ๊ธฐ๋Šฅ๋“ค์„ ์ค‘์‹ฌ์ ์œผ๋กœ ํ•™์Šตํ•  ์ˆ˜ ์žˆ๋‹ค 4. Vercel๊ณผ AWS ๋‘ ๊ฐ€์ง€์˜ ๋ฒ„์ „์˜ ๋ฐฐํฌ ๋ฐฉ๋ฒ•์„ ํ•™์Šตํ•˜์—ฌ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค ์žฅ์ ์€ ์ด๋ ‡๊ฒŒ ๋„ค ๊ฐ€์ง€๋กœ ์„ค๋ช…๋“œ๋ฆด ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ์ด ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™์€ ๋ถ„๋“ค์„ ์ •๋ฆฌํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค 1. ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ์™€ ์„œ๋ฒ„API์— ๊ธฐ์ดˆ์ ์ธ ๋ฐฐ๊ฒฝ์ง€์‹์ด ์žˆ์œผ๋ฉฐ, ๋ฐ˜๋ณต ํ•™์Šต์„ ํ†ตํ•ด ์ˆ™๋ จ์‹œํ‚ค๊ณ  ์‹ถ์œผ์‹  ๋ถ„ 2. ๋ฐฑ์—”๋“œ์™€ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ํ†ตํ•ฉํ•˜์—ฌ ํ•˜๋‚˜์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์™„์„ฑ์‹œ์ผœ๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„ 3. ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ๋ถ€ํ„ฐ ๋ฐฐํฌ๊นŒ์ง€ ๋ชจ๋“  ๊ณผ์ •์„ ์ง์ ‘ ๊ฒฝํ—˜ํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„ 4. ๋ฐ˜๋ณต์ ์ธ ํ•™์Šต์œผ๋กœ ์ฝ”๋“œ ๋ฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„์— ์ต์ˆ™ํ•ด์ง€๊ณ  ์‹ถ์œผ์‹  ๋ถ„ ์ดˆ๋ฐ˜์— React Query, Recoil, NextJS ๋“ฑ ํ•ด๋‹น ๊ฐ•์˜์—์„œ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ  ์Šคํƒ์— ๋Œ€ํ•ด ์ „์ฒด์ ์ธ ์„ค๋ช…์„ ํ•ด์ฃผ๋Š” ๊ฐ•์˜๊ฐ€ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๊ธด ํ•˜์ง€๋งŒ, ๊ธฐ์ดˆ์ ์ธ ์ง€์‹์ด ์—†๋Š” ๊ฒฝ์šฐ ์ดํ•ดํ•˜๊ธฐ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ์ˆ ์ด๋‚˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•œ ๊ธฐ์ดˆ ์„ค๋ช…๋ณด๋‹ค๋Š” ํ™œ์šฉ ์œ„์ฃผ๋กœ ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐฐ๊ฒฝ์ง€์‹์ด ์—†๋‹ค๋ฉด ๋จผ์ € ๊ธฐ๋ณธ์ ์ธ ๋‚ด์šฉ์„ ํ•™์Šตํ•˜์‹œ๊ณ  ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ํƒ€ ๊ฐ•์˜์— ๋น„ํ•ด ์ง„ํ–‰์†๋„๊ฐ€ ๋น ๋ฅด๊ณ  ์™„์„ฑํ•˜๋Š” ํ”„๋กœ์ ํŠธ ๊ฐฏ์ˆ˜๊ฐ€ ๋งŽ์€ ๋งŒํผ ๋‹จ๊ธฐ๊ฐ„์— ๋ฐ˜๋ณต์ ์œผ๋กœ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜์—ฌ ์‹ค๋ ฅ ํ–ฅ์ƒ์ด ์ฒด๊ฐ๋จ์„ ๋А๋ผ์‹ค ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ˆ™๋ จ์„ ์œ„ํ•ด ๊ฐ•์˜๋ฅผ ๊ณ ๋ฏผํ•˜์‹œ๋Š” ๋ถ„์ด๋ผ๋ฉด ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

5.0

Jane

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

Supabase๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ Next.js์— ์‚ฌ์šฉํ•˜๋ ค๋‹ˆ ์ž๋ฃŒ๊ฐ€ ๋ถ€์กฑํ•ด์„œ ์–ด๋ ค์›€์„ ๊ฒช๋˜ ์ค‘ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ๊ฐ™์€ ๊ฐ„๋‹จํ•œ ํ”„๋กœ์ ํŠธ๋กœ Supabase์˜ ๊ธฐ๋ณธ์„ ์ตํžˆ๊ณ  ๋‚˜์„œ Storage๋‚˜ Auth ๊ฐ™์€ ์ฃผ์š” ๊ธฐ๋Šฅ๋“ค๋„ ์ง์ ‘ ๊ตฌํ˜„ํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ์ ์ด ๋งˆ์Œ์— ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๋…ธ์…˜์— ๊ฐ•์˜ ๋‚ด์šฉ ์ •๋ฆฌ๋„ ์ž˜ ๋˜์–ด ์žˆ์–ด์„œ ๊ฐ•์˜๋ฅผ ๋”ฐ๋ผ๊ฐ€๊ธฐ์— ์–ด๋ ค์›€์ด ์—†๊ณ  ์„ค๋ช…๋„ ์ฐจ๊ทผ์ฐจ๊ทผ ํ•ด์ฃผ์…”์„œ ํšŒ์‚ฌ๋ฅผ ๋‹ค๋‹ˆ๋ฉด์„œ๋„ ๊ฐ•์˜๋ฅผ ๋ฒŒ์จ ๊ฝค ๋งŽ์ด ๋“ค์„ ์ˆ˜ ์žˆ์—ˆ๋„ค์š”โ˜บ๏ธ ์ข‹์€ ๊ฐ•์˜ ๋งŒ๋“ค์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋„์›€์ด ๋งŽ์ด ๋˜์—ˆ์–ด์š”

5.0

์กฐํ˜„์„

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

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ํ•˜๋ฉด์„œ ์ €๋งŒ์˜ ์›น์•ฑ์„ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ์–ด ์ˆ˜๊ฐ•์„ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. Next.js์™€ Supabase ์—ฐ๋™์„ ํ˜ผ์ž ์‹œ๋„ํ–ˆ์„ ๋•Œ๋Š” ๋งŽ์ด ์–ด๋ ค์› ๋Š”๋ฐ, ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ๋งŽ์€ ๊ฒƒ์„ ๋ฐฐ์›Œ๊ฐˆ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ข‹์€ ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๋•๋ถ„์— ํฌํŠธํด๋ฆฌ์˜ค 3๊ฐœ ๋ค์œผ๋กœ ๊ฐ€์ ธ๊ฐ€๊ฒŒ๋ฉ๋‹ˆ๋‹ค ใ…Žใ…Ž ์ถ”๊ฐ€๋กœ, ํ˜„์žฌ Next.js๋Š” 15๋ฒ„์ „์ด๊ณ  ๊ฐ•์˜์—์„œ๋Š” 14๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด ๋ฌธ๋ฒ• ์ฐจ์ด๊ฐ€ ์ƒ๊ฐ๋ณด๋‹ค ๋งŽ์•˜์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜์— ๋ฒ„์ „ ์ฐจ์ด์— ๋Œ€ํ•œ ๋ณด์ถฉ ์ž๋ฃŒ๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์‹œ๊ฑฐ๋‚˜, npx create-next-app@14 ... ์ปค๋งจ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ์•ˆ๋‚ดํ•ด์ฃผ์‹œ๋ฉด ํ•™์Šต์ด ๋” ํŽธ๋ฆฌํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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

  • Supabase๋กœ ์„œ๋ฒ„์—†์ด ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„ ํ•˜๋Š” ๋ฒ• (ํšŒ์›์ธ์ฆ, ํŒŒ์ผ ์—…๋กœ๋“œ, ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…)

  • Next.js 14๋ฒ„์ „ (feat. App Router, Server Action)

  • ์นด์นด์˜ค OAuth ๋กœ๊ทธ์ธ ๊ตฌํ˜„

  • Tailwind CSS, React Query, Recoil ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

  • Vercel๊ณผ AWS๋ฅผ ํ†ตํ•œ ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ๋ฐฉ๋ฒ•

  • ๋ฌดํ•œ ์Šคํฌ๋กค, ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ ๊ธฐ๋Šฅ ๊ตฌํ˜„

  • ๋„๋ฉ”์ธ ๊ตฌ๋งค ๋ฐ ์—ฐ๋™

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


NextJS 14 ๋ฒ„์ „๊ณผ

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


3๊ฐ€์ง€ ํด๋ก  ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ

์‹ค๋ฌด ์ˆ˜์ค€์˜ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๋กœ ๋น ๋ฅด๊ฒŒ ์„ฑ์žฅํ•ฉ๋‹ˆ๋‹ค!

ํ’€์Šคํƒ ๊ฐœ๋ฐœ์— ๋‚ ๊ฐœ๋ฅผ ๋‹ฌ์•„์ค„
ํŒŒ์ด์–ด๋ฒ ์ด์Šค์˜ ๊ฐ•๋ ฅํ•œ ๋Œ€ํ•ญ๋งˆ,

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

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

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

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

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

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

์ด ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜์‹œ๋Š” ๋ชจ๋“  ๋ถ„๋“ค์€

์ด 4๊ฐœ์˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ํ˜ผ์ž์„œ ๋ฐฐํฌ๊นŒ์ง€

๋ชจ๋‘ ์™„๋ฃŒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค ๐Ÿš€

๐Ÿ”— ๊ฐ ํ”„๋กœ์ ํŠธ์— ์žˆ๋Š” ๋งํฌ(ํŒŒ๋ž€ ํ…์ŠคํŠธ)๋ฅผ ํด๋ฆญํ•ด๋ณด์„ธ์š”.

[ํ”„๋กœ์ ํŠธ 1] ํˆฌ๋‘ ๋ฆฌ์ŠคํŠธ (์—ฐ์Šต ํ”„๋กœ์ ํŠธ)

  • Supabase Database๋กœ CRUD ๊ตฌํ˜„

  • ํ• ์ผ ๋งŒ๋“ค๊ธฐ, ์‚ญ์ œํ•˜๊ธฐ, ๊ฒ€์ƒ‰ํ•˜๊ธฐ, ์™„๋ฃŒํ•˜๊ธฐ ๊ตฌํ˜„

  • ์ฒซ NextJS ํ’€์Šคํƒ ํ”„๋กœ์ ํŠธ

[ํ”„๋กœ์ ํŠธ 2] ๋“œ๋กญ๋ฐ•์Šค ํด๋ก  (ํŒŒ์ผ ์—…๋กœ๋“œ)

  • Supabase Storage๋กœ ํŒŒ์ผ ๊ธฐ๋Šฅ ๋‹ค๋ฃจ๊ธฐ

  • ํŒŒ์ผ ์—…๋กœ๋“œ ๋ฐ ์‚ญ์ œ, ๊ฒ€์ƒ‰ ๊ตฌํ˜„

  • ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ ๊ธฐ๋Šฅ ๊ตฌํ˜„

[ํ”„๋กœ์ ํŠธ 3] ๋„ทํ”Œ๋ฆญ์Šค ํด๋ก 

  • Supabase SDK๋กœ ๋ณต์žกํ•œ SQL ๋‹ค๋ฃจ๊ธฐ

  • ์˜ํ™” ๋ฆฌ์ŠคํŠธ ํ™”๋ฉด, ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ, ์ƒ์„ธํŽ˜์ด์ง€ ๊ตฌํ˜„

  • ๋ฌดํ•œ ์Šคํฌ๋กค ๊ตฌํ˜„ (intersection-observer)

[ํ”„๋กœ์ ํŠธ 4] ์ธ์Šคํƒ€๊ทธ๋žจ ํด๋ก  (ํšŒ์›๊ฐ€์ž…, ์ฑ„ํŒ…)

  • Supabase Auth๋กœ ํšŒ์›๊ธฐ๋Šฅ ์‰ฝ๊ฒŒ ๊ตฌ์ถ•

  • Supabase Realtime๋กœ ์‹ค์‹œ๊ฐ„ ๊ธฐ๋Šฅ ๋‹ค๋ฃจ๊ธฐ

  • 2๊ฐ€์ง€ ๋ฐฉ์‹์˜ ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ ๊ตฌํ˜„

  • ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…, ์‹ค์‹œ๊ฐ„ ์ ‘์†์—ฌ๋ถ€ ๊ตฌํ˜„

  • + ์นด์นด์˜ค ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ ๊ตฌํ˜„ ๊ฐ•์ขŒ๊ฐ€ ์ถ”๊ฐ€๋์–ด์š”!

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

Supabase๋ฅผ ํ†ตํ•ด
์„œ๋ฒ„๊ตฌ์ถ• ์—†์ด ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„
ํ•˜๊ณ ์‹ถ์€ ๊ฐœ๋ฐœ์ž

๋‹ค์–‘ํ•œ ํด๋ก  ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด
๊ฐœ๋ฐœ ์‹ค๋ ฅ์„ ํƒ„ํƒ„ํ•˜๊ฒŒ
๋‹ค์ง€๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

์ตœ์‹  ๊ธฐ์ˆ ์„ ํ™œ์šฉํ•ด์„œ
๋ชจ๋˜ํ•œ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„
ํ•˜๊ณ ์‹ถ์€ ๊ฐœ๋ฐœ์ž

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

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

3๊ฐ€์ง€์˜ ํด๋ก  ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๋น ๋ฅด๊ฒŒ ์‹ค๋ ฅ์„ ํ–ฅ์ƒ์‹œ์ผœ ๋“œ๋ฆฝ๋‹ˆ๋‹ค ๐Ÿ‘ฉ๐Ÿปโ€๐ŸŽ“

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

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

์ฒซ์งธ,

Supabase์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ 4๊ฐ€์ง€๋ฅผ ๋ชจ๋‘ ๋ฐฐ์›Œ์š”!

(โœ… DB ์กฐํšŒ, ํšŒ์› ์ธ์ฆ, ํŒŒ์ผ ์—…๋กœ๋“œ, ์‹ค์‹œ๊ฐ„ ๊ธฐ๋Šฅ ๊ตฌํ˜„๊นŒ์ง€ ๋ชจ๋‘ ๋ฐฐ์›Œ์š”)

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

๋‹ค์–‘ํ•œ ํ”„๋กœ์ ํŠธ์— ํ•˜๋‚˜ํ•˜๋‚˜ ์ ์šฉํ•ด๋ณด๋ฉด์„œ

ํ•ต์‹ฌ ๊ธฐ๋Šฅ 4๊ฐ€์ง€๋ฅผ ์ œ๋Œ€๋กœ ๋ฐฐ์šฐ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜‰

๋‘˜์งธ,

์ด 3๊ฐ€์ง€์˜ ํด๋ก  ํ”„๋กœ์ ํŠธ๋ฅผ ๊ฐ™์ด ๋งŒ๋“ค์–ด๋‚˜๊ฐ€์š”!

(โœ… ์‹ค๋ฌด ๋Šฅ๋ ฅ์„ ๋นจ๋ฆฌ ํ‚ค์šฐ์‹ค ์ˆ˜ ์žˆ์–ด์š”)

์ด 3๊ฐ€์ง€์˜ ํด๋ก  ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด

ํŒŒ์ผ ์—…๋กœ๋“œ, ํšŒ์› ์ธ์ฆ, ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…, ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ, ๋ฌดํ•œ ์Šคํฌ๋กค ๋“ฑ์„ ๊ตฌํ˜„ํ•ด๋ณด๊ณ 

"์‹ค๋ฌด์— ๋ฐ”๋กœ ์ ์šฉ ๊ฐ€๋Šฅํ•œ ๊ธฐ์ˆ ์Šคํƒ"์„ ๊ฐ–์ถ˜

ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๋กœ ๊ฑฐ๋“ญ๋‚˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค!

(+ ์นด์นด์˜ค OAuth ๋กœ๊ทธ์ธ ๊ฐ•์˜๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ์–ด์š” ๐Ÿ˜‰)

์…‹์งธ,

์‹ค๋ฌด์—์„œ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ์ตœ์‹  ๊ธฐ์ˆ ์Šคํƒ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”!

(โœ… ๊ฐ ๊ธฐ์ˆ ๋ณ„๋กœ ์ด๋ก ๊ณผ ์‹ค๋ฌด ๊ฐ•์˜๊ฐ€ ์ œ๊ณต๋ผ์š”)

๋‹จ์ˆœํžˆ "์ตœ์‹ ๊ธฐ์ˆ "์—๋งŒ ํฌ์ปค์Šค๋ฅผ ๋‘์ง€ ์•Š๊ณ ,

ํšจ์œจ์ ์ธ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ ๋“ค๋กœ ์„ ์ •ํ–ˆ๋‹ต๋‹ˆ๋‹ค ๐Ÿ™‚


์ตœ์‹  ๊ธฐ์ˆ ๋“ค์„ ๋ณ„๋„๋กœ ๋ฐฐ์šฐ์‹ค ํ•„์š” ์—†์ด

์‹ค๋ฌด์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹ ๊ทธ๋Œ€๋กœ

์ด๋ฒˆ ๊ฐ•์ขŒ์—์„œ ๋ชจ๋‘ ๋ฐฐ์šฐ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

๋„ท์งธ,

๋‘ ๊ฐ€์ง€์˜ ๋ฐฐํฌ ๋ฐฉ์‹์„ ๋ฐฐ์šฐ๊ณ  ๋„๋ฉ”์ธ๊นŒ์ง€ ์—ฐ๋™ํ•ด์š”!

(โœ… ํ›Œ๋ฅญํ•œ ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ๋‚˜๋งŒ์˜ ๋„๋ฉ”์ธ์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์–ด์š”)

AWS EC2์™€ Vercel๋กœ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•๋ถ€ํ„ฐ

๋‚˜๋งŒ์˜ ๋„๋ฉ”์ธ์„ ๊ตฌ๋งคํ•˜๊ณ  ์—ฐ๋™ํ•˜๋Š” ๋ฐฉ๋ฒ•๊นŒ์ง€

๋ชจ๋‘ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค โ˜บ


(+ ๋” ์ „๋ฌธ์„ฑ์žˆ๋Š” ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ์™„์„ฑํ•˜์‹ค ์ˆ˜ ์žˆ์–ด์š”!)

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

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

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

  • Next.js ํ˜น์€ React.js๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์‹  ๋ถ„์ด๋ผ๋ฉด, ๊ฐ•์˜๋ฅผ ์ถฉ๋ถ„ํžˆ ๋”ฐ๋ผ์˜ค์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค! โ˜บ

  • ๊ธฐ๋ณธ์ ์ธ CSS ์ง€์‹์€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. (ex. flex๊ฐ€ ๋ฌด์—‡์ธ์ง€)

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

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

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

#Next.js, #supabase, #tailwind-css, #react-query์ŠˆํŒŒ๋ฒ ์ด์Šค, #recoiljs, #firebase, #Supabase RLS, #Row level Security

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

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

  • ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„ ๋๊นŒ์ง€ ํ•ด๋‚ด๊ณ  ์‹ถ์€ ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์ž

  • ๊ฐœ๋ฐœ๊ณผ ์šด์˜ ๋‚œ์ด๋„๋ฅผ ํ™• ๋‚ฎ์ถ”๊ณ  ์‹ถ์€ 1์ธ / ์†Œ๊ทœ๋ชจ ๊ฐœ๋ฐœํŒ€

  • ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ์— ์ตœ์ ํ™”๋œ ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค๋ฅผ ์ฐพ์œผ์‹œ๋Š” ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • Next.js ๋˜๋Š” React.js์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ์ดํ•ด

  • ๊ธฐ๋ณธ์ ์ธ CSS ์ง€์‹

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

3,771

๋ช…

์ˆ˜๊ฐ•์ƒ

229

๊ฐœ

์ˆ˜๊ฐ•ํ‰

64

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

8

๊ฐœ

๊ฐ•์˜

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

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

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

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

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

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

๋”๋ณด๊ธฐ

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

์ „์ฒด

40๊ฐœ โˆ™ (10์‹œ๊ฐ„ 55๋ถ„)

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

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

56๊ฐœ

4.9

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

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

    ์ˆ˜๊ฐ•ํ‰ 46

    โˆ™

    ํ‰๊ท  ํ‰์  4.7

    5

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

    ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์˜ˆ์ œ๋ฅผ ์ž˜ ๋งŒ๋“ค์–ด์ฃผ์…”์„œ ์ž˜ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค

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

      ์ˆ˜๊ฐ•ํ‰ 1

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

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

      ์ด ๊ฐ•์˜๋ฅผ ๋“ค์„์ง€ ๋ง์ง€ ๊ณ ๋ฏผํ•˜์‹œ๋Š” ๋ถ„๋“ค์„ ์œ„ํ•ด ์ œ๊ฐ€ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ ๋А๋‚€ ์žฅ์ ์— ๋Œ€ํ•ด ์„ค๋ช…๋“œ๋ฆฌ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋“ค์œผ๋ฉด ๋„์›€์ด ๋  ์‚ฌ๋žŒ๋“ค์„ ์ •๋ฆฌํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค ์žฅ์  1. 3๊ฐœ์˜ ํด๋ก ์ฝ”๋”ฉ์œผ๋กœ ์ตœ์‹  ๊ธฐ์ˆ  ๋ฐ Supabase๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ๋น ๋ฅด๊ฒŒ ์ต์ˆ™ํ•ด์งˆ ์ˆ˜ ์žˆ๋‹ค 2. Server Actions์™€ ๊ฐ™์€ NextJS์˜ ์ตœ์‹ ๊ธฐ์ˆ ์„ ์ง์ ‘ ๊ฒฝํ—˜ํ•˜๊ณ  ๊ตฌํ˜„ํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค 3. ๋ฌดํ•œ์Šคํฌ๋กค๊ณผ ๊ฐ™์ด ์‹ค์ œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ ํ•„์š”ํ•œ ํ•ต์‹ฌ์ ์ธ ๊ธฐ๋Šฅ๋“ค์„ ์ค‘์‹ฌ์ ์œผ๋กœ ํ•™์Šตํ•  ์ˆ˜ ์žˆ๋‹ค 4. Vercel๊ณผ AWS ๋‘ ๊ฐ€์ง€์˜ ๋ฒ„์ „์˜ ๋ฐฐํฌ ๋ฐฉ๋ฒ•์„ ํ•™์Šตํ•˜์—ฌ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค ์žฅ์ ์€ ์ด๋ ‡๊ฒŒ ๋„ค ๊ฐ€์ง€๋กœ ์„ค๋ช…๋“œ๋ฆด ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ์ด ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™์€ ๋ถ„๋“ค์„ ์ •๋ฆฌํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค 1. ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ์™€ ์„œ๋ฒ„API์— ๊ธฐ์ดˆ์ ์ธ ๋ฐฐ๊ฒฝ์ง€์‹์ด ์žˆ์œผ๋ฉฐ, ๋ฐ˜๋ณต ํ•™์Šต์„ ํ†ตํ•ด ์ˆ™๋ จ์‹œํ‚ค๊ณ  ์‹ถ์œผ์‹  ๋ถ„ 2. ๋ฐฑ์—”๋“œ์™€ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ํ†ตํ•ฉํ•˜์—ฌ ํ•˜๋‚˜์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์™„์„ฑ์‹œ์ผœ๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„ 3. ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ๋ถ€ํ„ฐ ๋ฐฐํฌ๊นŒ์ง€ ๋ชจ๋“  ๊ณผ์ •์„ ์ง์ ‘ ๊ฒฝํ—˜ํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„ 4. ๋ฐ˜๋ณต์ ์ธ ํ•™์Šต์œผ๋กœ ์ฝ”๋“œ ๋ฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„์— ์ต์ˆ™ํ•ด์ง€๊ณ  ์‹ถ์œผ์‹  ๋ถ„ ์ดˆ๋ฐ˜์— React Query, Recoil, NextJS ๋“ฑ ํ•ด๋‹น ๊ฐ•์˜์—์„œ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ  ์Šคํƒ์— ๋Œ€ํ•ด ์ „์ฒด์ ์ธ ์„ค๋ช…์„ ํ•ด์ฃผ๋Š” ๊ฐ•์˜๊ฐ€ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๊ธด ํ•˜์ง€๋งŒ, ๊ธฐ์ดˆ์ ์ธ ์ง€์‹์ด ์—†๋Š” ๊ฒฝ์šฐ ์ดํ•ดํ•˜๊ธฐ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ์ˆ ์ด๋‚˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•œ ๊ธฐ์ดˆ ์„ค๋ช…๋ณด๋‹ค๋Š” ํ™œ์šฉ ์œ„์ฃผ๋กœ ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐฐ๊ฒฝ์ง€์‹์ด ์—†๋‹ค๋ฉด ๋จผ์ € ๊ธฐ๋ณธ์ ์ธ ๋‚ด์šฉ์„ ํ•™์Šตํ•˜์‹œ๊ณ  ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ํƒ€ ๊ฐ•์˜์— ๋น„ํ•ด ์ง„ํ–‰์†๋„๊ฐ€ ๋น ๋ฅด๊ณ  ์™„์„ฑํ•˜๋Š” ํ”„๋กœ์ ํŠธ ๊ฐฏ์ˆ˜๊ฐ€ ๋งŽ์€ ๋งŒํผ ๋‹จ๊ธฐ๊ฐ„์— ๋ฐ˜๋ณต์ ์œผ๋กœ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜์—ฌ ์‹ค๋ ฅ ํ–ฅ์ƒ์ด ์ฒด๊ฐ๋จ์„ ๋А๋ผ์‹ค ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ˆ™๋ จ์„ ์œ„ํ•ด ๊ฐ•์˜๋ฅผ ๊ณ ๋ฏผํ•˜์‹œ๋Š” ๋ถ„์ด๋ผ๋ฉด ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

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

        ํ—‰ ๋„ˆ๋ฌด ์ƒ์„ธํ•˜๊ฒŒ ์ˆ˜๊ฐ•ํ‰ ์ž‘์„ฑํ•ด์ฃผ์…”์„œ ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!! ํ”„๋กœ์ ํŠธ๊ฐ€ ๋งŽ์€๊ฑธ ์ˆ˜๊ฐ•์ƒ ๋ถ„๋“ค๊ป˜์„œ ์–ด๋–ป๊ฒŒ ๋ฐ›์•„๋“ค์ด์‹ค์ง€ ๋งŽ์ด ๊ฑฑ์ •ํ–ˆ๋Š”๋ฐ ์˜คํžˆ๋ ค ๋„์›€์ด ๋˜์—ˆ๋‹ค๊ณ  ํ•ด์ฃผ์…”์„œ ๋„ˆ๋ฌด ๊ฐ๋™์ž…๋‹ˆ๋‹ค ใ…Žใ…Ž ๊ทธ๋‚˜์ €๋‚˜ ๋ฒŒ์จ ๊ฐ•์˜๋ฅผ ๊ฑฐ์˜ ๋๋‚ด๊ฐ€์‹œ๋„ค์š” ๐Ÿซข ๋‚จ์€ ๊ฐ•์˜ ํ™”์ดํŒ…์ด์—์š” ์ดˆ๋ณด๋‹˜! ํ›„๋ฐ˜๋ถ€ ์–ด๋ ค์šด ๋‚ด์šฉ์ด ์žˆ์œผ๋ฉด ์ ๊ทน์ ์œผ๋กœ ๋„์›€ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค :)

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

      ์ˆ˜๊ฐ•ํ‰ 1

      โˆ™

      ํ‰๊ท  ํ‰์  4.0

      4

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

      ๊ธฐ์ˆ ์— ๋Œ€ํ•œ ์ด๋ก ์ ์ธ ๋ถ€๋ถ„์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๋” ์ข‹์„ ๊ฒƒ ๊ฐ™์Œ

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

        ์ˆ˜๊ฐ•ํ‰ 1

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

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

        Supabase๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ Next.js์— ์‚ฌ์šฉํ•˜๋ ค๋‹ˆ ์ž๋ฃŒ๊ฐ€ ๋ถ€์กฑํ•ด์„œ ์–ด๋ ค์›€์„ ๊ฒช๋˜ ์ค‘ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ๊ฐ™์€ ๊ฐ„๋‹จํ•œ ํ”„๋กœ์ ํŠธ๋กœ Supabase์˜ ๊ธฐ๋ณธ์„ ์ตํžˆ๊ณ  ๋‚˜์„œ Storage๋‚˜ Auth ๊ฐ™์€ ์ฃผ์š” ๊ธฐ๋Šฅ๋“ค๋„ ์ง์ ‘ ๊ตฌํ˜„ํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ์ ์ด ๋งˆ์Œ์— ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๋…ธ์…˜์— ๊ฐ•์˜ ๋‚ด์šฉ ์ •๋ฆฌ๋„ ์ž˜ ๋˜์–ด ์žˆ์–ด์„œ ๊ฐ•์˜๋ฅผ ๋”ฐ๋ผ๊ฐ€๊ธฐ์— ์–ด๋ ค์›€์ด ์—†๊ณ  ์„ค๋ช…๋„ ์ฐจ๊ทผ์ฐจ๊ทผ ํ•ด์ฃผ์…”์„œ ํšŒ์‚ฌ๋ฅผ ๋‹ค๋‹ˆ๋ฉด์„œ๋„ ๊ฐ•์˜๋ฅผ ๋ฒŒ์จ ๊ฝค ๋งŽ์ด ๋“ค์„ ์ˆ˜ ์žˆ์—ˆ๋„ค์š”โ˜บ๏ธ ์ข‹์€ ๊ฐ•์˜ ๋งŒ๋“ค์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋„์›€์ด ๋งŽ์ด ๋˜์—ˆ์–ด์š”

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

          ์•ˆ๋…•ํ•˜์„ธ์š” Jane๋‹˜! ํšŒ์‚ฌ๋ฅผ ๋‹ค๋‹ˆ์‹œ๋ฉด์„œ ๊ฐ•์˜ ์ˆ˜๊ฐ•๊นŒ์ง€ ์ด๋ ‡๊ฒŒ ๋นจ๋ฆฌ ํ•ด๋‚ด์‹œ๋‹ค๋‹ˆ ๋„ˆ๋ฌด ๋ฉ‹์žˆ์œผ์‹ญ๋‹ˆ๋‹ค ๐Ÿซข ์ˆ˜๊ฐ•์ƒ ๋ถ„๋“ค๊ป˜์„œ ์ž˜ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ๋„๋ก ์ฒœ์ฒœํžˆ ์„ค๋ช…๋“œ๋ฆฌ๊ณ  ์žˆ์–ด์š” ใ…Žใ…Ž ์ข€ ๋А๋ฆฐ ๊ฒƒ ๊ฐ™์œผ๋ฉด ๋ฐฐ์† ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜์…”๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™์•„์š”. ์†Œ์ค‘ํ•œ ์ˆ˜๊ฐ•ํ‰ ๋‚จ๊ฒจ์ฃผ์…”์„œ ๋„ˆ๋ฌด ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

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

        ์ˆ˜๊ฐ•ํ‰ 2

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

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

        ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ํ•˜๋ฉด์„œ ์ €๋งŒ์˜ ์›น์•ฑ์„ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ์–ด ์ˆ˜๊ฐ•์„ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. Next.js์™€ Supabase ์—ฐ๋™์„ ํ˜ผ์ž ์‹œ๋„ํ–ˆ์„ ๋•Œ๋Š” ๋งŽ์ด ์–ด๋ ค์› ๋Š”๋ฐ, ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ๋งŽ์€ ๊ฒƒ์„ ๋ฐฐ์›Œ๊ฐˆ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ข‹์€ ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๋•๋ถ„์— ํฌํŠธํด๋ฆฌ์˜ค 3๊ฐœ ๋ค์œผ๋กœ ๊ฐ€์ ธ๊ฐ€๊ฒŒ๋ฉ๋‹ˆ๋‹ค ใ…Žใ…Ž ์ถ”๊ฐ€๋กœ, ํ˜„์žฌ Next.js๋Š” 15๋ฒ„์ „์ด๊ณ  ๊ฐ•์˜์—์„œ๋Š” 14๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด ๋ฌธ๋ฒ• ์ฐจ์ด๊ฐ€ ์ƒ๊ฐ๋ณด๋‹ค ๋งŽ์•˜์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜์— ๋ฒ„์ „ ์ฐจ์ด์— ๋Œ€ํ•œ ๋ณด์ถฉ ์ž๋ฃŒ๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์‹œ๊ฑฐ๋‚˜, npx create-next-app@14 ... ์ปค๋งจ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ์•ˆ๋‚ดํ•ด์ฃผ์‹œ๋ฉด ํ•™์Šต์ด ๋” ํŽธ๋ฆฌํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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

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

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

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

        ์›” โ‚ฉ19,800

        5๊ฐœ์›” ํ• ๋ถ€ ์‹œ

        โ‚ฉ99,000