개요
Vuex에 대해서 공부하던 중 디자인 패턴에 대해서 다시한번 제대로 정립이 필요할 것 같아 포스팅을 진행하려고 한다.
vuex 와 Redux 모두 시작은 flux 패턴 이 근본이 되기 때문이다.
디자인 패턴은 굉장히 많지만 이번 포스팅에는 MVC, MVVM에 대한 개념 및 비교를 포스팅 할 예정이다.
MVC(Model-View-Controller)
웹 개발을 접하면서 가장 많이 들었고 우리가 익숙한것이 바로 MVC 패턴일 것이다.
MVC는 하나의 어플리케이션을 구성할때 그 역할을 3가지(Model, View, Controller)로 나누게 된다.
Model: 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 역할을 한다.View: 사용자에서 보여지는 UI 를 의미한다.Controller: 사용자의 입력(Action)을 받고 처리하는 역할을 한다.
먼저 MVC가 동작하는 과정은 아래와 같다.
- 사용자가 특정
URL을 호출하면Action이 일어난다. Controller는Action을 확인하며Model을 업데이트 한다.Controller는Model을 나타내줄View를 선택한다.View는Model을 이용하여 화면을 나타낸다.
2-1. Model
Data를 가진 객체를 Model이라고 한다. Data는 내부의 상태에 대한 정보를 가질 수도 있고, 모델을 표현하는 이름 속성으로 가질 수 있습니다.
Model의 상태에 변화가 있을 때 Controller와 View에 이를 통보한다.
이와 같은 통보를 통해 View는 최신의 결과를 보여줄 수 있고, 컨트롤러는 모델의 변화에 따른 적용 가능한 명령을 추가, 제거, 수정할 수 있다.
또한, Model은 아래와 같은 규칙을 갖는다.
- 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야만 한다.
View나Controller에 대해서 어떠한 정보도 알지 말아야 한다.- 변경이 일어나면, 변경 통지에 대한 처리방법을 구현해야 한다.
2-2. View
View는 화면을 의미하며 사용자가 볼 결과물을 생성하기 위해 Model로부터 정보를 얻어옵니다.
View는 아래와 같은 규칙을 갖는다.
Model이 가지고 있는 정보를 따로 저장해서는 안됨Model이나Controller와 같이 다른 구성 요소를 알지 못해야 한다.- 변경이 일어나면, 변경 통지에 대한 처리방법을 구현해야 한다.
2-3. Controller
사용자가 접근한 URL에 따라 사용자의 요청사항을 파악한 후에 그 요청에 맞는 데이터를 Model을 의뢰하고, 데이터를 View에 반영해서 사용자에게 알려줍니다.
Controller는 여러개의 View를 선택할 수 있는 1:n 구조 이다.
또한, Controller가 View를 직접 업데이트하지 않고 선택만 한다.
Controller는 아래와 같은 규칙을 갖는다.
Model과View에 대한 정보를 알고 있어야 한다.Model이나View의 변경을 모니터링해야 함
2-4. MVC 패턴의 장점과 단점
장점
단순하고 직관적이다.기능 별로 분리가 되어있기 때문에 하나의 파일에 코드가 모이는 것을 방지하여가독성및코드 재사용이 증가한다.
단점
View와Model사이의 의존성이 높다.View와Model의 의존성이 높기 때문에어플리케이션이 커지고 규모가 커지면 점차 복잡해지고, 유지보수가 어려워 진다.
MVVM(Model-View-ViewModel)
MVVM 패턴은 Vue를 통해서 이해한 내용을 기록한다.
MVVM 패턴은 View가 특정 모델에 종속되지 않도록 Model(로직)을 분리한 패턴입니다.
간단히 View와 Model, View-Model을 분리하여 독립적인 개발을 할 수 있도록하여, 테스트, 유지 보수, 재사용성을 높인 패턴입니다.
MVVM을 구성하는 3가지의 역할은 아래와 같다.
Model: 사용되는 데이터를 다루는 역할을 하며비즈니스로직을 포함한다.View: 어플리케이션에서 클라이언트가 보는 화면을 말한다.UI를 다루는 역할을 하며, 비즈니스로직이 아닌UI로직(애니메이션)을 포함한다.View-Model:View만을 위한Model로View가 사용하는메서드,필드를 갖고View에상태 변화등을 알리며,View가 사용할 수 있도록 데이터를Binding한다.
Vue.js는 MVVM패턴에서 ViewModel 계층에 초점을 둔 프레임워크이다.
Vue는 ViewModel을 통해서 양방향 데이터 바인딩이 가능하게 해준다.
3-1. View-Model
Model과 View를 동기화 해주는 중간 역할을 한다.
Vue에서 모든 Instance는 View Model이며, 생성자나 하위 클레스들에 의해 인스턴스화 된다.
3-2. View
Vue.js는 DOM 기반의 템플릿을 사용한다.
각 뷰 인스턴스는 해당 DOM 요소에 연관된다.
Vue Instance가 생성되면 필요한 데이터 바인딩을 설정하는 동안 DOM 의 루트 요소의 모든 자식 노드를 반복적으로 탐색한다.
View가 컴파일이 되면 데이터 변경에 반응할 수 있게 된다.
즉, 해당 HTML 컴포넌트 범위(해당 DOM 요소가 담긴 템플릿)를 Vue instace의 vm.$el에 설정한다.
View는 Vue instance가 생성 될 때 컴파일 되며 뷰모델의 다양한 동작 기능들이 바인딩 된다.
그렇게 됨으로써 View의 변경이 감지되면 View-Model이 이를 감지하여 반응할 수 있게된다.
3-3. Model
Vue.js에서 모델은 단순히 자바스크립트 객체 혹은 데이터 객체로 표현할 수 있다.
데이터 객체의 프로퍼티를 조작하면 이를 관찰하는 뷰 인스턴스가 변경을 알린다.
정리
결과적으로 기존 MVC에서 최근 모던 웹프레임워크에서의 방법론은 프론트엔드 기준 MVVM의 형태를 많이 사용하고 있다는 것을 느낀다.
하지만, 최근들어서 React가 많은 서비스에서의 Admin 언어로 급부상하면서 이 또한 변화하고 있는 것 같다.
React, Vue 모두 중요한 데이터를 Global 로 관리하게 되며, MVC 에서 가지고 있던 시스템이 커지면서 발생했던 Model과 View 간의 의존성을 줄이고자 Flux 패턴과 같이 단방향 프로세스를 갖는 Redux, Vuex 등의 상태관리에 필요한 기술들을 적용하고 있다.