์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค์™€ ๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ์ธ๊ธฐ ์žˆ๋Š” ์˜คํ”ˆ ์†Œ์Šค JavaScript ํ”„๋ ˆ์ž„์›Œํฌ์ธ Vue.js๋Š” ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ํ•„์ˆ˜์ ์ธ ๋„๊ตฌ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Vue.js๋Š” Evan You๊ฐ€ ๋งŒ๋“  ์ดํ›„ ์ •๊ธฐ์ ์ธ ์—…๋ฐ์ดํŠธ์™€ ๊ฐœ์„ ์„ ํ†ตํ•ด ํ™œ๋ฐœํ•œ ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ๋กœ ์„ฑ์žฅํ•˜์—ฌ ์›น์‚ฌ์ดํŠธ ๊ฐœ๋ฐœ์ž๋“ค ์‚ฌ์ด์—์„œ ์ธ๊ธฐ ์žˆ๋Š” ์„ ํƒ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

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

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

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

Vue.js๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐœ๋ฐœ์ž๋Š” ์ž˜ ๊ตฌ์„ฑ๋œ ๋ฌธ์„œ, ํ™œ๋ฐœํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์› ๋ฐ ์ˆ˜๋งŽ์€ ํ•™์Šต ๋ฆฌ์†Œ์Šค ๋•๋ถ„์— ์นœ๊ทผํ•˜๊ณ  ์ ‘๊ทผํ•˜๊ธฐ ์‰ฌ์šด ํ•™์Šต ๊ณก์„ ์˜ ์ด์ ์„ ๋ˆ„๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Vue.js๋Š” ๋˜ํ•œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค ์ค‘์— ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋””๋ฒ„๊ทธ, ํ…Œ์ŠคํŠธ ๋ฐ ์ตœ์ ํ™”ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” Vue.js DevTools ๋ฐ Vue CLI์™€ ๊ฐ™์€ ๊ฐ•๋ ฅํ•œ ๊ฐœ๋ฐœ ๋„๊ตฌ ์„ธํŠธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์‚ฌ์šฉ์ž ์ •์˜ ์ง€์‹œ๋ฌธ, ๋ฏน์Šค์ธ, ๋ฒ”์œ„๊ฐ€ ์ง€์ •๋œ CSS์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋Š” ํŠน์ • ์š”๊ตฌ ์‚ฌํ•ญ์— ๋งž๊ฒŒ Vue.js์˜ ๊ธฐ๋Šฅ์„ ๋”์šฑ ํ™•์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒํƒœ๊ณ„ ์ธก๋ฉด์—์„œ Vue.js๋Š” ์›น ๊ฐœ๋ฐœ์˜ ๋‹ค์–‘ํ•œ ์ธก๋ฉด์„ ๋‹จ์ˆœํ™”ํ•˜๋„๋ก ์„ค๊ณ„๋œ ๊ด‘๋ฒ”์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ธ๊ธฐ ์žˆ๋Š” Vue.js ์—์ฝ”์‹œ์Šคํ…œ ๋„๊ตฌ ๋ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ๋Š” Vue Router(๋ผ์šฐํŒ…์šฉ), Vuex(์ƒํƒœ ๊ด€๋ฆฌ์šฉ), Vue Test Utils(ํ…Œ์ŠคํŠธ์šฉ) ๋ฐ Nuxt.js(์„œ๋ฒ„ ๋ Œ๋”๋ง ์•ฑ์šฉ)๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

AppMaster ์—์„œ๋Š” Vue.js์˜ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์ด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— ์žˆ์–ด ํŒ๋„๋ฅผ ๋ฐ”๊พธ๋Š” ๊ฒฐ์ •์ด์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹น์‚ฌ์˜ drag-and-drop ์ธํ„ฐํŽ˜์ด์Šค์™€ Web BP ๋””์ž์ด๋„ˆ๋ฅผ ํ†ตํ•ด ๊ณ ๊ฐ์€ Vue.js๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ๊ณผ ์ด์ ์„ ํ™œ์šฉํ•˜์—ฌ ์™„์ „ํ•œ ๋Œ€ํ™”ํ˜• ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณ ๊ฐ์ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฒŒ์‹œํ•˜๋ฉด AppMaster Vue3 ํ”„๋ ˆ์ž„์›Œํฌ ๋ฐ JS/TS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—…๋ฐ์ดํŠธ๋œ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•˜์—ฌ ๊ณ ๊ฐ์ด ์ตœ์‹  ๋ฐ ์ตœ๊ณ ์˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ธฐ์ˆ ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

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