MVVM 패턴
마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴으로, 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식이다.
MVVM 패턴을 사용해 개발하면 화면의 요소들을 제어하는 코드(프런트엔드 영역)와 데이터 제어 로직(백엔드 영역)을 분리하여 코드를 직관적으로 이해하기 쉬워진다. 유지 보수 또한 비교적 편해지는 편이다.
Vue.js를 예시로 들어 보자면 MVVM 구조가 아래와 같이 이루어져 있다.
만약 HTML 문서가 변경이 된다면 DOM의 구성 요소도 변경될 것이다.
View에서 DOM의 구성 요소가 변경되면(예를 들어 사용자가 다른 페이지로 이동하는 버튼을 클릭하여 화면에 보이는 내용이 달라지는 경우) 이를 ViewModel에서 캐치하여 이를 Model로 전달하고, Model에서는 변경되는 내용에 대한 데이터를 ViewModel을 통해 View에 전달한다.
DOM의 구조가 변경되어 일어나는 View -> ViewModel -> Model 과정에서 DOM Listener가 수행되고,
DOM Listener가 발생한 뒤 일어나는 과정인 Model -> ViewModel -> View에서 Data Binding이 수행된다.
DOM Listener는 DOM이 변경되면 즉각적으로 관련된 로직을 수행하고, Data Binding에 의해 View에 나타나야 할 데이터를 동기화하기 때문에 우리가 보는 웹사이트가 바로바로 화면이 바뀌고, 응답하고 하는 것이다.
ViewModel에서 DOM Listener와 Data Binding을 제공하는데, Vue.js 프레임워크가 ViewModel이다.
Vue.js를 이번에 처음 공부하게 되면서 MVVM 패턴을 알게 되었는데, 이미 화면 구현에 있어서는 대중적인 개발 패턴이라고 한다.
그리고 프론트엔드라고 쓴 뒤 맞춤법 검사를 누르면 프런트엔드로 고쳐주는 것도 처음 알았다.. 왜?
사담으로 이전에 가장 대중적인 프런트엔드 프레임워크는 앵귤러와 리액트였는데 뷰는 이 두 가지 프레임워크의 장점을 합쳐서 만든 프레임워크이다. 다른 프레임워크에 비해 배우는 것도 쉬운 편이라고 해서(물론 깊게 들어가면 똑같겠지만), 첫 프레임워크가 리액트가 아닌 뷰임에 감사함을 느낀😥
참조 : Do it! Vue.js 입문
