Vue.js ! - WastepaperBasket/Vue.js GitHub Wiki

Vue.js

  Javascript Framework ์–ธ์–ด์ธ React, Angular, Vue.js ์ค‘ ํ•˜๋‚˜
  Vue.js๋Š” Evan You๊ฐ€ ๋งŒ๋“  ์–ธ์–ด์ด๋ฉฐ, React์™€ Angular์˜ ์žฅ์ ๋งŒ์„ ๋ชจ์•„ ๋งŒ๋“ค์—ˆ๋‹ค๊ณ  ํ•œ๋‹ค.

  React๋Š” Facebook, Angualr๋Š” Google์ด ์ง€์›ํ•˜๊ณ  ์žˆ์Œ.
  ๋ฐ˜๋ฉด Vue.js 1์ธ ๊ฐœ๋ฐœ์ž๋กœ ์‹œ์ž‘ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ์–ธ์–ด๋“ค์— ๋น„ํ•ด ๋ฐ€๋ฆด ๊ฒƒ์œผ๋กœ ์ƒ๊ฐํ–ˆ์œผ๋‚˜, 
  ์ƒ๊ฐ ๊ทธ ์ด์ƒ์œผ๋กœ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์ž˜ ๋˜๋ฉฐ, ์‚ฌ์šฉ์ž๋„ ๋งค์šฐ๋งŽ์Œ.

React Angular Vue ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์™œ์”€?

web-app(์ƒˆ๋กœ๊ณ ์นจ์—†์ด ๋ถ€๋“œ๋Ÿฝ๊ฒŒ)์„ ๋งŒ๋“ค๋•Œ ์‚ฌ์šฉ. ์ฆ‰ ํŽ˜์ด์ง€๊ฐ€ ์ƒˆ๋กœ๊ณ ์นจ๋˜์ง€ ์•Š๊ณ  ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ „ํ™˜๋˜๋Š” ์‚ฌ์ดํŠธ
  1. Easy ์‰ฌ์šฐ๋‹ˆ๊นŒ ์”€

    • Angular๋Š” ๋ฐฉ๋Œ€ํ•˜๊ณ  Typescript๋ฅผ ๊ฐ•์ œ๋กœ ์จ์•ผํ•˜๊ณ  / React๋Š” ๊ธฐ์กด JS๋ฌธ๋ฒ•์„ / Vue๋Š” Vue ๋ฌธ๋ฒ•์„
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ชปํ• ์ˆ˜๋ก Vue๊ฐ€ ์‰ฌ์›€
    • ๊ตฌ์กฐ ํŒŒ์•…์ด ์‰ฌ์›€. ๋งŽ์€ ๊ฒฝ์šฐ Vue๊ฐ€ ๋” ๊น”๋”
  2. Right-way

    • Vue๋Š” HTML์— v-for ๋ฐ•์•„๋‘ .
    • ์ฝ”๋”ฉ ์Šคํƒ€์ผ ๋งž์ถ”๋Š”๋ฐ์—๋„ ์‹œ๊ฐ„ โ†“
  3. ๋น ๋ฅด๋‹ค!

    • HTML ๋žœ๋”๋ง ์‹œ๊ฐ„์ด ๋น ๋ฅด๋‹ค
  4. ์ดˆ๋ณด์ผ์ˆ˜๋ก ์ข‹๋‹ค!

  5. ์žฅ๊ธฐ์ ์œผ๋กœ ์ง€์›์„ ํ•ด์คŒ!

    • ์—…๋ฐ์ดํŠธ ๊พธ์ค€์ด ๋จ

Vue.js ํŠน์ง•

  • Approachable (์ ‘๊ทผ์„ฑ์ด ์ข‹๊ณ )
  • Versatile (๊ฐ€๋ณ€์„ฑ์ด ์žˆ๊ณ  = ๋‹ค์žฌ๋‹ค๋Šฅํ•˜๋ฉฐ, ์—ฌ๊ธฐ์ €๊ธฐ ์ ์šฉํ•˜๊ธฐ ์ข‹๋‹ค๋Š” ๋œป)
  • Perfomant (์„ฑ๋Šฅ์ด ์ข‹์œผ๋ฉฐ)
  • Maintainable (์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์ข‹๊ณ )
  • Testable (ํ…Œ์ŠคํŠธ ๊ฐ€๋Šฅํ•˜๋‹ค)

๊ธฐ์ดˆ ์‚ฌ์ „์ง€์‹

  • HTML / CSS

  • ๋ณ€์ˆ˜ / ์ž๋ฃŒํ˜•

  • Array / Object ๋งŒ๋“ค๊ธฐ ๋ฐ์ดํ„ฐ ์ €์žฅ ์ถœ๋ ฅ

  • if else

  • function

  • for

    โ€ป ํ•ญ์ƒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๊ธฐ์ดˆ์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŽธํ•˜๊ฒŒ ํ•˜๋ ค๊ณ  ๋ฐฐ์šฐ๋Š”๊ฒŒ Vue React Angular 
    

โ€ป Vue๋งŒ๋“  ํ”„๋กœ์ ํŠธ ์—…๋กœ๋“œ ํ•ด๋ณด๊ธฐ? ์—…๋กœ๋“œ ํ•˜๋Š”๋ฐฉ๋ฒ•๋งํฌ