MVVM, MVC 패턴

MVVM

---

MVVM이란 Model-View-ViewModel 패턴의 약자.

1. Model (비즈니스 규칙, 데이터 접근, 모델 클래스) : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분

2. View (사용자 인터페이스) : 사용자에서 보여지는 UI 부분

3. ViewModel (모델과 뷰 사이의 인터페이스)

Backend 로직과 Client 의 마크업 & 데이터 표현단을 분리하기 위한 구조로 전통적인 MVC 패턴의 방식에서 기인하였다. 

뷰는 뷰모델의 프로퍼티에 제어값을 바인딩하며 차례대로 모델 객체에 있는 데이터를 노출시킨

뷰모델은 모델의 데이터를 뷰에 바인딩하고, 명령어를 사용하여 모든 UI의 동작들을 다룬다.

# 순서

1.사용자의 Action들은 View를 통해 들어온다.

2. View에 Action이 들어오면, Command 패턴으로 View Model에 Action을 전달한다.

3. View Model은 Model에게 데이터를 요청한다.

4. Model은 View Model에게 요청받은 데이터를 응답한다.

5. View Model은 응답 받은 데이터를 가공하여 저장한다.

6. View는 View Model과 Data Binding하여 화면을 나타낸다.

# 장점

 View와 Model 사이의 의존성이 없다.

또한 Command 패턴과 Data Binding을 사용하여 View와 View Model 사이의 의존성 또한 없앤 디자인패턴.
각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있다.

# 단점

View Model의 설계가 쉽지 않다

MVVM in Vue.js

---

Vue.js는 위의 설명된 MVVM 패턴에서 ViewModel 계층에 초점을 둔 프레임워크.

뷰모델에 자바스크립트 객체와 돔을 연결해 주면 뷰모델은 이 둘간의 동기화를 자동으로 처리한다. 

즉,뷰모델을 통해서 양방향 데이터 바인딩이 가능하게 해주며, 뷰 계층을 좀 더 간단하고 유연하게 디자인하게 해준다.

Vue.js는 데이터 바인딩 과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API 를 지원한다.

# ViewModel

ViewModel은 모델과 뷰의 동기화 역할을 하는 객체이다.

Vue.js에서 모든 뷰 인스턴스(View instance)는 뷰모델(ViewModel)이다.

초기 객체를 선언해줌으로써 뷰와 모델 사이에서 양방향 데이터 바인딩이 가능하다.

var vm = new Vue({ })

# View

뷰는 Vue instance가 생성 될 때 컴파일 되며 뷰모델의 다양한 동작 기능들이 바인딩 된다. 그렇게 됨으로써 뷰의 변경이 감지되면 뷰모델이 이를 감지하여 반응

  vm.$el // The View

# Model

Vue.js에서 모델은 단순히 자바스크립트 객체 혹은 데이터 객체로 표현할 수 있다. 데이터 객체의 프로퍼티를 조작하면 이를 관찰하는 뷰 인스턴스가 변경을 알린다.

각 뷰 인스턴스는 데이터 객체에 있는 모든 프로퍼티들을 프록시한다.

  vm.$data // The Model

MVC

---

Model - View - Controller 패턴의 약자

1. Model (비즈니스 규칙, 데이터 접근, 모델 클래스) : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분

2. View (사용자 인터페이스) : 사용자에서 보여지는 UI 부분

3. Controller : 사용자의 입력(Action)을 받고 처리하는 부분

아키텍처의 최상위에 뷰가 있고 그아래 컨트롤러가 있고 그 아래 모델이 있다. 때문에 뷰는 컨트롤러만 알고 있고 컨트롤러는 모델을 알고 있다. 모델이 변경되었을 때 뷰는 컨트롤러를 통해서 통보를 받는다.

# 순서

1. 사용자의 Action들은 Controller에 들어온다.

2. Controller는 사용자의 Action를 확인하고, Model을 업데이트한다.

3. Controller는 Model을 나타내줄 View를 선택한다.

4. View는 Model을 이용하여 화면을 나타낸다.

# 장점

가장 단순하다. 그래서 보편적.

# 단점

View와 Model 사이의 의존성이 높다.어플리케이션이 커질 수록 복잡하지고 유지보수가 어렵게 만들 수 있다.