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

Vue 3 & Firebase 10 ์ปค๋ฎค๋‹ˆํ‹ฐ ๋งŒ๋“ค๊ธฐ ํ’€์Šคํƒ - "ํ™œ์šฉํŽธ" (with Pinia, Quasar, Tiptap, VueUse)

Vue3 & Firebase(v10)๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฐ•์˜๋กœ Vue3 ์‹ค์ „ ํ™œ์šฉ๋ฒ•, Firebase ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ค์ „, ์ตœ์‹  ์›น ๊ธฐ์ˆ  ํ™œ์šฉ๋ฒ•, ์ง€์‹๊ณต์œ ์ž ๊ฒฝํ—˜ ๊ณต์œ  ๋“ฑ ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฉด์œผ๋กœ ๊ฐœ๋ฐœ์ž๋กœ์จ ํ•œ ๋‹จ๊ณ„ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•์Šต๋‹ˆ๋‹ค!

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

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

๋‚œ์ด๋„ ์ค‘๊ธ‰์ด์ƒ

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

์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
๋ทฐ
๋ทฐ
vue
vue
quasar
quasar
vue.js
vue.js
ํ’€์Šคํƒ
ํ’€์Šคํƒ
firebase
firebase
์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
๋ทฐ
๋ทฐ
vue
vue
quasar
quasar
vue.js
vue.js
ํ’€์Šคํƒ
ํ’€์Šคํƒ
firebase
firebase

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

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

5.0

5.0

ํฌํ•˜ํ•จ

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

๋Œ€ํ•™๊ต ์กธ์—… ์ž‘ํ’ˆ ํ”„๋กœ์ ํŠธ๋กœ ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ–ˆ์—ˆ๋Š”๋ฐ ๋ทฐ๋ฅผ ์“ธ์ง€ ๋ฆฌ์—‘ํŠธ๋ฅผ ์“ธ์ง€ ๊ณ ๋ฏผํ•˜๋‹ค ๋ทฐ๊ฐ€ ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ• ์ˆ˜ ์žˆ๋‹ค๋Š” ์–˜๊ธฐ๋ฅผ ๋“ฃ๊ณ  ๋ง‰์—ฐํ•˜๊ฒŒ ์—ฌ๊ธฐ์ €๊ธฐ ๋’ค์ ธ๋ณด๋‹ค ์šฐ์—ฐํžˆ ์œ ํŠœ๋ธŒ๋กœ ์•Œ๊ฒŒ๋˜์–ด ๋ทฐ ๊ธฐ๋ณธ+์‹ค์ „ ํŽธ์„ ๋ชจ๋‘ ์ˆ˜๊ฐ•ํ•˜์—ฌ ์กธ์—…์ž‘ํ’ˆ ์ง„ํ–‰ ๋ฐ ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๋กœ ์ทจ์—…์— ์„ฑ๊ณตํ–ˆ์ง€๋งŒ ์•„์ง ๋ทฐ์— ๋Œ€ํ•˜์—ฌ ๋ชจ๋ฅด๋Š” ์ ์ด ๋งŽ์•˜๋Š”๋ฐ ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ํ†ตํ•˜์—ฌ ๊ถ๊ธˆํ•œ ๋ถ€๋ถ„ ๋ฐ ๊ณต์‹๋ฌธ์„œ๋ฅผ ํ™•์ธํ•˜๋ฉฐ ๊ณต๋ถ€ํ• ์ˆ˜ ์žˆ๋Š” ๋Šฅ๋ ฅ์„ ๋” ํ‚ค์šธ์ˆ˜ ์žˆ์„๊ฑฐ ๊ฐ™์•„ ๋งŒ์กฑ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค. ์•ž์œผ๋กœ๋„ ๋”์šฑ ์ข‹์€ ๊ฐ•์˜ ๊ธฐ๋‹ค๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค!

5.0

Wonder.B

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

์ •๋ง..ํ•œ๋งˆ๋””๋กœ ๊ฐ“์ง์ž…๋‹ˆ๋‹ค. ์ €๋Š” ์ดํ•ด๊ฐ€ ์–ด๋ ค์šด ๋ถ€๋ถ„์€ ๊ผญ ์งš๊ณ  ๋„˜์–ด๊ฐ€์•ผํ•˜๋Š” ํŽธ์ธ๋ฐ, ๋ฐ˜๋ณตํ•ด์„œ ์„ค๋ช…ํ•ด์ฃผ๋Š” ์ •์„ฑ๊ณผ ๋”๋ถˆ์–ด ์ฃผ ๋‚ด์šฉ๋ฟ ์•„๋‹ˆ๋ผ ๋ชจ๋ฅผ ์ˆ˜ ์žˆ๋Š” ์‚ฌ์†Œํ•œ ๋ถ€๋ถ„์„ ๊ณ๋‹ค๋ฆฌ๋กœ ์•Œ์•„๋ณด๊ฒŒ๋” ํ•ด์ฃผ์…”์„œ ์ง€์‹์ด ๋”์šฑ ๋„“ํ˜€์ง€๋Š”๊ฒŒ ๊ฐ€์žฅ ์ข‹์•˜์–ด์š”. ์ €๋ฒˆ ๊ฐ•์˜๋“ค๋ถ€ํ„ฐ ์ƒ๊ฐํ–ˆ์ง€๋งŒ ์ดˆ๋ณด์ž์˜ ์‹œ์„ ์—์„œ๋ถ€ํ„ฐ ํ˜„์—…์ž์˜ ์‹œ์„ ๊นŒ์ง€ ์‹œ๊ฐ„ ๋“ค์—ฌ ๊ณ ๋ฃจ ์•Œ๋ ค์ฃผ๋ ค ๋…ธ๋ ฅํ•˜์‹œ๋Š” ๊ฒƒ์ด ์ด๋ฒˆ์—๋„ ์—ฌ์‹คํžˆ ๋ณด์—ฌ ๊ฐ์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•™์›์„ ๋‹ค๋‹๋•Œ๋Š” ๋”ฐ๋ผ์น˜๋А๋ผ ๊ธ‰๊ธ‰ํ–ˆ๋‹ค๋ฉด ์ง์ฝ”๋”ฉ๋‹˜ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ๋ถ€ํ„ฐ๋Š” ํ•™์Šต์ด๋ผ๋Š” ๊ฒƒ์„ ์ œ๋Œ€๋กœ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค! ์•ž์œผ๋กœ๋„ ์ข‹์€ ๊ฐ•์˜๋“ค ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค^^

5.0

hiperbono

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

์ด๋ฒˆ ๊ฐ•์˜ ์—ญ์‹œ ์ข‹์•„์š”! ์ง์ฝ”๋”ฉ๋‹˜์˜ ๊ฐ•์˜๋ฅผ ํ•˜๋‚˜์”ฉ ๋“ฃ๊ธฐ ์‹œ์ž‘ํ–ˆ๋Š”๋ฐ ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ๋“ค์„ ๋•Œ ๋„์›€์ด ๋งŽ์ด ๋˜๊ณ  ์‹ค๋ฌด์—์„œ๋„ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„๊ฑฐ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜๋„ ์žฌ๋ฏธ์žˆ๊ณ  ๋”•์…˜๋„ ๋„ˆ๋ฌด ์ข‹์•„์„œ ์ง€๋ฃจํ•˜์ง€ ์•Š๊ฒŒ ๋“ค์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ญ์ƒ ์ˆ˜๊ณ ํ•˜์‹œ๊ณ  ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค :-)

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

  • Vue3 Composition API(์ปดํฌ์ €๋ธ”, ๋™์ &๋น„๋™๊ธฐ ์ปดํฌ๋„ŒํŠธ ๋“ฑ) ์‹ค๋ฌด ํ™œ์šฉ๋ฒ•!

  • Firebase(v10) ์™„์ „ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ค์ „! ๊ทธ๋ฆฌ๊ณ  ๋ฐฐํฌ๊นŒ์ง€!

  • Quasar๋กœ ์˜ˆ์œ UI๋ฅผ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ๋งŒ๋“œ๋Š” ๋ฒ•!

  • VueUse, TiptapEditor ์ธ๊ธฐ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ™œ์šฉ!

  • IntersectionObserver, RelativeTimeFormat ๋“ฑ ์ตœ์‹  ๊ธฐ์ˆ  ํ™œ์šฉ๋ฒ•!

  • ์ „์ฒด ํ…์ŠคํŠธ ๊ฒ€์ƒ‰์„ ์œ„ํ•œ Algolia Search ํ™œ์šฉ!

Vue3 ๊ธฐ์ดˆ๋ฅผ ๋ฐฐ์šฐ์…จ๋‚˜์š”?
์ด์ œ ์ œ๋Œ€๋กœ ํ™œ์šฉํ•  ์ฐจ๋ก€์ž…๋‹ˆ๋‹ค! โœจ

์ธํ”„๋Ÿฐ ์ˆ˜๊ฐ•ํ›„๊ธฐ ์ด๋ฒคํŠธ ์ง„ํ–‰์ค‘ ๐ŸŽ‰

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿ™‚ Vue3 & Firebase10 ์ปค๋ฎค๋‹ˆํ‹ฐ ๋งŒ๋“ค๊ธฐ ๊ฐ•์˜ ์ˆ˜๊ฐ•ํ›„๊ธฐ ์ด๋ฒคํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์–ด์š”.
ํ•ด๋‹น ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜์‹  ํ›„ ์ •์„ฑ์Šค๋Ÿฝ๊ฒŒ ์ˆ˜๊ฐ•ํ›„๊ธฐ๋ฅผ ์ž‘์„ฑํ•ด์ฃผ์‹œ๋ฉด ๊ฐ•์˜ ๋ฌด๋ฃŒ์ฟ ํฐ 1๊ฐœ๋ฅผ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

(์„ ์ฐฉ์ˆœ 30๋ช…)

์ตœ์‹  ๊ธฐ์ˆ ์„ ํ™œ์šฉํ•œ
Vue 3 & Firebase 10 ์ปค๋ฎค๋‹ˆํ‹ฐ ๋งŒ๋“ค๊ธฐ ๐Ÿ“–

์•ˆ๋…•ํ•˜์„ธ์š”! ์ด๋ฒˆ ๊ฐ•์˜๋Š” Vue3์™€ Firebase๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปค๋ฎค๋‹ˆํ‹ฐ ์›น์„ ๋งŒ๋“œ๋Š” ๊ฐ•์˜๋กœ, ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜์‹ ๋‹ค๋ฉด Vue3 Composition API ์‹ค๋ฌด ํ™œ์šฉ๋ฒ•! ๊ทธ๋ฆฌ๊ณ  Firebase ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ค์ „๊นŒ์ง€ ํ•œ ๋ฒˆ์— ๋‚ด ๊ฒƒ์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ์›น์„ ๊ฐœ๋ฐœํ•  ๋•Œ ์—๋””ํ„ฐ, ๋ฌดํ•œ ์Šคํฌ๋กค๋ง, ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ, ๋””๋ฒ„๊น… ๋“ฑ ๋‹ค์–‘ํ•œ ์ง€์‹์ด ํ•„์š”ํ•œ๋ฐ์š”. ํ•ด๋‹น ๊ฐ•์˜์—์„œ๋Š” ์‹ค๋ฌด ๊ฒฝํ—˜์—์„œ ์•Œ ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ์›น ๊ธฐ์ˆ ๊นŒ์ง€ ์Šต๋“ํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๋กœ์„œ ํ•œ ๋‹จ๊ณ„ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.


์‹ค์ „์€ ์–ธ์ œ๋‚˜ ์ค‘์š”ํ•˜๋‹ˆ๊นŒ ๐Ÿ’ป

์‚ฌ์‹ค ์ด๋ฒˆ ๊ฐ•์˜๋Š” ์ œ๊ฐ€ ์ด์ „์— ๋ก ์นญํ•œ "Vue3 ์™„๋ฒฝ ๋งˆ์Šคํ„ฐ (๊ธฐ๋ณธํŽธ/์‹ค์ „ํŽธ)" ์ด์ „๋ถ€ํ„ฐ ๊ธฐํšํ–ˆ๋˜ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์–ด๋–ค ๊ธฐ์ˆ ์„ ์ตํž ๋•Œ ๋ฐฐ์šฐ๋Š” ๊ฒƒ๋„ ์ค‘์š”ํ•˜์ง€๋งŒ ๋ฐฐ์šด ๊ธฐ์ˆ ์„ ํ™œ์šฉํ•ด์„œ ๋ฌด์–ธ๊ฐ€ ๋งŒ๋“ค์–ด ๋ณด๋Š” ๊ฒƒ ๋˜ํ•œ ์ •๋ง ์ค‘์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด์ฃ .

์šฐ๋ฆฌ๊ฐ€ ์šด์ „ ๋ฉดํ—ˆ๋ฅผ ์ทจ๋“ํ•˜๊ณ  ์ž๋™์ฐจ๋ฅผ ๋ชฐ์•„๋ณด๋ฉด ์ƒ๊ฐ๋ณด๋‹ค ์‰ฝ์ง€ ์•Š์„ ๊ฑฐ์˜ˆ์š”. ์‹ค์ œ๋กœ ์šด์ „ํ•  ๋•Œ๋Š” ์šด์ „์„ ๋ฐฐ์šธ ๋•Œ ์—†์—ˆ๋˜ ๋‹ค์–‘ํ•œ ์–ด๋ ค์›€์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ์š”.

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

"๋ง‰์ƒ ์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•˜๋ ค๊ณ  ํ•˜๋ฉด ์–ด๋ ค์›€์ด ์žˆ๋”๋ผ๊ณ ์š”..."

๊ทธ๋ž˜์„œ Vue3 & Firebase๋ฅผ ํ™œ์šฉํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ๋งŒ๋“ค๊ธฐ ๊ฐ•์˜๋ฅผ ๋ก ์นญํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ์š”. ์ด๋ฒˆ ๊ฐ•์˜๋Š” ์•ž์—์„œ ๋ง์”€๋“œ๋ ธ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ Vue3 ์‹ค๋ฌด ํ™œ์šฉ๋ฒ•, Firebase ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ค์ „๊นŒ์ง€! ๊ทธ๋ฆฌ๊ณ  ์‹ค์ œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ๋•Œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ์–ด๋ ค์›€์„ ํ•ด์†Œํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.


์ด ๊ฐ•์˜๋งŒ์˜ ํŠน์žฅ์  โœจ

๐Ÿ“Œ Firebase๋Š” ๋ชจ๋ฅด์…”๋„ ๋ผ์š”! ์™„์ „ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ค์ „ ๊ทธ๋ฆฌ๊ณ  ๋ฐฐํฌ๊นŒ์ง€ ํ•œ ๋ฒˆ์— ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”.

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์—๊ฒŒ Firebase๋Š” ์ •๋ง ๋งค๋ ฅ์ ์ธ ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค.

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

๐Ÿ“Œ Fallthrough ์†์„ฑ, ๋™์  & ๋น„๋™๊ธฐ ์ปดํฌ๋„ŒํŠธ, ์ปดํฌ์ €๋ธ” ํ•จ์ˆ˜ ๋“ฑ ์‹ค์ „์œผ๋กœ ํ™•์‹คํžˆ ์ดํ•ดํ•ด์š”!

๊ฐ•์˜๋ฅผ ํ†ตํ•ด Pinia(with Setup Stores ๋ฌธ๋ฒ•), Quasar, VueUse, Tiptap Editor, Algolia Search ๋“ฑ ์‹ค์ œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๋‹ค์–‘ํ•œ ๊ธฐ์ˆ ์„ ์ตํž ์ˆ˜ ์žˆ๊ณ ์š”. Dynamic Component(๋™์  ์ปดํฌ๋„ŒํŠธ), Async Component (๋น„๋™๊ธฐ ์ปดํฌ๋„ŒํŠธ for ์ง€์—ฐ๋กœ๋”ฉ) ๊ทธ๋ฆฌ๊ณ  Composables ํ•จ์ˆ˜ ๊ตฌํ˜„ ๋“ฑ Vue3 ์‹ค๋ฌด ํ™œ์šฉ๋ฒ•์„ ์ œ๋Œ€๋กœ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ ์ˆ˜๊ฐ•์ƒ ์—ฌ๋Ÿฌ๋ถ„๋“ค์ด ์Šค์Šค๋กœ ํ•ด๋‚ด๋Š” ํž˜์„ ๊ธธ๋Ÿฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์ ˆ๋Œ€ ํ›„ํšŒ ์—†์„ ๊ฑฐ์˜ˆ์š”!

์ด๋ฒˆ ๊ฐ•์˜๋Š” ๋‹จ์ˆœํžˆ ์–ด๋–ค ๊ธฐ์ˆ ์„ ์•Œ๋ ค๋“œ๋ฆฌ๋Š” ๊ฐ•์˜๊ฐ€ ์•„๋‹ˆ์—์š”.

  • ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ์ €๋Š” ์–ด๋–ป๊ฒŒ Breakpoint๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๋””๋ฒ„๊น…์„ ํ•˜๋Š”์ง€
  • ๋˜ ์ œ๊ฐ€ ์–ด๋– ํ•œ ๊ธฐ์ˆ ์„ ์ตํž ๋•Œ ๊ณต๋ถ€๋ฒ•์€ ์–ด๋–ป๊ฒŒ ๋˜๋Š”์ง€
  • ๊ทธ๋ฆฌ๊ณ  Firebase๋ฅผ ํ•™์Šตํ•  ๋•Œ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์–ด๋–ป๊ฒŒ ๋ณด๋Š”์ง€

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


ํ•™์Šต ๋‚ด์šฉ ๐Ÿ“š

์„น์…˜ 0. ์‹œ์ž‘ํ•˜๊ธฐ

  • ํ•จ๊ป˜ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ•˜๊ณ  ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑ

์„น์…˜ 1. Auto Page&Layout ์„ค์ •

  • ์ž๋™์œผ๋กœ Page&Layout ๋ผ์šฐํŒ…์ด ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์ •
  • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์ •ํ•˜๋ฉฐ ์ง€์‹๊ณต์œ ์ž์˜ ์ธ์‚ฌ์ดํŠธ๋ฅผ ๊ณต์œ 

์„น์…˜ 2. Quasar ํ™œ์šฉ UI ๋งŒ๋“ค๊ธฐ

  • Quasar๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ์›น ๋ ˆ์ด์•„์›ƒ, ์ปค๋ฎค๋‹ˆํ‹ฐ UI ๋งˆํฌ์—…
  • router-link vs router.push() ์ฐจ์ด
  • ๋™์  ์ปดํฌ๋„ŒํŠธ, ๋น„๋™๊ธฐ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์šฉํ•œ ์„ฑ๋Šฅ ๊ฐœ์„ 
  • $attrs, $slots Vue ๋‚ด์žฅ ๊ฐ์ฒด ํ™œ์šฉ
  • Fallthrough ์†์„ฑ๊ณผ inheritAttrs ์˜ต์…˜ ์ดํ•ด
  • ๋‹ค์ค‘ v-model, VueRouter ์ค‘์ฒฉ ๋ ˆ์ด์•„์›ƒ

์„น์…˜ 3. Firebase ์‹œ์ž‘ํ•˜๊ธฐ

  • ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ•  Firebase ์„œ๋น„์Šค์™€ ๊ณต์‹ ๋ฌธ์„œ ๋ณด๋Š” ๋ฒ• ์„ค๋ช…
  • Firebase ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ๋ฐ ์„ค์น˜

์„น์…˜ 4. Firebase Authentication

  • Firebase๋ฅผ ํ™œ์šฉํ•œ ์ด๋ฉ”์ผ ํšŒ์›๊ฐ€์ž…, ๊ตฌ๊ธ€ ๋กœ๊ทธ์ธ, ์‚ฌ์šฉ์ž ์ •๋ณด ๊ด€๋ฆฌ
  • Pinia Setup Stores ๋ฌธ๋ฒ•์„ ํ™œ์šฉํ•œ ์‚ฌ์šฉ์ž ์ƒํƒœ ๊ด€๋ฆฌ
  • ์ง€์‹๊ณต์œ ์ž์˜ ๊ณต๋ถ€๋ฒ• ๊ณต์œ 

์„น์…˜ 5. VueUse & ๊ณตํ†ต ๊ธฐ๋Šฅ

  • VueUse ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•œ ๋น„๋™๊ธฐ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐ Pinia ์ƒํƒœ ์œ ์ง€
  • Local & Global Error Handling
  • Tiptap Editor ๋งŒ๋“ค๊ธฐ (๋‹ค์–‘ํ•œ Tiptap Extensions ํ™œ์šฉ)

์„น์…˜ 6. Firebase Cloud Firestore

  • ์ปค๋ฎค๋‹ˆํ‹ฐ์™€ ๋Œ“๊ธ€ ๊ธฐ๋Šฅ CRUD ๊ตฌํ˜„
  • setDoc vs addDoc ์ฐจ์ด ๋“ฑ Firebase ์‚ฌ์šฉ ๊ฒฝํ—˜์—์„œ ์•Œ ์ˆ˜ ์žˆ๋Š” ํŒ ๊ณต์œ 
  • ์ฟผ๋ฆฌ, ์ •๋ ฌ, ๊ฒŒ์‹œ๊ธ€ ๋”๋ณด๊ธฐ ๋“ฑ ์กฐ๊ธˆ ๋” ๋ณต์žกํ•œ ๊ธฐ๋Šฅ ๊ตฌํ˜„

์„น์…˜ 7. Web API & ๊ณ ๋„ํ™”

  • IntersectionObserver ํ™œ์šฉ ๋ฌดํ•œ ์Šคํฌ๋กค ๊ธฐ๋Šฅ
  • Intl.RelativeTimeFormat ํ™œ์šฉ ์ƒ๋Œ€์‹œ๊ฐ„ ํ‘œ์‹œ
  • ํŒŒ๋ผ๋ฏธํ„ฐ URL ์—ฐ๋™
  • ๋‚ด๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ & ํด๋ผ์ด์–ธํŠธ ๋ณด์•ˆ
  • ์ข‹์•„์š”, ๋ถ๋งˆํฌ, ์กฐํšŒ์ˆ˜ ์ฆ๊ฐ€ ๊ธฐ๋Šฅ ๊ตฌํ˜„

์„น์…˜ 8. Firebase Storage

  • Tiptap Editor์—์„œ Firebase Storage ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ
  • ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ์‹œ UUID, Image Resizer ํ™œ์šฉ

์„น์…˜ 9. Firebase Cloud Functions

  • Cloud Functions & Emulator ์„ค์น˜
  • Functions๋ฅผ ํ™œ์šฉํ•œ ๊ณ ๋„ํ™”๋œ ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • Firebase Emulator๋ฅผ ํ™œ์šฉํ•œ ๋กœ์ปฌ ํ…Œ์ŠคํŠธ
  • ๊ฒŒ์‹œ๊ธ€ ๋ฐ ๋Œ“๊ธ€ ์ž‘์„ฑ์ž ํ‘œ์‹œํ•˜๊ธฐ

์„น์…˜ 10. Algolia Search

  • Algolia Search Extension ์„ค์น˜
  • Algolia ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ ํ”„๋กœ์ ํŠธ ์ ์šฉ

์„น์…˜ 11. Firebase ๋ณด์•ˆ ๊ทœ์น™ & ๋ฐฐํฌ(Hosting)

  • Firebase ๋ณด์•ˆ๊ทœ์น™ ์„ค์ •
  • Firebase Hosting ๋ฐฐํฌ

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ด์š” ๐Ÿ™‹

  • Vue3 ํ™œ์šฉ๋ฒ•์„ ํ•™์Šตํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๋กœ์„œ ํ•œ ๋‹จ๊ณ„ ์„ฑ์žฅํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„!
  • Firebase๋ฅผ ํ™œ์šฉํ•ด์„œ ์‹ค์ œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ณ ์ž ํ•˜์‹œ๋Š” ๋ถ„!
  • ์ตœ์‹  ์›น ๊ธฐ์ˆ , ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋“ฑ ์›น ์•ฑ์„ ๋งŒ๋“ค ๋•Œ ํ•„์š”ํ•œ ๊ธฐ์ˆ ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์œผ์‹  ๋ถ„!

๊ฐ•์˜๋ฅผ ๋“ค์€ ํ›„ ์—ฌ๋Ÿฌ๋ถ„์€ ๐Ÿ˜Ž

  • ์ปดํฌ์ €๋ธ” ํ•จ์ˆ˜๋ฅผ ์‰ฝ๊ฒŒ ๋ถ„๋ฆฌํ•˜๋Š” ๋“ฑ Vue3๋ฅผ ์ž์‹  ์žˆ๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • Firebase๋ฅผ ํ™œ์šฉํ•ด์„œ ๋‚˜๋งŒ์˜ ์›น ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ๋ฐฐํฌ๊นŒ์ง€ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์–ด๋–ค ๊ธฐ์ˆ ์„ ๋ฐฐ์šฐ๋“  ๊ณต์‹๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ์Šค์Šค๋กœ ํ•™์Šต๋Š” ํž˜์„ ๊ฐ–๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์˜ˆ์ƒ ์งˆ๋ฌธ Q&A ๐Ÿ’ฌ

Q. Quasar Framework๋ฅผ ์•Œ๊ณ  ์žˆ์–ด์•ผ ์ˆ˜๊ฐ•ํ•  ์ˆ˜ ์žˆ๋‚˜์š”?

์•„๋‹™๋‹ˆ๋‹ค :)

Quasar Framework๋ฅผ ๋ชจ๋ฅด์…”๋„ ์ˆ˜๊ฐ•ํ•˜๋Š” ๋ฐ ์ง€์žฅ ์—†์Šต๋‹ˆ๋‹ค. Quasar๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ UI๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋„๊ตฌ๋กœ ์‚ฌ์šฉ๋˜๋ฉฐ ๊ฐ•์˜๋ฅผ ๋ณด์‹œ๋ฉฐ ์ฒœ์ฒœํžˆ ๋”ฐ๋ผ์˜ค์‹œ๋ฉด ๋ผ์š”! ๊ทธ๋ฆฌ๊ณ  ๊ฐ•์˜ ์ค‘๊ฐ„์ค‘๊ฐ„ ํ€˜์ด์‚ฌ๋ฅผ ๋ชจ๋ฅด์‹œ๋Š” ๋ถ„๋“ค์„ ์œ„ํ•ด ๊ธฐ๋ณธ ์ง€์‹์„ ์„ค๋ช…ํ•˜๋ฉด์„œ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ™‚ 

์•„์šธ๋Ÿฌ Quasar๋ฅผ ๋ชจ๋ฅด์…”๋„ ์ˆ˜๊ฐ•ํ•˜๋Š” ๋ฐ ์ง€์žฅ์€ ์—†์ง€๋งŒ ์•„๋Š” ๋งŒํผ ๋ณด์ธ๋‹ค๊ณ  ํ•˜์ž–์•„์š”? ๋ฌผ๋ก  ํ€˜์ด์‚ฌ๋ฅผ ์•Œ๊ณ  ์žˆ๋‹ค๋ฉด ์‹œ์•ผ๊ฐ€ ๋” ๋„“์–ด์ง€์‹ค ๊ฑฐ์˜ˆ์š”!

์ง์ฝ”๋”ฉ ์œ ํŠœ๋ธŒ ์ฑ„๋„์— ์žˆ๋Š” ํ€˜์ด์‚ฌ ๋ฌด๋ฃŒ ๊ฐ•์˜๋ผ๋„ ๋ณด์‹œ๋ฉด ๋„์›€์ด ๋˜์‹ค ๊ฑฐ์˜ˆ์š” :)

ํ€˜์ด์‚ฌ ๋ฌด๋ฃŒ ๊ฐ•์˜ ์œ ํŠœ๋ธŒ ๋งํฌ

Q. Firebase๋ฅผ ์•Œ๊ณ  ์žˆ์–ด์•ผ ์ˆ˜๊ฐ•ํ•  ์ˆ˜ ์žˆ๋‚˜์š”?

์•„๋‹™๋‹ˆ๋‹ค :)

๋ณธ ๊ฐ•์˜๋Š” Firebase๋ฅผ ๋ฐฐ์šฐ๋ฉฐ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฐ•์˜๋กœ Firebase๋ฅผ ์•„์˜ˆ ๋ชจ๋ฅด์…”๋„ ์ˆ˜๊ฐ•ํ•˜๋Š” ๋ฐ ์ง€์žฅ ์—†์Šต๋‹ˆ๋‹ค. ๋ณธ ๊ฐ•์˜์—์„œ๋Š” Firebase ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ค์ „๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ์Šค์Šค๋กœ ๊ณต๋ถ€ํ•˜๋Š” ๋ฒ• ๋“ฑ ๊ฐœ๋ฐœ์ž๋กœ์„œ ํ•œ ๋‹จ๊ณ„ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋„๋ก ํž˜์“ด ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

Q. Vue3๋ฅผ ์•Œ๊ณ  ์žˆ์–ด์•ผ ์ˆ˜๊ฐ•ํ•  ์ˆ˜ ์žˆ๋‚˜์š”?

๋„ค ๋งž์Šต๋‹ˆ๋‹ค :)

๋ณธ ๊ฐ•์˜๋Š” Vue3๋ฅผ ์•Œ๊ณ  ์žˆ์–ด์•ผ ์ˆ˜๊ฐ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ๋งํฌ๋Š” ์ œ๊ฐ€ ๋ก ์นญํ•œ Vue3 ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ์ˆ˜๊ฐ•ํ‰ ๋ฐ ์ปค๋ฆฌํ˜๋Ÿผ ๊ทธ๋ฆฌ๊ณ  ๋ง›๋ณด๊ธฐ ๊ฐ•์˜๋ฅผ ๋ณด์‹œ๊ณ  ๊ดœ์ฐฎ๋‹ค ์‹ถ์œผ์‹œ๋ฉด ์ˆ˜๊ฐ•ํ•ด ์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.


๊ฐ•์˜ ๋กœ๋“œ๋งต ๐Ÿ“ข

์•„๋ž˜ ์ˆœ์„œ๋Œ€๋กœ์˜ ํ•™์Šต์„ ์ถ”์ฒœ๋“œ๋ ค์š”!


์ง์ฝ”๋”ฉ๊ณผ ํ•จ๊ป˜ํ•˜๋Š”
์‹ค์šฉ์ ์ธ ์ฝ”๋”ฉ ํ•™์Šต ๐Ÿ’ช

์•ˆ๋…•ํ•˜์„ธ์š”, ์ฝ”๋”ฉ ๊ต์œก ํฌ๋ฆฌ์—์ดํ„ฐ ์ง์ฝ”๋”ฉ์ž…๋‹ˆ๋‹ค.
์œ ํŠœ๋ธŒ "์ง์ฝ”๋”ฉ GYM CODING" ์ฑ„๋„์„ ์šด์˜ํ•˜๊ณ  ์žˆ์–ด์š”!

๋งŽ์€ ๋ถ„๋“ค์ด ์ด์ „์— ๋ก ์นญํ•œ Vue3 ์™„๋ฒฝ ๋งˆ์Šคํ„ฐ ๊ฐ•์˜๋ฅผ ์‚ฌ๋ž‘ํ•ด ์ฃผ์…”์„œ Vue3 ํ™œ์šฉํŽธ์ธ Vue3 & Firebase ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ฐ•์˜๋ฅผ ๋ก ์นญํ•˜๊ฒŒ ๋˜์—ˆ์–ด์š”!
์ œ ๊ฐ•์˜์— ๊ด€์‹ฌ๊ฐ€์ ธ ์ฃผ์…”์„œ ๊ฐ์‚ฌ๋“œ๋ฆฌ๋ฉฐ ์•ž์œผ๋กœ ๋” ์ข‹์€ ์ฝ˜ํ…์ธ ๋กœ ๋ณด๋‹ตํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค ๐Ÿ’ช


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

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

  • Vue3 Composition API๋ฅผ ์ œ๋Œ€๋กœ ํ™œ์šฉํ•˜๋Š” ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์œผ์‹  ๋ถ„!

  • Firebase๋ฅผ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์ œ๋Œ€๋กœ ํ•™์Šตํ•˜์—ฌ ์›น์„ ๋งŒ๋“ค๊ณ  ์‹ถ์œผ์‹  ๋ถ„!

  • ์ด๋ก ์€ ๋ฐฐ์› ์ง€๋งŒ ๋ง‰์ƒ ์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•˜๋ ค๊ณ  ํ•  ๋•Œ ์–ด๋ ค์›€์ด ์žˆ์œผ์‹  ๋ถ„!

  • ์ง€์‹๊ณต์œ ์ž์˜ ์ƒ๊ฐ, ๊ฒฝํ—˜๋ฅผ ์–ป๊ณ  ํ•จ๊ป˜ ์„ฑ์žฅํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„!

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

  • HTML, CSS

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

  • Vue3

์•ˆ๋…•ํ•˜์„ธ์š”
์ง์ฝ”๋”ฉ์ž…๋‹ˆ๋‹ค.

31,480

๋ช…

์ˆ˜๊ฐ•์ƒ

2,096

๊ฐœ

์ˆ˜๊ฐ•ํ‰

1,085

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

18

๊ฐœ

๊ฐ•์˜

์•ˆ๋…•ํ•˜์„ธ์š”.
์ฝ”๋”ฉ ๊ต์œก ํฌ๋ฆฌ์—์ดํ„ฐ ์ง์ฝ”๋”ฉ์ž…๋‹ˆ๋‹ค ๐Ÿ˜Š

๋น„๊ฐœ๋ฐœ์ž๋„ ๋”ฐ๋ผํ•  ์ˆ˜ ์žˆ๋„๋ก
์ตœ๋Œ€ํ•œ ์‰ฝ๊ฒŒ, ์ตœ๋Œ€ํ•œ ์•Œ์ฐจ๊ฒŒ ์„ค๋ช…๋“œ๋ฆฝ๋‹ˆ๋‹ค.

ํ•ญ์ƒ ์ˆ˜๊ฐ•์ƒ ์ž…์žฅ์—์„œ ์ƒ๊ฐํ•˜๋Š”
์ฝ”๋”ฉ ๊ต์œก ํฌ๋ฆฌ์—์ดํ„ฐ๊ฐ€ ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.


๐Ÿ† ์ธํ”„๋Ÿฐ Awards 2025 ๋ฒ ์ŠคํŠธ์…€๋Ÿฌ ์ˆ˜์ƒ (React ์™„๋ฒฝ ๋งˆ์Šคํ„ฐ)

๐Ÿ”ฅ ์ธํ”„๋Ÿฐ 2025 ์ง€๊ธˆ ๊ฐ€์žฅ HOTํ•œ ๊ฐ•์˜ ์„ ์ • (ํด๋กœ๋“œ ์ฝ”๋“œ ์™„๋ฒฝ ๋งˆ์Šคํ„ฐ)

๐Ÿ“บ์œ ํŠœ๋ธŒ | ๊ตฌ๋…์ž 4๋งŒ+ ๋ฌด๋ฃŒ ๊ฐ•์˜

๐Ÿ’ป์ง์ฝ”๋”ฉ ํด๋Ÿฝ | ์ „์ฒด ๊ฐ•์˜ & ๋ฌด๋ฃŒ ๊ต์•ˆ

๐Ÿ™GitHub | ์˜ˆ์ œ ์†Œ์Šค์ฝ”๋“œ

๐Ÿ“ท์ธ์Šคํƒ€๊ทธ๋žจ | ์ผ์ƒ & ๊ฟ€ํŒ

๐Ÿงต์Šค๋ ˆ๋“œ | ๊ฐœ๋ฐœ ์ธ์‚ฌ์ดํŠธ

๋”๋ณด๊ธฐ

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

์ „์ฒด

68๊ฐœ โˆ™ (16์‹œ๊ฐ„ 38๋ถ„)

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

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

47๊ฐœ

5.0

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

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

    ์ˆ˜๊ฐ•ํ‰ 6

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ๋Œ€ํ•™๊ต ์กธ์—… ์ž‘ํ’ˆ ํ”„๋กœ์ ํŠธ๋กœ ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ–ˆ์—ˆ๋Š”๋ฐ ๋ทฐ๋ฅผ ์“ธ์ง€ ๋ฆฌ์—‘ํŠธ๋ฅผ ์“ธ์ง€ ๊ณ ๋ฏผํ•˜๋‹ค ๋ทฐ๊ฐ€ ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ• ์ˆ˜ ์žˆ๋‹ค๋Š” ์–˜๊ธฐ๋ฅผ ๋“ฃ๊ณ  ๋ง‰์—ฐํ•˜๊ฒŒ ์—ฌ๊ธฐ์ €๊ธฐ ๋’ค์ ธ๋ณด๋‹ค ์šฐ์—ฐํžˆ ์œ ํŠœ๋ธŒ๋กœ ์•Œ๊ฒŒ๋˜์–ด ๋ทฐ ๊ธฐ๋ณธ+์‹ค์ „ ํŽธ์„ ๋ชจ๋‘ ์ˆ˜๊ฐ•ํ•˜์—ฌ ์กธ์—…์ž‘ํ’ˆ ์ง„ํ–‰ ๋ฐ ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๋กœ ์ทจ์—…์— ์„ฑ๊ณตํ–ˆ์ง€๋งŒ ์•„์ง ๋ทฐ์— ๋Œ€ํ•˜์—ฌ ๋ชจ๋ฅด๋Š” ์ ์ด ๋งŽ์•˜๋Š”๋ฐ ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ํ†ตํ•˜์—ฌ ๊ถ๊ธˆํ•œ ๋ถ€๋ถ„ ๋ฐ ๊ณต์‹๋ฌธ์„œ๋ฅผ ํ™•์ธํ•˜๋ฉฐ ๊ณต๋ถ€ํ• ์ˆ˜ ์žˆ๋Š” ๋Šฅ๋ ฅ์„ ๋” ํ‚ค์šธ์ˆ˜ ์žˆ์„๊ฑฐ ๊ฐ™์•„ ๋งŒ์กฑ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค. ์•ž์œผ๋กœ๋„ ๋”์šฑ ์ข‹์€ ๊ฐ•์˜ ๊ธฐ๋‹ค๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค!

    • ์ง์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

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

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

    ์ˆ˜๊ฐ•ํ‰ 4

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ๊ท€ํ•œ Vue3 ๊ฐ•์˜์˜ฌ๋ ค์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ใ…Žใ…Ž vue3 ๊ฐ•์˜๊ฐ€ ๋งŽ์ด ์—†๋Š”๋ฐ ๊ทธ ์ค‘ ์ง์ฝ”๋”ฉ๋‹˜ vue3๊ฐ•์˜ ๊ธฐ๋ณธํŽธ๋ถ€ํ„ฐ ์‹ค์ „ํŽธ๊นŒ์ง€ ๋‹ค ๋“ค์—ˆ์–ด์š” ! ๋‹ค ๋“ฃ๊ณ  ์•„ ๋” ์•ˆ๋‚˜์˜ค๋‚˜ ํ• ๋•Œ์ฏค ์ด๋ ‡๊ฒŒ ํ™œ์šฉ๋ฒ• ๊ฐ•์˜๊ฐ€ ๋‚˜์™€์„œ ๋ฐ”๋กœ ๊ฒฐ์ œํ–ˆ์Šต๋‹ˆ๋‹ค ใ…‹ใ…‹ ! ์—ญ์‹œ ๋ฏฟ๊ณ  ๋“ฃ๋Š” ์ง์ฝ”๋”ฉ ๋ทฐ๊ฐ•์˜ .. ๋„ˆ๋ฌด ์†Œ์ค‘ํ•ด์š” ์ด๋ ‡๊ฒŒ ์ž˜ ๊ฐ€๋ฅด์น˜์‹œ๋Š”๋ถ„ ์ฐพ๊ธฐ ์‰ฝ์ง€ ์•Š์€๋ฐ ํ•ญ์ƒ ๋ฏฟ๊ณ  ๋“ฃ์Šต๋‹ˆ๋‹ค ! ํ˜น์‹œ.. nuxt ๊ฐ•์˜๋Š” ์˜ฌ๋ ค์ฃผ์‹ค ์ƒ๊ฐ์€ ์—†์œผ์‹ ๊ฐ€์š” ?ใ…Žใ…Žใ…Ž,,,

    • ์ง์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

      ์ œ ๊ฐ•์˜๋ฅผ ์†Œ์ค‘ํžˆ ์ƒ๊ฐํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค!!๐Ÿ˜ƒ Nuxt ๊ฐ•์˜๋„ ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ ์ค€๋น„ํ•ด ๋ณด๋„๋ก ํ• ๊ฒŒ์š”! ๐Ÿ’ช ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ๐Ÿ™‚

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

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ์ด๋ฒˆ ๊ฐ•์˜ ์—ญ์‹œ ์ข‹์•„์š”! ์ง์ฝ”๋”ฉ๋‹˜์˜ ๊ฐ•์˜๋ฅผ ํ•˜๋‚˜์”ฉ ๋“ฃ๊ธฐ ์‹œ์ž‘ํ–ˆ๋Š”๋ฐ ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ๋“ค์„ ๋•Œ ๋„์›€์ด ๋งŽ์ด ๋˜๊ณ  ์‹ค๋ฌด์—์„œ๋„ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„๊ฑฐ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜๋„ ์žฌ๋ฏธ์žˆ๊ณ  ๋”•์…˜๋„ ๋„ˆ๋ฌด ์ข‹์•„์„œ ์ง€๋ฃจํ•˜์ง€ ์•Š๊ฒŒ ๋“ค์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ญ์ƒ ์ˆ˜๊ณ ํ•˜์‹œ๊ณ  ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค :-)

    • ์ง์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

      ์™€์šฐ~! ์ •์„ฑ์Šค๋Ÿฐ ์ˆ˜๊ฐ•ํ›„๊ธฐ ๋‚จ๊ฒจ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ๐Ÿ™‚๐Ÿ’ช

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

    ์ˆ˜๊ฐ•ํ‰ 14

    โˆ™

    ํ‰๊ท  ํ‰์  4.7

    5

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

    ์ธํ”„๋Ÿฐ ๋‚ด Vue ๊ฐ•์˜ ์ „๋ถ€ ์ˆ˜๊ฐ•ํ•˜๊ณ  ํผ๋ธ”๋ฆฌ์…”์—์„œ ํ˜„์žฌ ์‹ค๋ฌด์—์„œ Vue ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ํ™œ๋™ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋งˆ Vue2, Vue3 ๊ฐ•์˜ ์ค‘์—์„œ ์‹ค๋ฌด๊ธ‰์— ๊ฐ€์žฅ ๊ทผ์ ‘ํ•œ ๊ฐ•์˜๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ง์ฝ”๋”ฉ ๋‹˜์˜ ๊ฐ•์˜๋Š” ์ฒ˜์Œ ์ˆ˜๊ฐ•ํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ, ํƒ€ ๊ฐ•์˜์ž๋ณด๋‹ค ์ข€ ๋” ์นœ์ ˆํ•˜๊ฒŒ ๊ฐ€๋ฅด์น˜๋ ค๊ณ  ๋…ธ๋ ฅํ•œ ํ”์ ์ด ๊ณณ๊ณณ์—์„œ ๋ณด์ž…๋‹ˆ๋‹ค. Quasar๊ฐ€ ์ตํžˆ ํƒ€ ํ”„๋ ˆ์ž„์›Œํฌ๋ณด๋‹จ ๊ดœ์ฐฎ๋‹ค๋Š” ๊ฑด ๋“ค์—ˆ์—ˆ๋Š”๋ฐ, ๋ณธ ๊ฐ•์˜ ๋‹ค ๋“ฃ๊ณ  ์ €๋„ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋กœ ๋ณธ ๊ฐ•์˜์˜ ์Šคํƒ์„ ์ค‘์‹ฌ์œผ๋กœ ์ง„ํ–‰ํ•ด๋ด์•ผ๊ฒ ์Šต๋‹ˆ๋‹ค. ์•„๋ฌด์ชผ๋ก ๋งŽ์€ ์ข‹์€ ๊ฐ•์˜ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

    • ์ง์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

      ์›น ๊ฐœ๋ฐœ ์‹œ์ž‘ํ•˜์‹œ๋Š” ๋ถ„๋“ค์„ ์œ„ํ•ด์„œ ์‰ฝ๊ณ  ํ˜„์—…์—์„œ ๊ณ„์‹  ๋ถ„๋“ค์„ ์œ„ํ•ด์„œ ์•Œ์ฐจ๊ฒŒ ๊ตฌ์„ฑํ•˜๋ ค๊ณ  ์ •๋ง ๋…ธ๋ ฅํ•œ ๊ฐ•์˜์ธ๋ฐ์š” ์•Œ์•„์ฃผ์‹œ๋‹ˆ ๊ฐ๊ฐœ๋ฌด๋Ÿ‰ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ˜ญ ์™„๊ฐ•ํ•˜์‹œ๋А๋ผ ๊ณ ์ƒ ๋งŽ์œผ์…จ์Šต๋‹ˆ๋‹ค! ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ๐Ÿ’ช

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

    ์ˆ˜๊ฐ•ํ‰ 3

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ์ •๋ง..ํ•œ๋งˆ๋””๋กœ ๊ฐ“์ง์ž…๋‹ˆ๋‹ค. ์ €๋Š” ์ดํ•ด๊ฐ€ ์–ด๋ ค์šด ๋ถ€๋ถ„์€ ๊ผญ ์งš๊ณ  ๋„˜์–ด๊ฐ€์•ผํ•˜๋Š” ํŽธ์ธ๋ฐ, ๋ฐ˜๋ณตํ•ด์„œ ์„ค๋ช…ํ•ด์ฃผ๋Š” ์ •์„ฑ๊ณผ ๋”๋ถˆ์–ด ์ฃผ ๋‚ด์šฉ๋ฟ ์•„๋‹ˆ๋ผ ๋ชจ๋ฅผ ์ˆ˜ ์žˆ๋Š” ์‚ฌ์†Œํ•œ ๋ถ€๋ถ„์„ ๊ณ๋‹ค๋ฆฌ๋กœ ์•Œ์•„๋ณด๊ฒŒ๋” ํ•ด์ฃผ์…”์„œ ์ง€์‹์ด ๋”์šฑ ๋„“ํ˜€์ง€๋Š”๊ฒŒ ๊ฐ€์žฅ ์ข‹์•˜์–ด์š”. ์ €๋ฒˆ ๊ฐ•์˜๋“ค๋ถ€ํ„ฐ ์ƒ๊ฐํ–ˆ์ง€๋งŒ ์ดˆ๋ณด์ž์˜ ์‹œ์„ ์—์„œ๋ถ€ํ„ฐ ํ˜„์—…์ž์˜ ์‹œ์„ ๊นŒ์ง€ ์‹œ๊ฐ„ ๋“ค์—ฌ ๊ณ ๋ฃจ ์•Œ๋ ค์ฃผ๋ ค ๋…ธ๋ ฅํ•˜์‹œ๋Š” ๊ฒƒ์ด ์ด๋ฒˆ์—๋„ ์—ฌ์‹คํžˆ ๋ณด์—ฌ ๊ฐ์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•™์›์„ ๋‹ค๋‹๋•Œ๋Š” ๋”ฐ๋ผ์น˜๋А๋ผ ๊ธ‰๊ธ‰ํ–ˆ๋‹ค๋ฉด ์ง์ฝ”๋”ฉ๋‹˜ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ๋ถ€ํ„ฐ๋Š” ํ•™์Šต์ด๋ผ๋Š” ๊ฒƒ์„ ์ œ๋Œ€๋กœ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค! ์•ž์œผ๋กœ๋„ ์ข‹์€ ๊ฐ•์˜๋“ค ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค^^

    • ์ง์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

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

์ง์ฝ”๋”ฉ๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

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

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

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

โ‚ฉ165,000