[Angular.js] MVVM 패턴

개요: 플러터를 사용하는 개발 준비생이 mvvm 패턴으로 프로젝트 디자인을 한다는데, mvvm 패턴을 인지하고 angular.js 를 이용한 적이 없없어서 이번기회에 한번 공부함

---

우선 플러터를 이용해서 프로젝트를 진행중인 개발 준비생 친구에겐, mvvm 패턴을 추천하지 않고 mvc패턴에 대해서 추천했다. 왜냐면 가장 클래식한 디자인 패턴이기도 하고, mvvm은 데이터 바인딩이 중요한데, 플러터에는 양방향 바인딩 처리가 안되기 때문이다.

 

우선

 

mvvm 패턴이란

• 모델, 뷰, 뷰모델 세가지 구성 요소로 나누어 설계가 되는 패턴
• mvc 패턴과 유사하지만, controller 대신 viewmodel이라는 새로운 개념이 도입되었다.

 

model이란

• 데이터와 데이터를 처리하는 부분

view란

• 사용자에게 보여지는 부분 (html)

viewModel이란

• view를 표현하기 위해 만들어진 view만을 위한 model이다.
• viewModel 의 특징은 데이터 바인딩과 캡슐화된 패턴을 이용하여 view와 model간의 결합도를 없애고 그 사이 중간 관리자의 역할을 수행한다.

 

 

프론트엔드 디자인 패턴

Angular, Vue 와 같은 프레임워크들은 사실 mvvm, mvc 패턴이 중요하지 않다. (이미 프레임워크 제작자가 생각해 둔 패턴대로 구상이 가능하기 때문)

 

그중 Angular. (Angular 는 mvw 디자인 패턴이라고 한다. W는 whatever ㅋㅋㅋ)

 

굳이 따지자면 mvvm에 가깝고, 만드는 사람 역량이지만, 양방향 바인딩도 되고, 컴포넌트를 제작시에 컴포넌트.html, 컴포넌트.ts파일이 함께 생성됨과 동시에, 의존성 주입, directive, service 와 같이 많은 기능들이 하나의 html(view)를 위해 기능을 도와주니,
view: viewModel = 1: N 관계를 띄는 mvvm 모델과 비슷하다고 생각 (물론 mvc패턴에 비슷하게 제작도 가능하지만, 이 많은 기능을 썩히고 싶진 않음)

 

결론: (jsp, spring, django)등의 프레임워크는 백엔드 기능과 함께 뷰도 만들 수 있으니 어떠한 디자인 패턴을 이용하냐에 따라 능률이 천차만별로 변하겠지만, 프론트엔드 프레임워크는 이미 많은 기능이 내포되어 있으므로 굳이 패턴 생각 안하고 제작하면 됨 (생각)