[Vue.js] vue.js 가 무엇인가?

 

[Vue란?]

 

• 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크
• 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크
• 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원
• 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공

 

[Vue의 장점]

 

• 배우기 쉽다
• 리액트와 앵귤러에 비해 성능이 우수하고 빠르다
• 리액트의 장점과 앵귤러의 장점을 가지고 있다.
• 앵귤러의 데이터 바인딩 특성과 리액트의 가상돔 기반 렌더링 특징을 모두 가지고 있음

 

[Vue의 특징]

MVVM 패턴

화면을 모델 - 뷰 - 뷰 모델로 구조화 하여 개발하는 방식

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

 

 

앵귤러의 양방향 데이터 바인딩 + 리액트의 단방향 데이터 흐름의 장점 결합

양방향 데이터 바인딩?

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

 

가상돔 렌더링 방식

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