Vue.js는 사용자 인터페이스를 만드는 프레임워크다. 공식 가이드

thymeleaf 같은 server side 템플릿 엔진과는 다르다.
현재 프로젝트에서 Spring boot로 백엔드를 만들고 있는데, Vue.js로 프론트를 만들기 위해 공부를 시작했다.
Vue.js는 html, css, javascript 의 전반적인 내용을 기반으로 한다.
잊어버렸다면, 짧게 복습하고나서 Vue.js를 시작하는 것이 좋겠다.

캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다.

매일 20분 야금야금 Vue.js 화이팅.

---

뷰의 특징인 ViewModel

아래 그림은 뷰의 특징인 ViewModel을 설명하기 위한 그림이다.

View -> Dom Listeners -> Model -> Data Bindings로의 흐름을 설명한다.

DOM Listener

DOM Listener는 화면 변화를 지켜보고 있다가 변화가 발생하면 Model에 반영한다.

Data Bindings

Data Bindings는 Model에 반영된 데이터를 화면에 동기화 시키는 작업이다.

요소 별로 살펴보자.

View

화면을 의미한다.
브라우저에서 사용자입력을 받는다. (이벤트가 발생했다고 부른다)
html 의 DOM 구조는 자바스크립트가 조작할 수 있는 구조다.

DOM Listeners

뷰에서 발생하는 이벤트를 청취해서 자바스크립트로 전달한다.
자바스크립트의 데이터를 바꿔주거나 특정 로직을 실행한다.

Model

자바스크립트 데이터를 의미한다.

Data Bindings

자바스크립트의 데이터가 변했을 때, 화면에(View에) 반영한다.

---

DOM이 뭐지?

Documnet Object Model을 의미한다.
문서객체모델.
HTML문서의 각 항목을 계층으로 표현해서 문서요소를 제어할 수 있도록 돕는 인터페이스다.
웹 표준을 만드는 W3C라는 컨소시엄이 있는데, W3C가 제정한 DOM표준에서 DOM 설명을 가져왔다.

html, css는 태그를 열고 닫는 방식으로 구성된 문서다.
태그의 구조가 있어서 이것을 기반으로 자바스크립트가 html, css를 인식할 수 있다.
규칙이 있으니까 접근하고 조작할 수 있다는 의미다.