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

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

Facebook์—์„œ ๊ฐœ๋ฐœ ๋ฐ ์œ ์ง€ ๊ด€๋ฆฌํ•˜๋Š” React๋Š” ํšจ์œจ์ ์ธ ์„ ์–ธ์  UI ๊ตฌ์„ฑ ์š”์†Œ, ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„ ๋ชจ๋ธ, ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ์˜ค๋ฒ„ํ—ค๋“œ๋ฅผ ์ค„์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•˜๋Š” ๊ฐ€์ƒ DOM์˜ ํš๊ธฐ์ ์ธ ๊ฐœ๋…์œผ๋กœ ๊ตฌ๋ณ„๋˜๋Š” ๋งค์šฐ ์ธ๊ธฐ ์žˆ๋Š” ์˜คํ”ˆ ์†Œ์Šค JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๋Š” ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ค๊ณ  ํ•ด๋‹น ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ DOM์˜ ์ง์ ‘์ ์ธ ์กฐ์ž‘์„ ์ œ๊ฑฐํ•˜๊ณ  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ธํ„ฐํŽ˜์ด์Šค์˜ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ๋ Œ๋”๋ง์„ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Google์ด ๋งŒ๋“  Angular๋Š” ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ ์„ธํŠธ, ๋‚ด์žฅ ๋„๊ตฌ, ์ข…์†์„ฑ ์ฃผ์ž… ๋ฐ ์ •๊ตํ•œ ๋ณ€๊ฒฝ ๊ฐ์ง€ ๋ฉ”์ปค๋‹ˆ์ฆ˜๊ณผ ๊ฐ™์€ ๊ณ ๊ธ‰ ๊ฐœ๋…์˜ ํ†ตํ•ฉ์œผ๋กœ ๊ฐœ๋ฐœ์ž๋“ค๋กœ๋ถ€ํ„ฐ ์ƒ๋‹นํ•œ ๊ด€์‹ฌ์„ ๋ฐ›์•„์˜จ ๋˜ ๋‹ค๋ฅธ ํ—ค๋น„๊ธ‰ ํ”„๋ŸฐํŠธ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. Angular๋Š” ๊ตฌ์„ฑ ์š”์†Œ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ฝ”๋“œ ๋ชจ๋“ˆ์„ฑ๊ณผ ์žฌ์‚ฌ์šฉ์„ฑ์„ ์ด‰์ง„ํ•˜๊ณ  ๋ฐ˜์‘ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์šฉ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ RxJS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ˜์‘ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

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

AppMasterno-code ํ”Œ๋žซํผ์—์„œ๋Š” ํ”„๋ŸฐํŠธ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ํŠนํžˆ Vue 3 ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์‹œ๊ฐ์ ์œผ๋กœ ํ›Œ๋ฅญํ•˜๊ณ  ๋ฐ˜์‘์„ฑ์ด ๋›ฐ์–ด๋‚˜๋ฉฐ ๋Œ€ํ™”ํ˜•์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•จ์œผ๋กœ์จ ๊ณ ๊ฐ์—๊ฒŒ ๋…ํŠนํ•œ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ ํ”Œ๋žซํผ์„ ํ†ตํ•ด ๊ณ ๊ฐ์€ ๊ฐ„๋‹จํ•œ drag-and-drop ๊ธฐ๋Šฅ์œผ๋กœ UI๋ฅผ ๋””์ž์ธํ•˜๊ณ , Web BP ๋””์ž์ด๋„ˆ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ์ƒ์„ฑํ•˜๊ณ , ์™„์ „ํ•œ ๋Œ€ํ™”ํ˜• ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‰ฝ๊ฒŒ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋ŸฐํŠธ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ ํƒ์€ ํ”„๋กœ์ ํŠธ์˜ ์š”๊ตฌ ์‚ฌํ•ญ, ๋ฒ”์œ„, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ƒํƒœ๊ณ„์— ๋Œ€ํ•œ ํŒ€์˜ ์นœ์ˆ™๋„์— ๋”ฐ๋ผ ํฌ๊ฒŒ ์ขŒ์šฐ๋œ๋‹ค๋Š” ์ ์— ์œ ์˜ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. React์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ณต์žกํ•œ ์ƒํƒœ ๊ด€๋ฆฌ์™€ ๋†’์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์„ฑ๋Šฅ์ด ํ•„์š”ํ•œ ๋Œ€๊ทœ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์ ํ•ฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ˜๋ฉด, Vue.js๋Š” ๋ฆฌ์†Œ์Šค ์š”๊ตฌ ์‚ฌํ•ญ์ด ์ ๊ณ  UI ์ƒํ˜ธ ์ž‘์šฉ์ด ๋” ๊ฐ„๋‹จํ•œ ์†Œ๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์— ๋” ์ ํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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