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

Vue.js ๋ž€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

Vue.js๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋™์  JavaScript ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. Vue CLI, HTML, CSS, JavaScript, Vue.js์˜ ๊ธฐ๋ฐ˜์„ ์•Œ์•„๋ณด์„ธ์š”.

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๊ฐ€ ์ธ๊ธฐ ์žˆ๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์›ํ•˜๋Š” ๊ณณ์— ๋ฐฐํฌ
AppMaster Cloud์—์„œ ์‹คํ–‰ํ•˜๊ฑฐ๋‚˜ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ๋‚ด๋ณด๋‚ด์–ด ์ž์ฒด ํ˜ธ์ŠคํŒ…
์•ฑ ๋ฐฐํฌ

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๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ „ํ†ต์ ์œผ๋กœ ๊ฐœ๋ฐœํ•œ ๊ฒƒ๋ณด๋‹ค ๋ช‡ ๋ฐฐ๋‚˜ ๋น ๋ฅด๊ณ  ์ €๋ ดํ•˜๊ฒŒ ์ข‹์€ ๊นจ๋—ํ•œ ์ฝ”๋“œ์™€ ์ž‘๋™ํ•˜๋Š” ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋งˆ์ง€๋ง‰ ๋‹จ์–ด

์„ค์ • ์ ๊ฒŒ ํ•˜๊ณ  SPA ๋ฐฐํฌ
์ธ์ฆ๊ณผ API ์—ฐ๊ฒฐ์ด ๋‚ด์žฅ๋œ Vue ๊ธฐ๋ฐ˜ ์‹ฑ๊ธ€ํŽ˜์ด์ง€ ์•ฑ ์ƒ์„ฑ
ํ”„๋กœ์ ํŠธ ์‹œ์ž‘

์ด ๊ฒŒ์‹œ๋ฌผ์—์„œ Vue.js๊ฐ€ ์ธ๊ธฐ ์žˆ๋Š” ์ด์œ , ์ด์  ๋ฐ ๋‹จ์ ์„ ํฌํ•จํ•˜์—ฌ Vue.js๊ฐ€ ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•ด ๋…ผ์˜ํ–ˆ์Šต๋‹ˆ๋‹ค. Vue.js์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ํ–ฅ์ƒ๋˜์–ด ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๊ณ  ๋งค์šฐ ํšจ๊ณผ์ ์ธ ํ”„๋ก ํŠธ์—”๋“œ ์•ฑ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์‰ฌ์šด ์‹œ์ž‘
๋ฉ‹์ง„๋งŒ๋“ค๊ธฐ

๋ฌด๋ฃŒ ์š”๊ธˆ์ œ๋กœ AppMaster๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์„ธ์š”.
์ค€๋น„๊ฐ€ ๋˜๋ฉด ์ ์ ˆํ•œ ๊ตฌ๋…์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‹œ์ž‘ํ•˜๋‹ค
Vue.js ๋ž€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? | AppMaster