01. Vue.js

1. Vue.js

  Vue.js는 웹 페이지 화면을 개발하기 위한 화면단 라이브러리이자 프레임워크이다.

 

2. Vue.js 장점

  1) 배우기가 쉽다.

  2) 리액트(react.js)와 앵귤러(angular.js)에 비해 성능이 우수하고 빠르다.

  3) 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징과 앵귤러의 데이터 바인딩 특성을 모두 가지고 있다.

 

3. Vue.js 특징

  1) MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리

 

MVVM Pattern

용어	설명
뷰(View)	사용자에게 보이는 화면
돔(DOM)	HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너(DOM Listener)	돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
모델(Model)	데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩(Data Binding)	뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델(ViewModel)	뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

  2) 컴포넌트 기반 프레임워크

  3) 앵귤러의 양방향 데이터 바인딩(Two-way Data Binding)과 리액트의 단방향 데이터 흐름(One-way Data Flow)의 장점을 모두 결합한 프레임워크

    > 양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것

    > 단방향 데이터 흐름 : 컴포넌트의 단방향 통신을 의미 (컴포넌트 간 데이터 전달 시 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 것)

  4) 빠른 화면 렌더링(Rendering)을 위해 리액트의 가상 돔(Virtual DOM) 렌더링 방식 적용

    > 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신