์ฌ์ฉ์ ์ธํฐํ์ด์ค์ ๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ์ฌ์ฉ๋๋ ์ธ๊ธฐ ์๋ ์คํ ์์ค 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๋ ์ง์์ ์ผ๋ก ์ฑ์ฅํ๊ณ ๋์์์ด ๋ณํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์ ์ ์ํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ํต์ฌ ํ๋ ์ด์ด๋ก์์ ์ ์ง๋ฅผ ํ๊ณ ํ ํ๊ณ ์์ต๋๋ค.