• Vue 소개
  - 다른 프레임워크와 비교 시 장단점

  • 기초 문법
  • 컴파일 방법, 타입스크립트와 호환성등

• 구조
  - 어떤 기능 사용하고 있는지 ex. filter: formatFullTime, router

  • 기존 구조 (간단히 설명 : handlebar, jquery) 과 비교
  • 구조 (vue, script, css) + partials
  • 통신 : 요청 (받아서 사용하는 방법)
  • 통신 : 응답 (백엔드는 어떻게 되어있는지)

장단점

Vue vs React

공통점

• utilize a virtual DOM
• provide reactive and composable view components
• maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries
  -runtime performance: 비슷하게 둘 다 빠름

React > Vue

• richness of their ecosystem
• abundance of their custom renderers

Vue > React

1) re-render
(1) react

• component state 변경할 때마다 re-render
  -> 방지 방법
  : PureComponent / shouldComponentUpdate 중에 하나
  : You may also need to use immutable data structures to make your state changes more optimization-friendly.

• entire component sub-tree (starting at that component as root)

  However, in certain cases you may not be able to rely on such optimizations because PureComponent/shouldComponentUpdate assumes the entire sub tree’s render output is determined by the props of the current component.
  If that is not the case, then such optimizations may lead to inconsistent DOM state.

(2)Vue

• a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render when state changes.

• Each component can be considered to have shouldComponentUpdate automatically implemented for you, without the nested component caveats.

• Overall this removes the need for a whole class of performance optimizations from the developer’s plate, and allows them to focus more on building the app itself as it scales.