Vue.js ๋ ๋ฌด์์ ๋๊น?
Vue.js๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ ๋์ JavaScript ํ๋ ์์ํฌ์ ๋๋ค. Vue CLI, HTML, CSS, JavaScript, Vue.js์ ๊ธฐ๋ฐ์ ์์๋ณด์ธ์.

Google JavaScript ํ๋ก๊ทธ๋๋จธ์ธ Evan You๋ 2013๋ 7์์ ํ๋ก๊ทธ๋จ์ ์ด๊ธฐ ํจ์น๋ฅผ ์ ๊ณตํ์ผ๋ฉฐ ์์คํ ์ 2014๋ 2์์ ์ฒซ ๋ฒ์งธ ๊ณต๊ฐ ๋ฐํ๋ฅผ ๋ฐํํ์ต๋๋ค. ์น ๋์์ด๋๋ก์ vue.js๋ฅผ ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ์๊ณ ์๋ Evan์ AngularJS์ ๊ธฐ๋ฅ - ๋ค์ค ๋ฐ์ดํฐ ์ฐ๊ฒฐ ๋ฐ ์ฌ์ฉ์ ์ ์ ๊ฐ๋ฅํ ๋ ์ด์์์ ํ์ฉํ๋ ๋ ๋ค๋ฅธ JavaScript ๊ตฌ์กฐ - ๋ ๊ฐ๋ฒผ์ด ์คํ์ผ.
Evan์ "๋ด๊ฐ ํญ์ ์ฌ๋ํ๋ Angular ๋ถ๋ถ์ ๋จ์ํ ๋ถ๋ฆฌํ๊ณ ๋ฏฟ์ ์ ์์ ์ ๋๋ก ์ด์คํ ๊ฒ์ ๊ฐ๋ฐํ ์ ์๋ค๋ฉด ์ด๋จ๊น์?"๋ผ๊ณ ๋งํฉ๋๋ค. ์ด ๊ธฐ์ฌ์์๋ Vue.js๊ฐ ๋ฌด์์ธ์ง, ์ฉ๋, ์ธ๊ธฐ๋, ์ฅ๋จ์ ์ ํฌํจํ์ฌ Vue.js์ ๊ธฐ๋ณธ ์ฌํญ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
Vue.js๋ ๋ฌด์์ ๋๊น?
Vue.js๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ ๋์ JavaScript ํ๋ ์์ํฌ ์ ๋๋ค. ์ด ์์คํ ์ ๊ฐํ๋ฅธ ํ์ต ๊ณก์ ์ผ๋ก ์ ์๋ ค์ ธ ์์ต๋๋ค. ๊ทธ๋ฌ๋ HTML, CSS ๋ฐ JavaScript์ ๋ํ ๊ธฐ๋ณธ์ ์ธ ์ดํด๋ง์ผ๋ก Vue.js์์ ์น ์ฑ ๊ตฌ์ฑ์ ์์ํ ์ ์๋ ์ก์ธ์ค ๊ฐ๋ฅํ๊ณ ๊ฐ๋จํ ํ๋ ์์ํฌ์ ๋๋ค. ์งง์ ํ์ต ๊ณก์ ์ ์ด ์ ์ง์ ํ๋ ์์ํฌ์ ํน์ง์ ๋๋ค. ์ ์ฐํ๋ฉฐ ์น ๊ฐ๋ฐ์์ ์ ํธ๋ฆฌํฐ ๋๋ ํฌ๊ด์ ์ธ ํ๋ ์์ํฌ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋ชจ๋ JavaScript ํ๋ ์์ํฌ์๋ ๋ค๋ฅธ ์์คํ ๋ณด๋ค ์ฐ์ ์์๊ฐ ๋์ ๊ณ ์ ํ ๊ธฐ๋ฅ ๋ฐ ํ์ง ์ธํธ๊ฐ ์์ต๋๋ค. Vue.js๋ Github.com์์ ์ง๋ 5๋ ๋์ ๊ฐ์ฅ ๋์ ํ๊ฐ๋ฅผ ๋ฐ์์ต๋๋ค. Vue.js ์ฐ์ ์ React JS ๊ทธ๋ฃน๋ณด๋ค ์ ์ง๋ง Vue.js ๋ฑ๊ธ ๊ธฐ๋ก์ Vue.js์ ๋ํด ์ ์ค๋ช ํ๊ณ ์ด์ผ๊ธฐํฉ๋๋ค.
Vue์ ํต์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์๋ฐฉํฅ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ ์ฌ์ฉํ์ฌ ํ๋กํ ํ์ ๊ณผ ๋ทฐ ๊ตฌ์ฑ ์์ ๊ฐ์ ๋์ ์กฐ์ ์ ๊ฐ๋ฅํ๊ฒ ํ๋ ๋ทฐ ๋ชจ๋ธ ๊ตฌ์ฑ ์์์ ์์กดํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋จ์ผ ํ์ด์ง ์ฑ ๊ฐ๋ ์ ์ฌ์ฉํ๋ ํ์ค ์น ํ๋ก๊ทธ๋จ์ ๋ ์ฝ๊ฒ ๊ตฌ์ถํ ์ ์์ต๋๋ค. Vue ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ธฐ์ด๋ HTML, CSS ๋ฐ JS์ ๋๋ค. ๋ฐ์ดํฐ ์ฐ๊ฒฐ์ ํตํด Vue๋ ํต์ฌ Vue ๋ชจ๋ธ์ "์ฐ๊ฒฐ๋" HTML ํ์ผ์ ๋์ ์ผ๋ก ๊ฐ์กฐํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋์์ด๋๋ ์ฌ์ฉ์์ ์ปดํจํฐ์์ ์๋ํ ์ ์๋ ์น ์ฑ์ ๋ง๋ค๊ณ ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์น ํ์ ์์ด ๋ชฐ์ ํ ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค.
๋์์ด๋๋ Vue๋ฅผ ์ฌ์ฉํ์ฌ ์ธํฐ๋ท ๋ธ๋ผ์ฐ์ ๋ด์์ ์ค์๊ฐ ๋ํ์์ ๋์ ์ปดํจํฐ ๊ฒ์์ ์ด๋ฅด๊ธฐ๊น์ง ๋ฌด์์ด๋ ๊ตฌ์ฑํ ์ ์์ต๋๋ค. ๊ธฐ๋ณธ JavaScript์ ๋ํ ๋ฐ์์ผ๋ก ๋ทฐ์ด์ ํ์๋๋ HTML ๋ฐ CSS๋ฅผ ์กฐ์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค. ๋ํ Vue.js์๋ ์๋ฒ ์ธก ๋ ๋๋ง์ด ์์ต๋๋ค. ์๋ฒ ์ธก ๋ ๋๋ง์ ์ฌ์ฉํ์ฌ ์๋ฒ์ HTML ํ์ผ์ HTML ํ์ด์ง๋ก ์ ํํ ์ ์์ต๋๋ค.
Vue.js๋ ์ฐ๋ฆฌ๊ฐ ์ง๊ธ๊น์ง ๋ณด๊ณ ์ถ์ฒํ ๊ฒ ์ค ๊ฐ์ฅ ์์ฉ ๊ฐ๋ฅํ ๋ฌธ์๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด ๋ฌธ์๋ ์ด๋ค ์ข ๋ฅ์ ๋ฌด์์์ ๋ํ ๋ณต์กํ ์ง์์ด ๋ฐ์ํ๋ ๊ฒ์ฒ๋ผ ๋ณด์ด์ง ์๋ ์ฝ๊ณ ๋จ๊ณ์ ์ธ ํ๋ก์ธ์ค๋ก ์ฐ๋ฆฌ๋ฅผ ์๋ดํฉ๋๋ค. react.JS ๋ฐ Angular์ ๋น๊ตํ๋ฉด ์ดํด ํจํด์ด ๊ฐ๋จํฉ๋๋ค. ๊ทธ๋ฌ๋ Vue.js์ ๊ฐ์ฅ ์ฃผ๋ชฉํ ๋งํ ์ธก๋ฉด์ ํ๋ก๊ทธ๋๋จธ๊ฐ HTML์ ํ์ฅํ ์ ์๋ HTML ์์ฑ์ ๋๋ค.
Vue.js๋ JavaScript์ ๋์ผํฉ๋๊น?
JavaScript๋ ์ง์์ ์ผ๋ก ์ ๋ฐ์ดํธ๋๋ ์ ๋ณด๋ฅผ ์์ฑํ๊ณ , ๋ฏธ๋์ด๋ฅผ ์กฐ์ํ๊ณ , ๊ทธ๋ํฝ์ ๋ง๋๋ ๋ฑ์ ์์ ์ ์ํํ ์ ์๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋๋ค. ๋ฐ๋ฉด Vue.js๋ ๊ฐ์ฅ ์ ๋ช ํ JavaScript ํ๋ ์์ํฌ ์ค ํ๋์ ๋๋ค. ํ๋ก ํธ์๋ ํ๋ ์์ํฌ์ ๊ธฐ๋ฅ์ ํฅ์์ํค๋ ค๋ ์ ๊ทผ ๊ฐ๋ฅํ ์์คํ ์ ๋๋ค.
Vue.js๋ ๋ฌด์์ ์ฌ์ฉ๋ฉ๋๊น?
์น ์ธํฐํ์ด์ค์ ๋จ์ผ ํ์ด์ง ์ฑ์ vue.js๋ฅผ ์ฌ์ฉํ์ฌ ๊ตฌ์ถ๋ ์ฃผ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ค. ๊ทธ๋ฌ๋ HTML ํ์ฅ ๋ฐ JS ๊ธฐ๋ฐ์ด Electron ์ํคํ ์ฒ์ ํจ๊ป ์๋ํ๊ธฐ ๋๋ฌธ์ ๋ฐ์คํฌํฑ ๋ฐ ์ค๋งํธํฐ ์ฑ ๊ฐ๋ฐ์๋ ์ฌ์ฉํ ์ ์์ด ๋งค์ฐ ์ ํธ๋๋ ํ๋ก ํธ์๋ ์๋ฃจ์ ์ ๋๋ค. Vue.js์ ์ง์๋ฌธ์ ๊ฐ๋ฐ์๊ฐ HTML์ ํ์ฅํ ์ ์๋ ๋ฐ์ด๋ ๊ธฐ๋ฅ์ ๋๋ค.
Vue๋ ํ์ค MVC(Model View Controller) ๊ตฌ์กฐ๋ฅผ ์ฌ์ฉํ์ฌ ๊ธฐ๋ณธ ๊ณ์ธต ์ํคํ ์ฒ ์ญํ ์ ํ๋ ํต์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํจ๊ป ์ฑ ๋๋ ์น ์ฌ์ดํธ์ ์ธํฐํ์ด์ค๋ฅผ ํ์ํฉ๋๋ค. ๊ทธ๋ฌ๋ React ํ๋ ์์ํฌ์ฒ๋ผ CBA์ ํจ๊ป ์์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ์กฐ์ ๊ฐ๋ฅํฉ๋๋ค. ๋ค์์ Vue.js๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ฃผ๋ ๋ช ๊ฐ์ง ์์ ๋๋ค.
๋ชจ๋ฐ์ผ ์ฑ ๊ฐ๋ฐ
Vue CLI, HTML, CSS ๋ฐ JavaScript์ ๋ํ ์ดํด๋ฅผ ๋ฐํ์ผ๋ก ์ํํธ์จ์ด ๊ฐ๋ฐ์๋ Vue.js๋ฅผ ์ฌ์ฉํ์ฌ ๋จ์ผ ์ฝ๋ ์กฐ๊ฐ์ผ๋ก ๊ด์ฐฎ์ Android ๋ฐ iOS ์ฑ์ ๊ฐ๋ฐํ ์ ์์ต๋๋ค. ๋ค์ดํฐ๋ธ ๋ชจ๋ฐ์ผ ์ฑ ์ ๋ง๋ค๊ณ ๊ฐ๋ฐ ๋๊ตฌ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.

์ด๋ฏธ์ง ์ถ์ฒ angelengineering.com
Entity Framework, ์ข ์ ํ์ ๋ฐ ๋ชฉ๋ก ์ ์์ Vue.js๊ฐ ์ ๊ณตํ๋ ๊ธฐ๋ฅ ์ค ์ผ๋ถ์ผ ๋ฟ์ ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์๊ฐ Vue๋ก ์ค์ฉ์ ์ธ ์ค๋งํธํฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๊ฒ ํด์ฃผ๋ ํ๋ฌ๊ทธ์ธ์ธ Nativescript-Vue๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
ํ๋กํ ํ์
๋์์ธ ์ ๋ฌธ๊ฐ๋ ์ํธ์์ ๋์งํธ์ ์ด๋ฅด๊ธฐ๊น์ง ์์ ์ ์๊ฐ์ ์ค์ ํ๋กํ ํ์ ์ผ๋ก ๋ณํํ์ฌ ์ฐ์ตํฉ๋๋ค. ๋์์ธ ์์ด๋์ด์ ์ฌ์ฉ์ ํ ์คํธ๋ฅผ ํฌ์ฐฉํ๊ธฐ ์ํด ๋์์ด๋๋ ๋ค์ํ ์์ค์ ์ฌ์ค๊ฐ์ผ๋ก ํ๋กํ ํ์ ์ ๋ง๋ญ๋๋ค. ๋ชฉ์ ์ ์ฌ์ฉํ์ฌ ์์ด๋์ด๋ฅผ ๊ฐ์ ํ๊ณ ํ๊ฐํ์ฌ ํ์ฌ์์ ์ ์ ํ ํญ๋ชฉ์ ์ถ์ํ ์ ์์ต๋๋ค.
ํ๋กํ ํ์ ์ ์ฌ์ฉํ๋ฉด ๊ฐ์ ์ ์ํ ์ ์์ ์์ฑํ ์ ์๋ ๊ฒฌ๊ณ ํ ๊ธฐ๋ฐ์ ํ๋ณดํจ์ผ๋ก์จ ํ๋กํ ํ์ ๊ณผ ๊ด๋ จ๋ ๊ฐ๋ฅํ ์ด์ , ์ํ ๋ฐ ๋น์ฉ์ ๋ํ ๋ช ํํ ํ ํ๋ฆฟ์ ๋ชจ๋ ์ฐธ๊ฐ์์๊ฒ ์ ๊ณตํ ์ ์์ต๋๋ค. ์ด๋ฌํ ํ๋กํ ํ์ ์ ์ฌ์ฉํ๋ฉด ๋ณ๊ฒฝ ์ฌํญ์ ์กฐ๊ธฐ์ ์กฐ์ ํ์ฌ ์๋ชป๋ ์๋ฒฝํ ๋จ์ผ ๋ฒ์ ์ ๋ํ ์ถฉ์ฑ๋๊ฐ ์ง์ญ UX ์ต๋๊ฐ์ ์ฌ๋ก์กํ ๊ถ๊ทน์ ์ผ๋ก ์ค์๋ก ์ธํด ๋์ ๋น์ฉ์ ์ง๋ถํ๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
๊ธฐ์กด ์ ํ๋ฆฌ์ผ์ด์
ํ์ฌ ์์ฉ ํ๋ก๊ทธ๋จ๊ณผ ์ํธ ์์ฉํ ์ ์๋ ๋ชจ๋ ๊ฐ๋ฐ ๊ธฐ์ ์ ๋ฅ๋ ฅ์ ์ค์ํ ๊ธฐ๋ฅ์ ๋๋ค. JavaScript๋ฅผ ์ฌ์ฉํ๊ณ ๋ค๋ฅธ ์๋ฃจ์ ์์ด ์๋ํ๊ธฐ ๋๋ฌธ์ Vue.js๋ฅผ ์ฌ์ฉํ๋ฉด ํ์ด์ฒ๋ผ ๊ฐ๋จํฉ๋๋ค. ๋ํ HTML, JS ๋๋ JSX๋ฅผ ์ฌ์ฉํ์ฌ vue.js๋ฅผ ์ฌ์ฉํ์ฌ ํ ํ๋ฆฟ์ ๋น๋ํ ์ ์์ต๋๋ค. Vue๋ ๊ตฌ์ฑ ์์์ ๊ฐ๋ฒผ์ด ๋์์ธ์ผ๋ก ์ธํด ๊ฑฐ์ ๋ชจ๋ ์์ฉ ํ๋ก๊ทธ๋จ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์
๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ถ๋ถ์ ์ฝํ ์ธ ๊ฐ ์ ์ ์ด๋ฉฐ ์์ ๊ตฌ์ฑ ์์๋ง ํ ๋ฒ์ ์์ ํด์ผ ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ค. ์๋ฅผ ๋ค์ด ์ฌ์ํจ์ ํ์ํ ๋ ๋๋ฌด ๋ง์ ์ด๋์ด ์๋ค๋ ๊ฒ์ ์ ์ ์์ต๋๋ค. ํค๋์ ์ฌ์ด๋๋ฐ๋ ์ฌ์ํจ ์ ์ฒด์์ ์ฝ์ ๊ฒ๊ณผ ๋์ผํ๊ฒ ์ ์ง๋ฉ๋๋ค.
ํด๋ฆญํ ๋๋ง๋ค SPA๋ ํ์ํ ๋ฐ์ดํฐ๋ง ์ ๊ณตํ ๋ค์ ๋ธ๋ผ์ฐ์ ์์ ๋ ๋๋งํฉ๋๋ค. ์ด๊ฒ์ ์์คํ ์ด ์ฌ์ฉ์๊ฐ ์ํํ๋ ๊ฐ ์์ ์ ๋ํด ์๋ก ๋ ๋๋ง๋ ์ ์ฒด ํ์ด์ง๋ฅผ ์์คํ ์ ์ ๊ณตํ๋ ์ผ๋ฐ์ ์ธ ํ์ด์ง ๋ก๋์ ๋ค๋ฆ ๋๋ค. ๊ฒฐ๊ณผ์ ์ผ๋ก ์ฌ์ฉ์๋ ํด๋ผ์ด์ธํธ ์ธก์ ๋จํธ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ผ๋ก ์ธํด ํจ์ฌ ๋ ๋น ๋ฅธ ์๋ต ์๊ฐ์ ๋ณผ ์ ์์ต๋๋ค. ๋ํ ์๋ฒ๊ฐ ์ ์กํด์ผ ํ๋ ๋ฐ์ดํฐ์ ์์ ์ค์ฌ ์ ์ฒด ์ ์ฐจ์ ํจ์จ์ฑ์ ๋์ด๊ณ ์ฌ์ฉ์์ ํ์ฌ ๋ชจ๋์๊ฒ ํํ์ ์ค๋๋ค.
๋จ์ผ ํ์ด์ง ์ฑ์ ์ค๋ช ํ๋ ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ ์ ์ ์ธํฐ๋ท ํ์ด์ง๋ก ์๊ฐํ๋ ๊ฒ์ ๋๋ค. ๋ฐ๋ผ์ ๋ชจ๋ฐ์ผ ์ฑ๊ณผ ๋งค์ฐ ์ ์ฌํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ด ํ์์ ๋ฐฐ๊ฒฝ์๋ ์๋ก์ด ๋ก๋ฉ ํ์ด์ง ๋์ ์น ์์ฉ ํ๋ก๊ทธ๋จ์ ์ ๋ฐ์ดํฐ๋ก ํ์ฌ ์น ์ฌ์ดํธ๋ฅผ ๋์ ์ผ๋ก ๋ฎ์ด์ฐ๋ ๊ฒ์ด ํฌํจ๋ฉ๋๋ค.
HTML ํ ํ๋ฆฟ
Vue.js๋ ํนํ HTML ์ ๋ฌธ ์ง์์ด ํ์คํ ์ฌ๋๋ค์ ์ํด ์์ฐ์ฑ์ ๋์ด๋ HTML ๊ธฐ๋ฐ ํ ํ๋ฆฟ์ ์์ฑํ๋ ๋ฐ์๋ ์ฌ์ฉ๋์ง๋ง ์ด์ ๋ํด์๋ ๋ ผ๋์ ์ฌ์ง๊ฐ ์์ต๋๋ค. ๋ํ Vue์ ํ ํ๋ฆฟ์ ๊ธฐ์กด ์น ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํธ ์์ฉ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ์๋ฎฌ๋ ์ด์ ๋ DOM(Document Object Model) ๋ ๋๋ง ๊ธฐ๋ฅ์ Vue์ ํ ํ๋ฆฟ์ ํฌํจ๋์ด ์์ต๋๋ค. ๊ฒฐ๊ณผ์ ์ผ๋ก Vue๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ปจํ ์คํธ๊ฐ ๋ณ๊ฒฝ๋ ๋ ์ต์ํ์ DOM ์์ ๋ง ์ํํฉ๋๋ค.
Vue.js๊ฐ ์ธ๊ธฐ ์๋ ์ด์ ๋ ๋ฌด์์ ๋๊น?
Vue.js๊ฐ ์ธ๊ธฐ ์๋ ์ฃผ์ ์ด์ ์ค ํ๋๋ ํ์ต ๊ณก์ ์ ๋๋ค. Vue์ ์ฌ์ฉ์ ์นํ์ ์ธ ํ์ต ๊ณก์ ์ ์ด๋ณด์์ ์๋ จ๋ ๊ฐ๋ฐ์ ๋ชจ๋์๊ฒ ์ ๋ฆฌํฉ๋๋ค. ์ํํธ์จ์ด ์์ง๋์ด๋ State of Vue.js ์ฐ๊ตฌ๋ฅผ ์ํด ์ค๋ฌธ์กฐ์ฌ๋ฅผ ๋ฐ์์ผ๋ฉฐ ๊ทธ ๊ฒฐ๊ณผ Vue์์ ํ์ต ๊ณก์ ์ด ๋ง์ ๊ด์ฌ์ ๋ถ๋ฌ์ผ์ผํค๋ ์์๋ผ๋ ๊ฒ์ ๋ฐ๊ฒฌํ์ต๋๋ค.
๊ณต์ ๊ฐ์ด๋์ ๋ด์ฉ์ ์ฝ๊ณ ๋๋ฉด ์ด๊ธฐ Vue ์ฑ์ ๋ง๋ค๊ธฐ ์ํด ES2015, TypeScript, JSX ๋๋ ๋๊ตฌ ๋ชจ์์ ๋ํ ์ฌ์ ์ดํด๊ฐ ํ์ํ์ง ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์์ํ๋ ค๋ฉด HTML, CSS ๋ฐ JavaScript์ ๋ํ ์ค๋ฌด ์ง์์ด ์์ด์ผ ํฉ๋๋ค. ํนํ, ๋งค์ฐ ๋ณต์กํ ์น ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ๋ ค๋ ๊ฒฝ์ฐ ํ๋ ์์ํฌ ํ์ฉ์ ๋ํ ์ฌ์ ์ง์์ด ํ์๋ ์๋๋๋ผ๋ ๊ฐ์น๊ฐ ์์ต๋๋ค.
๊ทธ ์ธ๊ธฐ์ ๋ ๋ค๋ฅธ ์ด์ ๋ ๋ฐ์ด๋ ์ ๊ทผ์ฑ ์ ๋๋ค. ๋น ๋ฅด๊ฒ ์์ง์ด๋ ์ํํธ์จ์ด ๊ฐ๋ฐ์๋ ์ถ๊ฐ ์ธ์ด ํฅ์์ ์์๋ณด๋ ๋ฐ ๋ง์ ์๊ฐ์ ํ ์ ํ ํ์๊ฐ ์๊ธฐ ๋๋ฌธ์ Vue์ ๋ฐ์ด๋ ์ค๋น์ฑ ๋๋ถ์ ์ฐฝ์๋ ฅ์ ์ต๋ํ ๋ฐํํ ์ ์์ต๋๋ค. ์์ ์ ์ํ ๊ทธ๋ฃน์ ํจ๊ป ๊ตฌ์ถํ๊ฑฐ๋ Vue๋ฅผ ํ๋๋ก ํตํฉํ๋ ๊ฒ์ด ๋ ๊ฐ๋จํ๊ณ ๋น ๋ฆ ๋๋ค. Vue ์ ๋ฌธ๊ฐ๋ ๊ฑฐ์ ์์ง๋ง ์ ๋ฌธ ์ง์์ ๊ฐ์ถ React ์ ๋ฌธ๊ฐ๋ Vue๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ์ฌ ์ฝ ์ผ์ฃผ์ผ ์์ ๊ฐ์น๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค.
Vue.js์ ์ฅ์
- ๋ฐ์ด๋ ๋ด์ฅ ์์ฉ ํ๋ก๊ทธ๋จ
Vue.js๋ ๋น ๋ฆ ๋๋ค. Vue.js๋ ๋ด๋ถ์์ ๊ฐ์ฅ ๋น ๋ฅธ JavaScript ํ๋ ์์ํฌ๋ ์๋์ง๋ง SPA ๋ฐ UI์์ ์๋ฒฝํ UX๋ฅผ ์์ฑํ๊ธฐ์ ์ถฉ๋ถํ ๊ธฐ๋ฅ ์ด์์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ๋ํ Vue๋ ์ค๋งํธํฐ ์ฑ ๋ถ์ผ์์ Angular ๋ฐ React๋ณด๋ค ๋น ๋ฅด๊ฒ ํ๋ก์ ํธ๋ฅผ ๋น๋ํฉ๋๋ค.
Vue์ ์ฑ๋ฅ์ 53%์ ์๋น์๊ฐ 3์ด ์ด์ ์ด๋ฆฌ๋ ์ฌ์ดํธ๋ฅผ ์ข ๋ฃํ๊ธฐ ๋๋ฌธ์ JavaScript ํ๋ ์์ํฌ๋ฅผ ์ ํํ ๋ ์ผ๋์ ๋์ด์ผ ํ ์ค์ํฉ๋๋ค.
- ์ ์ฐํ๊ณ ๋ค์ํ ๊ฐ๋ฐ ํ๊ฒฝ
Vue๋ ์ ์ฐํ๊ณ ๋ค์ํ ์น ๊ฐ๋ฐ ํ๊ฒฝ์ ์ ๊ณตํฉ๋๋ค. Vue์์ ์น ํ๋ก๊ทธ๋จ์ ๋ชจ๋ ๋๋ ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋ฐ๋ฉ๋๋ค. ๋ํ Vue์ ๋จ์ผ ํ์ผ ๋ชจ๋/๊ตฌ์ฑ ์์๋ ๋์จํ๊ฒ ์ฐ๊ฒฐ๋์ด ์์ด ์ด๋ฏธ ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๊ฐ๋ฐ์์๊ฒ ์๋นํ ๋ค์ฉ์ฑ์ ์ ๊ณตํ๊ณ ์์ง๋ง ์ฌ์ฌ์ฉ์ฑ์ ๋์ด๊ณ ์์ฐ ์๊ฐ์ ๋จ์ถํฉ๋๋ค.
์ปดํฌ๋ํธ ๊ธฐ๋ฐ ๊ตฌ์กฐ๋ ํฅํ ์ฑ์ ์ฑ์ฅ์ํฌ ์ฑ์ ๊ฐ๋ฐํ ๋ ์ต๊ณ ์ ์ ํ์ ๋๋ค. Vue๋ฅผ ์ฌ์ฉํ ๋๊ท๋ชจ ์ฑ ๊ฐ๋ฐ์๋ ๋ชจ๋์ ์ค๊ณ-๋น๋ ๋ฉ์ปค๋์ฆ์ ์ฌ์ฉํด์ผ ํฉ๋๋ค. Vue๊ฐ ๊ถ์ฅํ๋ ์บ ํ์ธ ๊ธฐ์ฌ์(Webpack ๋๋ Browserify)๋ ์ฌ์ฉ์๊ฐ ์ ํํ ์ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ์์ค ์ฝ๋๋ฅผ ์ดํ์ ๋ณ๊ฒฝํ ์ ์๋๋ก ํ์ฌ ๊ฐ๋ฐ์์๊ฒ ์๋นํ ์์ ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ํดํ์ ์ธ ์ํ๊ณ์ ๋ค์์ฑ
Vue ์ ๋๋ฒ์ค์๋ ๋ง์ ํ๋ฌ๊ทธ์ธ์ ํฌํจํ์ฌ ๊ฐ๋ฐ์๊ฐ ํ์๋ก ํ๋ ๋ชจ๋ ๋๊ตฌ๊ฐ ํฌํจ๋์ด ์์ต๋๋ค. ๊ฐ๋ฐ ๋ฒค์ฒ๋ฅผ ๊ฐ์ ํ๋ ์ ๋ช ํ ๋๊ตฌ๋ ๋จ์ผ ํ์ด์ง ์ฑ ๊ฐ์ ํ์ํ๊ณ ์ ์ ํ URL์ ์ฐ๊ฒฐํ๊ธฐ ์ํ Vue ๋ผ์ฐํฐ์ ๊ณต๊ณต ๊ด๋ฆฌ๋ฅผ ์ํ ๋ฐ์ด๋ Vuex์ ๋๋ค.
๋ํ Vue๋ ๋ธ๋ผ์ฐ์ ํ๋ฌ๊ทธ์ธ ํํ๋ก ์ ๊ณต๋๋ DevTools๋ฅผ ์ ๊ณตํฉ๋๋ค. DevTools๋ฅผ ์ฌ์ฉํ๋ฉด ์์ฉ ํ๋ก๊ทธ๋จ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ๊ตฌ์ฑ ์์์ ์ํคํ ์ฒ์ ์ํ๋ฅผ ์ฝ๊ฒ ๊ฒ์ฌํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ์๊ฐ ์ฌํ์ ํ๊ณ , ์ํํธ์จ์ด๋ฅผ ๊ฒ์ฌํ์ฌ ์ด์ ๋ฒ์ ๊ณผ ์กฐ์ ๋ ๋ด์ฉ์ ํ์ธํ๊ณ , ๊ณ ์ ํ ํ๋์ ๋ชจ๋ํฐ๋งํ๊ณ , ์์ฉ ํ๋ก๊ทธ๋จ์ ์ค์๊ฐ์ผ๋ก ํธ์งํ ์ ์์ต๋๋ค.
- ์์ ํฌ๊ธฐ
ํ๋ ์์ํฌ์ ๋ค์ด๋ก๋ ๊ฐ๋ฅํ zip ํ์ผ ํฌ๊ธฐ๋ 18KB์ ๋๋ค. ๊ฐ๋ณ๊ธฐ ๋๋ฌธ์ ๋น ๋ฅด๊ฒ ์ค์น๋๊ณ ๊ฒ์ ์์ง ์์์ ์ฑ๋ฅ์ด ํฅ์๋ฉ๋๋ค.
- ๋ฐ๋
Vue์๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ์ ๋ฐ์ดํธํ๋ ๋ฐ์ ๋๊ตฌ๊ฐ ๋ด์ฅ๋์ด ์์ต๋๋ค. ๊ฒฐ๊ณผ์ ์ผ๋ก ํ๋ก๊ทธ๋๋จธ๋ ์ด ์ ๊ทผ ๋ฐฉ์์ด ์ ์งํ๋ ์๊ฐ๊ณผ ์ถ๊ฐ ์ฝ๋ ๋ธ๋ก์ ์ฌ์ฉํ์ฌ ํจ์จ์ฑ์ ๋์ด๋ ๋์์ ๋ค๋ฅธ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ ๋ฐ ์ง์คํ ์ ์์ต๋๋ค.
- ์๋ฐฉํฅ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ
๋ฐ์ดํฐ๋ฒ ์ด์ค ์คํค๋ง์ ์๊ฐ์ DOM ๋๋ HTML ํ ํ๋ฆฟ ๊ฐ์ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ ๊ด๊ณ๊ฐ ์กด์ฌํฉ๋๋ค. ํ ์ฑ๋์ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ ํตํด ๋ ์๋ ํ๋กํ ํ์ ์์ ์ธํฐํ์ด์ค๋ก ์ด๋ํ ์ ์์ต๋๋ค. ์๋ณธ์ ์์ ํ๋ฉด DOM์ด ์๋์ผ๋ก ๋ณ๊ฒฝ๋์ง๋ง DOM์๋ ํ๋กํ ํ์ ์ ๋ํ ์ฝ๊ธฐ ์ ์ฉ ์๊ฒฉ ์ฆ๋ช ์ด ์๊ธฐ ๋๋ฌธ์ ์ด ๊ธฐ๋ฅ์ ๋ฐ๋๋ก ์๋ํ์ง ์์ต๋๋ค. ์๋ฐฉํฅ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ ์ฌ์ฉํ๋ฉด ๋ ๊ฐ์ง ์ธก๋ฉด์์ ํ๋กํ ํ์ ๊ณผ ์ธํฐํ์ด์ค ๊ฐ์ ์ ๋ณด๋ฅผ ๊ตํํ ์ ์์ต๋๋ค.
Vue.js์ ๋จ์
- ๋ถ์ ์ ํ ํ์ฅ์ฑ
Vue.js์๋ ์์์ ํ๋ก๊ทธ๋๋จธ๊ฐ ์๋ ์ง์ญ ์ํ๊ณ๊ฐ ์์ต๋๋ค. ๊ฒฐ๊ณผ์ ์ผ๋ก ํ์ฅ์ด ๋ถ๊ฐ๋ฅํ์ฌ ๋๊ท๋ชจ ํ๋ก์ ํธ์ ์ ํฉํ์ง ์์ต๋๋ค. ํ๋ ์์ํฌ๋ ๋ณต์กํ ํ๋ก์ ํธ์์ ์ฌ์ฉ๋๋ ๊ฒฝ์ฐ ์๋ฃจ์ ์ ๋ํ ์ ์ ์ง์์ ์ํด ๊ด๋ฒ์ํ ๋คํธ์ํฌ๋ฅผ ๋ณด์ ํด์ผ ํฉ๋๋ค.
- ๊ด๋ฒ์ํ ์ ๋ฌธ ์ง์์ ๊ฐ์ถ ์ ๋ฌธ๊ฐ๊ฐ ๋ถ์กฑํฉ๋๋ค.
์ด๊ฒ์ ์๋กญ๊ณ ์ง๋ณด์ ์ธ ํ๋ ์์ํฌ์ด๊ธฐ ๋๋ฌธ์ ์๋นํ Vue ์ ๋ฌธ ์ง์์ ๊ฐ์ถ ์ ๋ฌธ๊ฐ๊ฐ ์ ์ต๋๋ค. ๋ํ, ์ด ์์คํ ์ ์์ฃผ ๋ณ๊ฒฝ๋๊ธฐ ๋๋ฌธ์ ๋ถํธํฉ๋๋ค. ์๋ จ๋ ๋น๋๋ผ๋ Vue์ ์ด์ ์ ์ต๋ํ ํ์ฉํ๋ ค๋ฉด ์ฒ์๋ถํฐ ์๋ก์ด ๊ธฐ๋ฅ์ ๋ฐฐ์ฐ๊ฑฐ๋ ์กฐ์ฌํด์ผ ํฉ๋๋ค.
- ์ฝ๋์ ๊ทน๋์ ์ ์ฐ์ฑ
์ฝ๋ ์ ์ฐ์ฑ์ ๊ฐ๋ฐ์์๊ฒ ๋ง์ ์ด์ ์ ์ ๊ณตํ์ง๋ง ๊ทน๋จ์ ์ธ ์ ์ฐ์ฑ์ ๋ถ์ผ์น ๋ฐ ์ฝ๋ฉ ์ค์๋ฅผ ์ฆ๊ฐ์ํฌ ์ ์์ต๋๋ค. ์ฝ๋ฉ ์ง์ฐ์ ๋๋ถ๋ถ์ ํ ๋ฒ์ ์ฌ๋ฌ ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์์ ์ฌ์ฉํ ์ ์๋ ๋๋ฌด ์ ์ฐํ ํ์ ์ํด ๋ฐ์ํฉ๋๋ค.
์ฌ๋ฐ๋ฅธ Vue.js ๊ฐ๋ฐ์๋ฅผ ๊ณ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ฌด์์ ๋๊น?
์๋ฐฑ ๋ช ์ค์์ ์ฌ๋ฐ๋ฅธ Vue.js ๊ฐ๋ฐ์๋ฅผ ๊ณ ์ฉํ๋ ๊ฒ์ ์ด๋ ค์ด ์ผ์ ๋๋ค. ์ ํฉํ ๊ฐ๋ฐ์๋ฅผ ์ ํํ๋ ค๋ฉด ์๊ฒฉ์ ํ๊ฐํด์ผ ํฉ๋๋ค. ๊ทธ ๊ฒฐ๊ณผ, ์ต์ ํ์์ ์ ๋ฐํ ๋ ์ฃผ์ํด์ผ ํ ์ฃผ์ ํน์ฑ์ ๋์ดํ๊ธฐ๋ก ํ์ต๋๋ค.
์ ๋ฌธ Vue js ๊ฐ๋ฐ์๋ ๋ค์๊ณผ ๊ฐ์ ๋ฅ๋ ฅ์ ๊ฐ์ถ์ด์ผ ํฉ๋๋ค.
- HTML ๋ฐ CSS ์ ๋ฌธ๊ฐ
- ๊ณ ์ ๋ฐ ํ๋ JavaScript์ ๋ํ ํ์คํ ์ดํด ๋ณด์
- ๊ฐ๋ฐ์๋ Git ์ฌ์ฉ๋ฒ์ ์์์ผ ํฉ๋๋ค.
- NPM ๋๋ Yarn์ ์๋ จ๋ ์ฌ์ฉ์์ฌ์ผ ํฉ๋๋ค.
- Vue ์ฝ๋ฉ ์ธ์ด, Vue ๋ผ์ฐํฐ ๋ฐ Vue CLI๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค.
์ด์ ์ฌ๋ฅ ์๋ Vue ๊ฐ๋ฐ์๋ฅผ ์ฐพ๋ ๋ฐฉ๋ฒ์ ์๊ฒ ๋์์ต๋๋ค. ๊ฐ๋ฐ์๊ฐ ์๋๊ณ ์ ๋ฌธ๊ฐ์ ์๊ฒฉ์ ํ๊ฐํ ์ ์๋ ๊ฒฝ์ฐ ์ด ํ๋ก์ธ์ค๊ฐ ๋ค์ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ๋ฌด์์ ํ ๊น์? ๋ ธ ์ฝ๋ ์ ๊ทผ ๋ฐฉ์์ ์ฃผ์ํ์ญ์์ค(๋ ธ ์ฝ๋๋ ์ฝ๋ ์์ฑ์ ํฌํจํ์ง ์๋ ์ํํธ์จ์ด๋ฅผ ๋ง๋ค๊ณ ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋๋ค). ๊ทธ๋ฌํ ๋๊ตฌ ์ค ํ๋๋ AppMaster์ ๋๋ค. ํฅ๋ฏธ๋ก์ด ์ฌ์ค์ AppMaster๊ฐ vue3 ์ ์ฌ์ฉํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฑ ํ๋ค๋ ๊ฒ์ ๋๋ค. ํ๋ก์ ํธ์์ AppMaster๋ฅผ ์ฌ์ฉํ๋ฉด ์ ํต์ ์ผ๋ก ๊ฐ๋ฐํ ๊ฒ๋ณด๋ค ๋ช ๋ฐฐ๋ ๋น ๋ฅด๊ณ ์ ๋ ดํ๊ฒ ์ข์ ๊นจ๋ํ ์ฝ๋์ ์๋ํ๋ ์์ฉ ํ๋ก๊ทธ๋จ์ ์ป์ ์ ์์ต๋๋ค.
๋ง์ง๋ง ๋จ์ด
์ด ๊ฒ์๋ฌผ์์ Vue.js๊ฐ ์ธ๊ธฐ ์๋ ์ด์ , ์ด์ ๋ฐ ๋จ์ ์ ํฌํจํ์ฌ Vue.js๊ฐ ๋ฌด์์ธ์ง์ ๋ํด ๋ ผ์ํ์ต๋๋ค. Vue.js์ ๋ํ ์ดํด๊ฐ ํฅ์๋์ด ํ์ฅ ๊ฐ๋ฅํ๊ณ ๋งค์ฐ ํจ๊ณผ์ ์ธ ํ๋ก ํธ์๋ ์ฑ์ ๋ง๋ค ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.


