์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
๊ฐœ๋ฐœ ยท ํ”„๋กœ๊ทธ๋ž˜๋ฐ

/

ํ’€์Šคํƒ

Vue3์™€ Supabase๋กœ ๊ตฌ์ธ๊ตฌ์ง ์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ

๋‚˜๋งŒ์˜ ํ’€์Šคํƒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์—์„œ ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น์•ฑ(PWA)๊นŒ์ง€!

(5.0) ์ˆ˜๊ฐ•ํ‰ 1๊ฐœ

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

Vue.jssupabaseVue 3PWA

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ’€์Šคํƒ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Vue3์˜ ํ•ต์‹ฌ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•๊ณผ Composition API ๋‹ค๋ฃจ๊ธฐ

  • Vue Router๋กœ ํŽ˜์ด์ง€ ๋ผ์šฐํŒ… ํ•˜๊ธฐ

  • ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฅผ ๋ชจ๋“ˆํ™” ํŒจํ„ด์œผ๋กœ ์ž‘์„ฑํ•˜๊ธฐ

  • Supabase๋ฅผ ํ™œ์šฉํ•œ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๋ฐ ์ธ์ฆ ์‹œ์Šคํ…œ ๊ตฌ์ถ•ํ•˜๊ธฐ

  • ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค API ํ˜ธ์ถœ ๋ฐ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌํ•˜๊ธฐ

  • PWA(ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น์•ฑ) ๋นŒ๋“œํ•˜๊ธฐ

vue3-supabase-banner

๋‚˜๋งŒ์˜ ํ’€์Šคํƒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์—์„œ ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น์•ฑ(PWA)๊นŒ์ง€!

Vue.js์™€ Supabase๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ง์ ‘ ๊ตฌ์ธ๊ตฌ์ง ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๋ฉด ์–ผ๋งˆ๋‚˜ ๋ฉ‹์งˆ๊นŒ์š”?


Vue3์™€ Supabase์˜ ์™„๋ฒฝ ํ†ตํ•ฉ

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

Vue3๋กœ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ , Supabase๋ฅผ ํ†ตํ•ด ์ธ์ฆ, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์ฒ˜๋ฆฌ, ํŒŒ์ผ ์—…๋กœ๋“œ ๋“ฑ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์ง์ ‘ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ณผ์ •์„ ํ†ตํ•ด ์‹ค๋ฌด์—์„œ ํ”ํžˆ ์‚ฌ์šฉ๋˜๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๊ธฐ์ˆ ๋“ค์„ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.


ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น์•ฑ(PWA) ๋นŒ๋“œ

์›น์‚ฌ์ดํŠธ๋ฅผ ์˜คํ”„๋ผ์ธ์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์—ฌ ์•ฑ๊ณผ ๊ฐ™์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” PWA๋ฅผ ๋นŒ๋“œํ•˜๊ณ  ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.


์ดˆ๋ณด์ž๋ฅผ ์œ„ํ•œ Vue3 ๊ธฐ์ดˆ ๊ฐ•์˜ ์ œ๊ณต

Vue๊ฐ€ ๋‚ฎ์„ค๋‹ค๊ณ ์š”? ๊ฑฑ์ •ํ•˜์ง€ ๋งˆ์„ธ์š”. ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ณ  ํ•ต์‹ฌ๋งŒ ์ •๋ฆฌํ•œ ๊ธฐ์ดˆ ๊ฐ•์ขŒ๋„ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.


๋ณธ ๊ฐ•์ขŒ๋Š” ์ดˆ๋ณด์ž์™€ ์ค‘๊ธ‰์ž ๋ชจ๋‘๋ฅผ ์œ„ํ•ด ๊ตฌ์„ฑ๋˜์–ด ์žˆ์œผ๋ฉฐ, ๊ฐ ์„น์…˜๋งˆ๋‹ค ์‹ค์Šต์„ ํ†ตํ•ด ๊ฐœ๋…์„ ํ™•์‹คํžˆ ์ตํž ์ˆ˜ ์žˆ๋„๋ก ๋•์Šต๋‹ˆ๋‹ค!

ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ๋ฅผ ์†์‰ฝ๊ฒŒ, ๋ชฉํ‘œํ•œ ๊ฐœ๋ฐœ์—๋งŒ ์ง‘์ค‘ ๊ฐ€๋Šฅ!

shot2

Vue3๋กœ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ  Supabase API์™€ ์—ฌ๋Ÿฌ ์„œ๋น„์Šค ๊ธฐ๋Šฅ๋“ค์„ ํ†ตํ•ฉํ•ฉ๋‹ˆ๋‹ค.

shot3

Supabase๋กœ ์‚ฌ์šฉ์ž ์ธ์ฆ, ํ…Œ์ด๋ธ” ์ƒ์„ฑ ๋ฐ Storage์— ํŒŒ์ผ์„ ์ €์žฅํ•˜๊ณ  ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • Vue 3์™€ Supabase ํ™œ์šฉ: ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ๋ฅผ ํ†ตํ•ฉํ•ด ์‚ฌ์šฉ์ž ์ธ์ฆ, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๊ด€๋ฆฌ, ํŒŒ์ผ ์ €์žฅ ๋“ฑ ์‹ค์šฉ์ ์ธ ํ’€์Šคํƒ ์•ฑ์„ ์‰ฝ๊ฒŒ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


  • PWA ๊ตฌ์ถ•๊ณผ ๋ฐฐํฌ: ์˜คํ”„๋ผ์ธ์—์„œ๋„ ์ž‘๋™ํ•˜๋ฉฐ ์„ค์น˜ ๊ฐ€๋Šฅํ•œ ์›น ์•ฑ์„ ๋งŒ๋“ค๊ณ  ๋ฐฐํฌํ•˜๋Š” ๊ณผ์ •์„ ์ดํ•ดํ•˜๊ณ  ์‹ค์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

ํ•™์Šต ๋‚ด์šฉ

shot1

์„ค๊ณ„๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ํ•œ ์ฒด๊ณ„์ ์ธ ๊ตฌํ˜„ ๊ณผ์ •

๋ง‰์—ฐํžˆ ๋”ฐ๋ผํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ๋ฌด์—‡์„ ๋ชฉํ‘œ๋กœ ํ•˜๊ณ  ์–ด๋–ป๊ฒŒ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

Vue3 Composition API

Composition API๋Š” Vue๋ฅผ ์ข€๋” ์ƒ์‚ฐ์„ฑ ์žˆ๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค๋‹ˆ๋‹ค. ใ€ŒVue3 ๊ธฐ์ดˆ ๋‹ค์ง€๊ธฐใ€๋กœ Vue์— ์ต์ˆ™ํ•˜์ง€ ์•Š์€ ์ดˆ๋ณด์ž ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ธฐ์กด ๊ฒฝํ—˜์ž๋“ค๋„ ๋งฅ๋ฝ์„ ํŒŒ์•…ํ•˜์‹ค ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€๋“œ๋ฆฝ๋‹ˆ๋‹ค.

playground
แ„‰แ…ตแ„€แ…กแ†จแ„Œแ…กแ„…แ…ญ 1

ํ’๋ถ€ํ•œ ์‹œ๊ฐ ์ž๋ฃŒ ์ œ๊ณต

๋ณธ ๊ฐ•์˜์—๋Š” ํ•ต์‹ฌ ๊ฐœ๋…๊ณผ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ํ•œ๋ˆˆ์— ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋‹ค์–‘ํ•œ ์‹œ๊ฐ ์ž๋ฃŒ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ณต์žกํ•œ ๊ฐœ๋…๋„ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง๊ด€์ ์ธ ์„ค๋ช…๊ณผ ์‹œ๊ฐ์  ์˜ˆ์‹œ๊ฐ€ ์กฐํ™”๋กญ๊ฒŒ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผํ•˜๋‹ค ๋ณด๋ฉด ์ดํ•ด์™€ ๊ณต๊ฐ์ด ๋˜๋Š” ๋„ค๋Ÿฌํ‹ฐ๋ธŒ ๊ตฌ์„ฑ

ํ”ํ•œ ์˜ค๋ฅ˜๋„ ๊ฒฝํ—˜ํ•ด๋ณด๋ฉฐ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜ ๊ตฌ์„ฑ์œผ๋กœ, ์‹ค์Šต์„ ํ†ตํ•ด ๊ฐœ๋…์„ ์†์‰ฝ๊ฒŒ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹จ๊ณ„๋ณ„๋กœ ์นœ์ ˆํžˆ ์„ค๋ช…ํ•˜์—ฌ ๋ชฉํ‘œ์— ๋„๋‹ฌํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•์Šต๋‹ˆ๋‹ค.

แ„€แ…ขแ„‡แ…กแ†ฏแ„Œแ…ฎแ†ผ แ„’แ…ชแ„†แ…งแ†ซ
app icons

PWA๋ฅผ ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ณ  ๋ฐฐํฌ

Vue๋กœ ๊ฐ„ํŽธํ•˜๊ฒŒ PWA๋ฅผ ์ œ์ž‘ํ•˜๊ณ  ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜์—์„œ๋Š” ๊ธฐ๋ณธ ์„ค์ •๋ถ€ํ„ฐ ๋ฐฐํฌ ๊ณผ์ •๊นŒ์ง€ ๋‹จ๊ณ„๋ณ„๋กœ ์„ค๋ช…ํ•˜์—ฌ ์ดˆ๋ณด์ž๋„ ์‰ฝ๊ฒŒ ๋”ฐ๋ผ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์‹ค์ œ๋กœ ๋ฐ”๋กœ ์ ์šฉ ๊ฐ€๋Šฅํ•œ ์‹ค์Šต์„ ํ†ตํ•ด PWA์˜ ํ•ต์‹ฌ ๊ฐœ๋…์„ ํšจ๊ณผ์ ์œผ๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

์‹ค์Šต ํ™˜๊ฒฝ

  • ์šด์˜ ์ฒด์ œ ๋ฐ ๋ฒ„์ „(OS): Windows 10 ์ด์ƒ, macOS 11(Big Sur) ์ด์ƒ ๊ถŒ์žฅ, iOS 11 ์ด์ƒ, Android 6 ์ด์ƒ

  • ๋ธŒ๋ผ์šฐ์ €: Edge, Chrome ๋“ฑ ํฌ๋กœ๋ฏธ์—„ ํ˜ธํ™˜ ๋ธŒ๋ผ์šฐ์ €, Safari(Mac OS Big Sur ์ด์ƒ)

  • ์‚ฌ์šฉ ๋„๊ตฌ: Visual Studio Code, Node.js(์ตœ์‹  LTS ๋ฒ„์ „ ๊ถŒ์žฅ)

  • PC ์‚ฌ์–‘: ๋ฉ”๋ชจ๋ฆฌ 8GB ์ด์ƒ

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

  • Github ๋ฐ ์ฃผ์š” ๋‹จ์›์—์„œ ๋ณด์ถฉ ์ž๋ฃŒ ์ œ๊ณต


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

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

  • Vue๋กœ ๋‚˜๋งŒ์˜ ๊ทธ๋Ÿด ์‹ธํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๋ถ„

  • ๊ธฐ์ดˆ ๊ฐ•์ขŒ๋ฅผ ๋“ค์—ˆ์ง€๋งŒ ์•„์ง์€ ์„œ๋น„์Šค ๊ฐœ๋ฐœ์ด ๋‚ฏ์„  ๊ฐœ๋ฐœ์ž, ํผ๋ธ”๋ฆฌ์…”, ๋””์ž์ด๋„ˆ

  • ๋ฐฑ์—”๋“œ์— ๋Œ€ํ•œ ์ดํ•ด์™€ ํ’€์Šคํƒ ์‹ค๋ฌด ํ”„๋กœ์ ํŠธ๋ฅผ ๋‹ค๋ค„๋ณด๊ณ  ์‹ถ์€ ๋ถ„

  • ์ทจ์—…์šฉ ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ์ค€๋น„ํ•˜๋Š” ๊ฐœ๋ฐœ์ž ์ง€๋ง์ƒ

  • ๋‚˜์˜ ์›น์„ PWA๋กœ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ์€ ๋ถ„

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

  • HTML, CSS, JavaScript ๊ธฐ์ดˆ

์•ˆ๋…•ํ•˜์„ธ์š”
Michael Kwon์ž…๋‹ˆ๋‹ค.

130

๋ช…

์ˆ˜๊ฐ•์ƒ

9

๊ฐœ

์ˆ˜๊ฐ•ํ‰

10

๊ฐœ

๋‹ต๋ณ€

5.0

์ 

๊ฐ•์˜ ํ‰์ 

4

๊ฐœ

๊ฐ•์˜

์Šคํƒ€ํŠธ์—…์—์„œ ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ์ฝ˜ํ…์ธ  ํฌ๋ฆฌ์—์ดํ„ฐ๋กœ ์ž…๋ฌธํ•˜์—ฌ ํ•œ ๋ถ„์•ผ์—๋งŒ ๋จธ๋ฌผ์ง€ ์•Š๊ณ  ๊ฒŒ์ž„๊ณผ ์›น, ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ๋ถ„์•ผ์—์„œ ๊ธฐํš๊ณผ ๊ฐœ๋ฐœ์„ ์ฃผ๋„ํ•˜๋ฉฐ ํ˜„์—…์—์„œ ๋‹ค์–‘ํ•œ ์ƒ์šฉ ์ž‘ํ’ˆ์„ ๋Ÿฐ์นญํ–ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€ํ•™์—์„œ ๋””์ง€ํ„ธ ๋ฏธ๋””์–ด์™€ ์˜์ƒํ•™์„ ์ „๊ณตํ–ˆ์œผ๋ฉฐ ์ฃผ์š” ๊ต์œก๊ธฐ๊ด€์—์„œ ์›น ๋””์ž์ธ๊ณผ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๋ฐ ๋ฏธ๋””์–ด ๊ต์œก(10๋…„ ์ด์ƒ) ๋“ฑ์„ ์ง„ํ–‰ํ•˜๋ฉด์„œ ํŠœํ† ๋ฆฌ์–ผ๋„ ์ œ์ž‘ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

- ์ €์„œ -

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ์ ํŠธ๋ถ(ํ•œ๋น›๋ฏธ๋””์–ด,2017)

๋”๋ณด๊ธฐ

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

์ „์ฒด

63๊ฐœ โˆ™ (7์‹œ๊ฐ„ 0๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!