Vue.js๋ž€?

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

์žฅ์ 

  1. ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ๋‚ฎ๋‹ค.

  2. react์™€ angular์— ๋น„ํ•ด ์„ฑ๋Šฅ์ด ์šฐ์ˆ˜ํ•˜๊ณ , ๋น ๋ฅด๋‹ค.

  3. react์˜ ์žฅ์ ๊ณผ angular์˜ ์žฅ์ ์„ ๊ฐ–๊ณ  ์žˆ๋‹ค. ( angular์˜ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ํŠน์„ฑ & react์˜ virtual DOM ๊ธฐ๋ฐ˜ ๋ Œ๋”๋ง ํŠน์ง• )

๋‹ค๋ฅธ ํ”„๋ ˆ์ž„์›Œํฌ์™€ ์„ฑ๋Šฅ ๋น„๊ต

ํŠน์ง•

UI ํ™”๋ฉด๋‹จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

vue.js๋Š” UI ํ™”๋ฉด ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜์ธ MVVM ํŒจํ„ด์˜ ๋ทฐ ๋ชจ๋ธ์— ํ•ด๋‹นํ•˜๋Š” ํ™”๋ฉด๋‹จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

MVVM ํŒจํ„ด์ด๋ž€ ํ™”๋ฉด์„ Model - View - ViewModel ๋กœ ๊ตฌ์กฐํ™”ํ•˜์—ฌ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค. ํ™”๋ฉด์˜ ์š”์†Œ๋“ค์„ ์ œ์–ดํ•˜๋Š” ์ฝ”๋“œ์™€ ๋ฐ์ดํ„ฐ ์ œ์–ด๋กœ์ง์„ ๋ถ„๋ฆฌํ•˜์—ฌ ์ฝ”๋“œ๋ฅผ ๋” ์ง๊ด€์ ์œผ๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๊ณ , ์œ ์ง€ ๋ณด์ˆ˜๊ฐ€ ์‰ฌ์›Œ์ง„๋‹ค.

MVVM - ์œ„ํ‚คํ”ผ๋””์•„

๋งˆํฌ์—… ์–ธ์–ด๋‚˜ GUI ์ฝ”๋“œ๋ฅผ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง or ๋ฐฑ์—”๋“œ ๋กœ์ง๊ณผ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ฐœ๋ฐœํ•˜๋Š” ์†Œํ”„ํŠธ์›จ์–ด ๋””์ž์ธ ํŒจํ„ด

์šฉ์–ด

์„ค๋ช…

View

์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์ด๋Š” ํ™”๋ฉด

DOM

HTML ๋ฌธ์„œ์— ๋“ค์–ด๊ฐ€๋Š” ์š”์†Œ(ํƒœํฌ, ํด๋ž˜์Šค, ์†์„ฑ ๋“ฑ)์˜ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ๋ฐ์ดํ„ฐ ํŠธ๋ฆฌ

DOM Listener

DOM์˜ ๋ณ€๊ฒฝ ๋‚ด์—ญ์— ๋Œ€ํ•ด ๋ฐ”๋กœ ๋ฐ˜์‘ํ•ด ํŠน์ • ๋กœ์ง์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์žฅ์น˜

Model

๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด๋Š” ์šฉ๊ธฐ, ๋ณดํ†ต ์„œ๋ฒ„์—์„œ ๊ฐ€์ ธ์˜จ ๋ฐ์ดํ„ฐ๋ฅผ javascript ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ์ €์žฅ

Data Binding

View์— ํ‘œ์‹œ๋˜๋Š” ๋‚ด์šฉ๊ณผ Model์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋™๊ธฐํ™”

ViewModel

๋ทฐ์™€ ๋ชจ๋ธ์˜ ์ค‘๊ฐ„ ์˜์—ญ, DOM Listener์™€ Data Binding์„ ์ œ๊ณตํ•˜๋Š” ์˜์—ญ

vue๋Š” ํ™”๋ฉด์˜ ์š”์†Œ๊ฐ€ ๋ณ€๊ฒฝ๋˜๊ฑฐ๋‚˜ ์กฐ์ž‘์ด ์ผ์–ด๋‚  ๋•Œ ์ฆ‰๊ฐ์ ์œผ๋กœ ๋ฐ˜์‘ํ•˜์—ฌ ํ™”๋ฉด์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐฑ์‹ ํ•˜์—ฌ ๋ณด์—ฌ์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ํ™”๋ฉด์˜ ํ‘œํ˜„์— ์ฃผ๋กœ ๊ด€์—ฌํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด๋‹จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ผ๊ณ ๋„ ํ•œ๋‹ค.

์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ํ”„๋ ˆ์ž„์›Œํฌ

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

React์™€ Angular์˜ ์žฅ์ ์„ ๊ฐ€์ง„

vue๋Š” angular์˜ ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ๊ณผ react์˜ ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์˜ ์žฅ์ ์„ ๋ชจ๋‘ ๊ฒฐํ•ฉํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค.

  • ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์ด๋ž€ ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ๊ฐ’๊ณผ ํ”„๋ ˆ์ž„์›Œํฌ์˜ ๋ชจ๋ธ ๋ฐ์ดํ„ฐ ๊ฐ’์ด ๋™๊ธฐํ™”๋˜์–ด ํ•œ์ชฝ์ด ๋ณ€๊ฒฝ๋˜๋ฉด ๋‹ค๋ฅธ ํ•œ์ชฝ๋„ ์ž๋™์œผ๋กœ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.

  • ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์€ ์ปดํฌ๋„ŒํŠธ์˜ ๋‹จ๋ฐฉํ–ฅ ํ†ต์‹ ์„ ์˜๋ฏธํ•˜๋ฉฐ, ์ปดํฌ๋„ŒํŠธ ๊ฐ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ๋•Œ ํ•ญ์ƒ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ ๋ฐฉํ–ฅ์œผ๋กœ๋งŒ ์ „๋‹ฌํ•˜๋„๋ก ๊ตฌ์กฐํ™”๋˜์–ด ์žˆ๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.

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

Last updated

Was this helpful?