Vue.js - Vue.js란?

들어가면서

앞서 리액트의 기본적인 내용을 정리하고 바로 Vue.js에 대해 정리하는 이유는 두개의 기본적인 내용을 살펴보고 차이점을 보면서 이해를 더 높이기 위함에 있다.

리액트와 Vue.js에 대한 이해가 높아짐에 따라 더 깊은 내용을 꾸준히 공부하고 정리할 생각이다.

Vue.js

Vue.js는 웹 페이지 화면을 개발하기 위한 javascript 프레임워크이다.

여기부터 리액트와의 차이가 보인다. 리액트는 라이브러리이고 Vue는 프레임워크이다. 두가지의 차이를 간단하게 설명하면 제어 흐름에 대한 주도성이다. 프레임워크는 전체적인 흐름을 스스로 쥐고 있으며 사용자가 그 안에서 필요한 코드를 짜 넣고 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것이다. 쉽게 말해 프레임워크는 틀 라이브러리는 도구인 것이다.

Vue.js의 장점

1. 배우기 쉽다
2. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
3. 리액트의 가상돔, 앵귤러의 데이터 바인딩을 가지고 있다.

Vue.js의 특징

1. MVVM 패턴

MVVM 패턴은 화면을 모델-뷰-뷰모델로 구조화하여 개발하는 방식이다. 프론트엔드의 화면동작과 관련된 로직과 백엔드의 데이터베이스 처리로직을 분리하여 깔끔하게 코드를 구성하는 소프트웨어 디자인패턴이다.

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

2. 가상 돔

리액트와 마찬가지로 가상 돔을 사용한다.

.. 임시저장