vue.js

웹페이지 화면 개발을 위해 사용하는 프레임워크

vue의 특징

  • 리액트와 앵귤러에 비해 성능 우수
  • 가볍고 빠르다
  • MVVM 패턴의 화면
    • View(DOM) - ViewModel(vue.js) - Model(JS Object)
  • 컴포넌트 기반 프레임워크

스크린샷 2019-06-05 오후 4 32 18

MVVM

View

사용자가 보는 화면

DOM

HTML의 요소 태그들의 정보 데이터

Model

데이터를 옮기는 수단, 객체형태

Data binding

화면에 처리될 데이터와 모델의 객체 데이터의 동기화 작업

View Model

View와 Model의 중간 매개체로 DOM리스너와 데이터 바인딩 처리 역할

MVVM 처리과정

  1. 브라우저에 실행된 웹사이트를 구성하는 화면의 모든 요소는 DOM
  2. 특정 동작시 DOM 리스너가 감지
  3. View Model 영역이 데이터 바인딩처리
  4. 모델영역에 데이터 처리 로직
  5. 처리된 데이터를 화면에 노출

프론트(front)와 백(back)의 로직 분리로 인해 더욱 효율적인 코드 구성 및 성능을 얻기 위함

컴포넌트 기반

스크린샷 2019-06-05 오후 4 32 46

화면의 각 영역을 컴포넌트로 구분하는 프레임워크로 이는 코드의 재사용이 용이하고 화면의 코드 구조를 직관적으로 파악할 수 있는 특징을 가지고 있습니다.

Reference