2024๋…„ 1์›” 10์ผยท1๋ถ„ ์ฝ๊ธฐ

Vue Framework์˜ ๋Œ€ํญ ํ–ฅ์ƒ: ์ƒˆ ๋ฆด๋ฆฌ์Šค์˜ ํ–ฅ์ƒ๋œ ๋ฐ˜์‘์„ฑ ๋ฐ ์‹ ์†ํ•œ ํ…œํ”Œ๋ฆฟ ๊ตฌ๋ฌธ ๋ถ„์„

Vue 3.4 ๋ฆด๋ฆฌ์Šค๋Š” JavaScript ํ”„๋ ˆ์ž„์›Œํฌ์— ์ƒ๋‹นํ•œ ์—…๊ทธ๋ ˆ์ด๋“œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

Vue Framework์˜ ๋Œ€ํญ ํ–ฅ์ƒ: ์ƒˆ ๋ฆด๋ฆฌ์Šค์˜ ํ–ฅ์ƒ๋œ ๋ฐ˜์‘์„ฑ ๋ฐ ์‹ ์†ํ•œ ํ…œํ”Œ๋ฆฟ ๊ตฌ๋ฌธ ๋ถ„์„

์ธ๊ธฐ ์žˆ๋Š” JavaScript ํ”„๋ ˆ์ž„์›Œํฌ์— ๋Œ€ํ•œ ์ˆ˜๋งŽ์€ ํฅ๋ฏธ๋กœ์šด ๊ธฐ๋Šฅ๊ณผ ํ–ฅ์ƒ๋œ ๊ธฐ๋Šฅ์„ ๊ฐ–์ถ˜ ๋†€๋ผ์šด ์—…๊ทธ๋ ˆ์ด๋“œ์ธ Vue 3.4๊ฐ€ ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋‘ ๋ฐฐ์˜ ์†๋„๋กœ ์ž‘๋™ํ•˜๋Š” ์ƒˆ๋กœ์šด ํ…œํ”Œ๋ฆฟ ํŒŒ์„œ์™€ ๋” ๋‚˜์€ ํšจ์œจ์„ฑ์„ ๋ณด์žฅํ•˜๋Š” ์žฌ๊ตฌ์„ฑ๋œ ๋ฐ˜์‘์„ฑ ์‹œ์Šคํ…œ์ด ํฌํ•จ๋œ ์ธ์ƒ์ ์ธ ์—…๋ฐ์ดํŠธ๊ฐ€ 2023๋…„ 12์›” 28์ผ ๋Œ€์ค‘์—๊ฒŒ ๊ณต๊ฐœ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ƒˆ๋กœ ์ถœ์‹œ๋œ Vue 3.4๋Š” ์ƒ๋‹นํ•œ ๋‚ด๋ถ€ ๊ฐœ์„ ์œผ๋กœ ๊ฐ€๋“ ์ฐจ ์žˆ์–ด ์„ฑ๋Šฅ๊ณผ ๊ธฐ๋Šฅ ๋ฉด์—์„œ ์ธ์ƒ์ ์ธ ๋„์•ฝ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ํ–ฅ์ƒ๋œ ๊ธฐ๋Šฅ ๋ชฉ๋ก์˜ ๋งจ ์œ„์—๋Š” ์žฌ์„ค๊ณ„๋œ ํ…œํ”Œ๋ฆฟ ํŒŒ์„œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. htmlparser2์˜ ์ƒํƒœ ๋จธ์‹  ํ† ํฌ๋‚˜์ด์ €๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์žฌ์„ค๊ณ„๋œ ํŒŒ์„œ๋Š” ๋‹จ์ผ ๋ฐ˜๋ณต์œผ๋กœ ์ „์ฒด ํ…œํ”Œ๋ฆฟ ๋ฌธ์ž์—ด์„ ์‹คํ–‰ํ•˜์—ฌ ํฌ๊ธฐ์— ๊ด€๊ณ„์—†์ด ํ…œํ”Œ๋ฆฟ ์†๋„์˜ 2๋ฐฐ ์ฆ๊ฐ€๋ฅผ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค. Vue์˜ ๋‘๋‡Œ์ธ Evan You ๋ฆด๋ฆฌ์Šค์™€ ํ•จ๊ป˜ ์‹œ์ž‘๋œ ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์—์„œ ์ด๋Ÿฌํ•œ ์„ธ๋ถ€ ์‚ฌํ•ญ์„ ๋…ผ์˜ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ƒˆ ๋ฆด๋ฆฌ์Šค๋Š” ํŒŒ์„œ ๊ฐœ๋ฐœ์—๋งŒ ๊ตญํ•œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ SFC(๋‹จ์ผ ํŒŒ์ผ ๊ตฌ์„ฑ ์š”์†Œ) ๋นŒ๋“œ ์„ฑ๋Šฅ์ด ํฌ๊ฒŒ ํ–ฅ์ƒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Vue 3.4 ๊ธฐ๋Šฅ์˜ ์—…๋ฐ์ดํŠธ๋œ ์ œํ’ˆ๊ตฐ์— ์ถ”๊ฐ€๋œ ๊ฒƒ์€ ๊ณ„์‚ฐ๋œ ์†์„ฑ์˜ ์ตœ์  ์žฌ๊ณ„์‚ฐ์„ ๋ชฉํ‘œ๋กœ ํ•˜๋Š” ๋ฐ˜์‘์„ฑ ์‹œ์Šคํ…œ์˜ ํฌ๊ด„์ ์ธ ์žฌ์„ค๊ณ„์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ณ€๊ฒฝ๊ณผ ๋™์‹œ์— Vue 3.4์—๋Š” v-model์„ ์ง€์›ํ•˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ์˜ ์‹คํ–‰์„ ๊ฐ„์†Œํ™”ํ•˜๊ธฐ ์œ„ํ•œ ์ƒˆ๋กœ์šด ๋งคํฌ๋กœ์ธ DefineModel๋„ ๋„์ž…๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๊ฐ•์กฐ๋œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ ์™ธ์—๋„ Vue.js 3.4๋Š” ๋” ์ž˜ ๋งž์ถคํ™”๋œ ์ˆ˜ํ™” ๋ถˆ์ผ์น˜ ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€, Vue ๋ฌธ์„œ์— ์ถ”๊ฐ€๋œ ์ƒ์‚ฐ ์˜ค๋ฅ˜ ์ฐธ์กฐ ํŽ˜์ด์ง€ ๋ฐ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ๊ธฐ๋Šฅ์˜ ์ฒ ํšŒ๋ฅผ ์ž๋ž‘ํ•ฉ๋‹ˆ๋‹ค. ์ „์—ญ JSX ๋„ค์ž„์ŠคํŽ˜์ด์Šค์™€ Reactivity Transform์€ ํ๊ธฐ๋œ ๊ธฐ๋Šฅ ๋ชฉ๋ก์˜ ์„ ๋‘์— ์žˆ์Šต๋‹ˆ๋‹ค.

Vue๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์›น์—์„œ ์ง๊ด€์ ์ธ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•˜๋Š” ์ง„๋ณด์ ์ด๊ณ  ์ ์ง„์ ์œผ๋กœ ์ ์‘ ๊ฐ€๋Šฅํ•œ JavaScript ํ”„๋ ˆ์ž„์›Œํฌ๋ผ๋Š” ์ ์— ์ž๋ถ€์‹ฌ์„ ๊ฐ–๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋งˆ์ง€๋ง‰ ์ค‘์š”ํ•œ ๋ฆด๋ฆฌ์Šค์ธ Vue 2.0์€ 2016๋…„์— ๋ฐ๋ท”ํ–ˆ์ง€๋งŒ 2023๋…„ 12์›” 31์ผ์— ์ˆ˜๋ช…์ด ์ข…๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Vue 3.4์˜ ์ถœ์‹œ๋Š” JavaScript ์˜์—ญ์˜ ์ธ์ƒ์ ์ธ ๋ฐœ์ „์„ ์˜๋ฏธํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋ถ€์ธํ•  ์ˆ˜ ์—†๋Š” ์‚ฌ์‹ค์ž…๋‹ˆ๋‹ค. AppMaster ์ŠคํŠœ๋””์˜ค์™€ ๊ฐ™์€ ์ˆ˜๋งŽ์€ no-code ํ”Œ๋žซํผ์ด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์„ ์œ„ํ•ด Vue์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ํ™œ์šฉํ•˜๋Š” ๋ฐ˜๋ฉด, ์ด๋ฒˆ ์—…๋ฐ์ดํŠธ๋Š” ์„ฑ๋Šฅ ์ˆ˜์ค€๊ณผ ๊ฐœ๋ฐœ ํšจ์œจ์„ฑ์„ ์ƒˆ๋กœ์šด ์ฐจ์›์œผ๋กœ ๋Œ์–ด์˜ฌ๋ฆด ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋ฉ๋‹ˆ๋‹ค.

Easy to start
Create something amazing

Experiment with AppMaster with free plan.
When you will be ready you can choose the proper subscription.

Get Started
Vue Framework์˜ ๋Œ€ํญ ํ–ฅ์ƒ: ์ƒˆ ๋ฆด๋ฆฌ์Šค์˜ ํ–ฅ์ƒ๋œ ๋ฐ˜์‘์„ฑ ๋ฐ ์‹ ์†ํ•œ ํ…œํ”Œ๋ฆฟ ๊ตฌ๋ฌธ ๋ถ„์„ | AppMaster