* 해당 내용은 Do it! Vue.js 입문 을 참고해서 작성했습니다.
1. MVVM 정의
MVVM은 UI 화면 개발 방법 패턴 중 하나이다. MVC와 전혀 다른 개념이지만 공통 관심사(Concern)을 분리한 것과 비슷한 맥락이다.
위 그림 처럼 왼쪽부터 모델(Model) - View(View Model) - 모델(Model)로 구조화해서 개발하는 방식이다.
- 뷰(View) : 사용자에게 보이는 화면
- 돔(DOM) : HTML 문서에 들어가는 요소(tag, class, attribute, ...)의 정보를 담고 있다.
- 돔 리스너(Dom Listener) : 돔의 변경 내역에 대해 즉각적 반응하여 로직을 수행 한다.
- 모델(Model) :데이터를 담는 용기로 서버에서 가져온 데이터를 순수 자바스립트 객체 형태로 저장한다.
- 데이터 바인딩(Data Binding) : 뷰(View)에 표시되는 내용과 모델의 데이터 동기화
- 뷰 모델(ViewModel) : 뷰 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역
뷰, 모델, 뷰 모델만 굵직하게 있지만 여기 있는거 모두 Vue.js를 사용하는데 중요한 개념이다.
더 자세한 내용은 뷰 공식 사이트에 https://012.vuejs.org/guide/ 에 들어가면 볼 수 있다.
2. 구글 페이지로 보는 MVVM
구글 페이지가 있다. 구글 페이지 전체가 뷰(View) 이다. 그리고 Google로고, 검색 창, 돋보기 아이콘 등 HTML에서 작성할 수 있을법한 요소는 돔(DOM)이다.
'vue.js'를 검색했을 때 돔 리스너(DOM Listener)에서 버튼의 클릭을 감지한다. 그러면 검색 결과를 DB에서 찾아서 뿌려주는 로직이 처리는데 이 과정에서 데이터 바인딩(Data Binding)이 관여하고 실제 결과 데이터는 모델(Mode)에 가져와 화면, 뷰(View)에 뿌려준다.
뷰(View)는 화면의 데이터를 갱신하여 보여주는 역할로 화면 표현에 주로 관여하는 라이브러리(?)이기 때문에 화면단 라이브러리라고도 한다.
위키 백과에서 MVVM을 '마크업 언어 또는 GUI 코드로 구현하는 View의 개발을 비즈니스 로직 또는 백엔드 로직(모델)로부터 분리해 개발하는 디자인 패턴'라고 정의되어 있다고 한다.
* 출처 : https://ko.wikipedia.org/wiki/모델-뷰-뷰모델
3. MVVM 정리
HTML, CSS 코드와 데이터베이스에서 데이터를 가져와 처리하는 Java 코드를 한 파일에서 분리해서 사용하는 방법론이다. 그 중 하나가 MVVM 패턴이다.
[결론] : Vue는 MVVM 패턴으로 되어 있고, 유명한 리액트도 당연히 MVVM 패턴이다. 모르면 외워
