Vue.js?

  • 2014๋…„ 2์›” ์ฒซ ์ถœ์‹œ, ๊ฐœ๋ฐœ์ž Evan You๊ฐ€ ๋งŒ๋“ (TMI) Javascript front-end framework.
  • Angular JS์—์„œ ์˜๊ฐ ๋ฐ›์•„ ๋ชจ๋ธ๋กœ ์‚ผ๊ณ  ๊ฐœ๋ฐœ (์‹ค์ œ ์ดˆ์ฐฝ๊ธฐ Vue๋Š” AngularJS์™€ ๋งค์šฐ ์œ ์‚ฌ)

Why Vue.js?

์™œ ๋งŽ์€ ์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋“ค์ด Vue๋ฅผ ๋งŽ์ด ์„ ํƒํ•˜๊ณ  ๋„์ž…ํ•˜๋ คํ•˜๋Š”์ง€?

  • ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ์‹ฌํ•˜์ง€ ์•Š๋‹ค. ํ•œ๋งˆ๋””๋กœ ์‰ฝ๋‹ค.
  • ๊ณต์‹๋ฌธ์„œ๊ฐ€ ์นœ์ ˆํ•˜๋‹ค. (๊ฐœ์ธ์ ์œผ๋กœ๋„ Vue์ฑ… ๊ดœํžˆ ์‚ฐ ๊ฒƒ ๊ฐ™๋‹ค.)
  • ๋””์ž์ธ ๋ฐ ์•„ํ‚คํ…์ณ๊ฐ€ Angular & React์™€ ์œ ์‚ฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํƒ€ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ๋น ๋ฅด๊ฒŒ ํ™˜์Šน๊ฐ€๋Šฅ.

ํŠน์ง•

  • ๋‹จ์ผํ˜• ํ”„๋ ˆ์ž„์›Œํฌ์™€ ๋‹ฌ๋ฆฌ ์ ์ง„์ ์œผ๋กœ ์ฑ„ํƒํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„๋จ
  • View layer์— ์ดˆ์ ์„ ๋งž์ถ”์–ด ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚˜ ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์™€ ํ†ตํ•ฉ์ด ์‰ฌ์›€
  • MVVM ํŒจํ„ด
  • ๊ฐ€์ƒ DOM ํ™œ์šฉ
  • ๋‹จ์ผ ํŒŒ์ผ ์ปดํฌ๋„ŒํŠธ
  • Typescript ์ง€์›
  • Template ๋ฌธ๋ฒ• ์‚ฌ์šฉ(JSX๋„ ์‚ฌ์šฉ๊ฐ€๋Šฅ)
  • ์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ Œ๋”๋ง ๋ฐ ์‚ฌ์ „ ๋ Œ๋”๋ง ์ง€์›
  • ๋งŽ์€ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ”Œ๋Ÿฌ๊ทธ์ธ ์ง€์› (Webpack ,browerify โ€ฆ)

๋‹ค๋ฅธ ํ”„๋ ˆ์ž„์›Œํฌ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๋น„๊ต

  • React
1. ๊ณตํ†ต์ 

- ๊ฐ€์ƒ DOM ํ™œ์šฉ
- ์กฐํ•ฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ ์ œ๊ณต
- ์ฝ”์–ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—๋งŒ ์ง‘์ค‘ํ•˜๊ณ , ๋ผ์šฐํŒ… ๋ฐ ์ „์—ญ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ์ปดํŒจ๋‹ˆ์–ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
- ๋ Œ๋”๋ง ํ•จ์ˆ˜ ๋ฐ JSX ์ง€์›
    
2. ์ฐจ์ด์ 

- React ๋ณด๋‹ค ๋›ฐ์–ด๋‚œ ๋ Œ๋”๋ง ์„ฑ๋Šฅ ๋ฐ ๊ฐฑ์‹  ์„ฑ๋Šฅ
- Template ๋ฌธ๋ฒ• ์ œ๊ณต
- ๋‹จ์ผ ํŒŒ์ผ ํ…€ํฌ๋„ŒํŠธ ๋‚ด์—์„œ CSS์— ๋Œ€ํ•œ ๋ชจ๋“  ์—‘์„ธ์Šค ๊ถŒํ•œ ์ œ๊ณต
- React๋ณด๋‹ค ์‰ฌ์šด ์ง„์ž…์žฅ๋ฒฝ
  • AngualarJS / Angular n
1. ๊ณตํ†ต์ 

- ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์‚ฌ์šฉ๊ฐ€๋Šฅ
- ๋ฌธ๋ฒ•์ด ๋งค์šฐ ์œ ์‚ฌ (Angular JS)
    
2. ์ฐจ์ด์ 

- ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ†ต์‹ 
- ๋น ๋ฅธ์„ฑ๋Šฅ
- Angular ๋ณด๋‹ค ์ ์€ ์šฉ๋Ÿ‰
- ์œ ์—ฐ์„ฑ (์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์กฐ์— ๋Œ€ํ•œ ์ œํ•œ์ด ์—†๋‹ค.)
- ์‰ฌ์šด ์ง„์ž…์žฅ๋ฒฝ

Google trend & Package

  • Google trend(์ง€๋‚œ 1๋…„ ~ ์ง€๊ธˆ)

google trend.PNG

  • NPM์— ๋“ฑ๋ก๋œ Package

react-npm.PNG

vue-npm.PNG

๊ตฌ์ธ์ •๋ณด

์ƒ๊ณ„ํ˜• ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๊ฐ€์žฅ ์ค‘์š”ํ•˜๋‹ค.

  • ๋กœ์ผ“ํŽ€์น˜

react-๋กœ์ผ“ํŽ€์น˜.PNG Vue-๋กœ์ผ“ํŽ€์น˜.PNG

  • ์žก์ฝ”๋ฆฌ์•„

react-์žก์ฝ”๋ฆฌ์•„.PNG Vue-์žก์ฝ”๋ฆฌ์•„.PNG


ยฉ 2019. All rights reserved.