1. 개요

MVVM 패턴에 대한 정리이다.


2. MVVM이란?

MVVM은 Model - View - ViewModel의 약자이다.

흔히 말하는 MVC가 Model - View - Controller로 이뤄져있기 때문에 비교가 가능하다.

추가로 MVP라는 것도 있는데 Model - View - Presenter이다.


3. MVC와의 차이점

Model , View는 동일한데 Controller가 ViewModel로 바뀐것이라고 보면 됨. 그리고 이 ViewModel은 UI단에 위치한다.


4. 각각의 설명

  • View : 사용자의 눈에 보이는 인터페이스 (디자이너가 만듬)
  • Model : 데이터 처리, 즉 데이터베이스와 통신
  • ViewModel : View와는 Binding, Command로 연결하고, Model과는 데이터를 주고 받는 역할

5. 처리 플로우

  1. View에 요청이 들어오면 Command를 통해 ViewModel로 보낸다.
  2. ViewModel은 Model에 데이터를 요청한다. 그리고 Model은 데이터를 응답한다.
  3. 이를 받은 ViewModel은 필요한만큼 가공한다.
  4. View는 ViewModel과의 Data Binding을 통해 데이터를 자동으로 갱신한다.

6. 사례

6-1. Knockout.js

MVVM 계열이며, Binding에 특화되어 있다. 기능은 많지 않지만 배우고 사용하기 편리하다.

6.2. Vue.js

만들어진 UI 구성요소를 조합하여 페이지를 구성한다. React나 Angular에 비해 가볍고 복잡도가 낮아서 진입 장벽이 낮다.

  • Vue.js 기반 SPA 앱은 화면 이동 시 브라우저에서 페이지(컴포넌트)간 이동한다. 즉, 서버로 요청하는 것이 아니다.
  • Vue.js로 프로젝트할 때는 아키텍트, 개발자, 디자이너 간 역할 정리가 중요하다. (빠지는 부분이 없도록)

다음은 React와의 비교이다.

  • 가상 DOM 지원
  • 뷰에 집중하며 라우팅이나 상태 관리는 다른 라이브러리를 사용
  • 서버사이드 렌더링 지원 등

다음은 Vue.js 프로젝트 시 담당자간 역할이다.

  • UI 아키텍트 : Vue.js 프레임워크 아키텍처 설계, Webpack 빌드, npm 라이브러리 관리, 컴포넌트/이미지 로딩 관리, 각종 자바스크립트 유틸리티 개발/배포, 이슈 해결(SEO 등), 공통 정책(Style 사용 시 scoped 명시 등), 개발자 교육
  • UI 개발자 : 자바 스크립트 개발, API 호출, 데이터 바인드 등
  • 디자이너 : CSS/폰트 적용, 화면 디자인(컴포넌트 배치, 버튼 생성 등), 각종 속성 설정