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. 처리 플로우
- View에 요청이 들어오면 Command를 통해 ViewModel로 보낸다.
- ViewModel은 Model에 데이터를 요청한다. 그리고 Model은 데이터를 응답한다.
- 이를 받은 ViewModel은 필요한만큼 가공한다.
- 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/폰트 적용, 화면 디자인(컴포넌트 배치, 버튼 생성 등), 각종 속성 설정