Vue 소개

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

 

현재 프론트엔드 프레임워크 시장은 리액트(React), 앵귤러(Angular)가 많은 점유율을 가지고 있습니다

그만큼 오래된 프레임워크이기 때문입니다. 뷰는 이들 중 가장 가벼운 프레임워크라고 할 수 있습니다.

 

Vue는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리입니다.

 

 

위 그림에서 보듯이 MVVM패턴이란 화면을 모델 - 뷰 - 뷰 모델로 구조화하여 개발하는 방식을 의미합니다.

이런 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로

이해할 수 있고 추후에 유지보수가 편해지기 때문입니다.

 

MVVM 구조도의 용어 설명

 

- 뷰(View) = 사용자에게 보이는 화면

- 돔(DOM) = HTML문서에 들어가는 요소들의 정보를 담고 있는 데이터 트리

- 돔 리스너(DOM Listener) = 돔의 변경 내역에 대해 즉각적으로 빈응하여 특정로직을 수행하는 장치

- 모델(Model) = 데이터를 담는 용기. 보통 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장

- 데이터 바인딩(Data Binding) = 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화

- 뷰 모델(ViewModel) = 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역