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