[Vue.js] Vue는 MVVM 패턴과 관련이 없지만

특히나 요즘엔, 이상하리만큼 알고있던 지식들의 뿌리를 뒤흔드는 일이 종종 생기는 것 같다.

가령 예를들어 일전에 썼던 [CSS] opacity는 reflow가 발생 안 한다구요...? 포스팅과 같은 일 말이다.

이번 포스팅도 그와 비슷한 맥락에서 출발한다.

 

Vue는 MVVM 패턴과 관련이 없다, 라는 명제에 대한 증명을 위해서.

0. 이 명제의 출발점

시작은 언제나 사소하다. 

Vue.js 공식 Doc에 나와있는 한 문장으로부터 출발한다.

Vue.js와 MVVM패턴은 관련이 없고, 그저 부분적으로 영감을 받았을 뿐, 이라는 이 문장.

오피셜 사이트에 그렇다는데...뭐, 더 할 말이 있겠는가.

 

1. 그렇다면 왜 나는 Vue.js가 MVVM이라고 생각해왔는가.

자, 그럼 나는 왜 Vue.js는 MVVM 패턴이라고 생각해왔던 걸까?

 

2017년에 Vue.js 입문당시 봤던 책에 분명...

이 포스팅을 작성하며 내 기억에 오류가 있는지를 확인하고자 2017년경, 내가 Vue.js에 입문하며 몇번이고 되짚어봤던 책을 다시 꺼내보게 되었다. 하지만 책에는 분명히 저렇게 정의되어있었다(심지어 형광펜으로 밑줄까지 쫙, 그어놨었다)

 

Vue.js는 전형적인 MVVM 패턴을 따르고 있습니다, 라고.

 

심지어 오른쪽 페이지엔 MVVM 패턴 그림까지 넣어서말이다.

그리고 그간 프로젝트를 뛰며 Vue.js관련 사내교육까지 진행했던 나였기에, 교육을 준비하는 과정에서도 필요시 자료를 리서치했었고 그때마다 대부분의 글들은 아래와 같이 Vue.js는 MVVM을 따르고 있다고 말을 하고 있다.

 

실제로 구글링을 해보면 대부분의 사람들이 Vue.js는 MVVM 패턴이라고 정의하고 있다.

트루먼쇼처럼 누가 나만 속이는 몰래카메라라도 찍고있는걸까.

 

2. MVVM은 대체 무엇인가.

MVVM은 Model-View-ViewModel 로 이어지는 SW 아키텍쳐 패턴이다.

 

이미지 출처 : MVVM 패턴, 위키피디아

위와 같은 형태로 우리가 흔히 화면에 보이는 영역을 담당하는 View와

그 View에서 사용할 데이터를 지지고 볶고 Model과 View 사이를 잇는 ViewModel.

그리고 데이터에 대한 비즈니스 로직과 관리를 담당하는 Model.

 

이렇게 3파트로 나뉘는 이 디자인 패턴은, 어플리케이션에서 활용될 데이터 및 그 데이터를 통해 비즈니스 로직을 실행하는 Model 영역과 흔히 표현(Presentation)을 위해 개발되는 화면의 영역(View, View Model)을 분리함으로써 서로간에 가지고있는 의존성을 줄이는 것을 목표로 설계된 패턴이다. 또한 Presentation 영역에서도 View와 View Model을 한 번 더 분리하였다. View는 우리가 흔히아는 HTML/CSS 영역이라고 보면되고, View Model은 View가 실질적으로 동작하는 논리 및 데이터의 흐름을 담당함으로써, Model과 View를 잇는 역할까지 담당한다. 이를 통해 View는 굳이 Model이 어떤 존재인지 어떤 데이터를 담당하는지 알 필요가 없기에 의존성을 떨쳐낼 수 있고 Model은 View Model에게 데이터의 변경을 알림으로써 View에 반영될 수 있게 데이터 중심으로 로직들이 흘러가게 된다.

 

즉, View는 직접적으로 데이터를 가지고있는 것이 아니며

Model도 직접적으로 데이터를 View에게 전해주지 않는다.

그렇기에 둘은 서로를 모르며 독립적일 수 있는 것이다.

 

그저, 그 사이에 있는 View Model이 중재자 역할을 하는 것이다.

 

3. Vue는 MVVM과 관련이 없지만, 이라는 명제는 거짓이다.

공홈에 버젓이 쓰여있는데도 불구하고, 이 명제는 왜 거짓인가.

이 명제의 거짓을 증명할 단서는 바로, 아래 그림이다.

Vue와 MVVM을 함께 검색해보면, 상당히 많은 사이트에서 본 그림을 활용하고 있는데 이 그림의 출처를 찾아봤더니 좀 오래된 Vue.js 사이트였다. 해당 사이트에 접속해보면, 오른쪽 하단에 이런 툴팁이 나온다. 

This is the documentation for an older version of Vue. If you’re looking for the current documentation click here.

 

그리고 해당 멘트 끝의 click here을 누르면, 현재 최신화되어있는 Vue.js 공식 Doc가 나온다.

 

자, 다시 돌아와서...저 오래된 Vue.js 사이트는 Vue.js 초기에 생성됐던 공식 가이드문서이며, 최신화된 문서에선 볼 수 없는 Vue.js와 MVVM의 상관관계에 대해서 아주 상세하게 설명해주고 있다. 우리가 보통 Vue.js를 활용하고자 할 때는 아래코드와 같이 Javascript를 바탕으로 new Vue 키워드를 통해 Vue 인스턴스를 생성해준다(Vue 3.x 의 경우 createApp이라는 내장함수를 사용한다)

// Vue 2.x
import Vue from 'vue';
import App from 'App.vue';

var vm = new Vue({
  el: '#app',
  components: {App},
  template: '<App/>'
})

3-1. View Model

이때 new Vue를 통해 생성되는 Vue 인스턴스가 위 그림에서 중앙에 놓인 View Model 역할을 하게된다. 이는 앞선 MVVM 패턴의 설명에서 언급했듯이 Model과 View를 동기화(sync)해주는 개체이다

3-2. View

View는 실제 화면에 렌더링되는 DOM을 뜻한다.

vm.$el

그리고 Vue는 생성된 인스턴스에 $el 이라는 내부 프로퍼티를 통해, View 역할을 하는 DOM을 관리(manage)하게된다. 이때 View Model 역할을 하는 Vue 인스턴스 내부에는, 활용하는 데이터들에 대해 observe 기능이 걸려있고 이로인해 데이터의 변경시 notify 로직이 발동되며, 해당 로직을 바탕으로 그 데이터를 사용중인 View영역의 DOM이 업데이트되게 되어있다. 

3-3. Model

Model은 아주 평범한 보통의, Javascript 객체다.

vm.$data

코드로 설명하자면, 아래와 같이 Vue 파일내에서 data 영역에 정의되는 것들이라고 생각하면된다.

<script>
export default {
    data(){
        return {
            title : 'Grey',
            team : 'A'
        }
    }
}
</script>

위와 같이 심플한 JSON 형태를 띄는 Javascript 객체가 Vue의 Model 이다.

해당 데이터들은 선언과 동시에 observe 기능이 활성화되는데, 이는 실제 내부적으로는 ES5의 getter/setter를 통해 데이터의 변조 및 접근시 별도 로직이 구현되어있기 때문이다. 즉, 데이터가 변경되면, notify 기능을 통해 해당 데이터를 사용하는 View(DOM)을 찾게되고 변경된 데이터를 반영하게 되는 것이다.

데이터(Model)에 대한 getter/setter 흐름도

위 그림에서, 우측의 거대 녹색 원형은 하나의 Javascript 객체(Model)이고 좌측 하단의 회색 사각형은 DOM(View) 이다. 녹색의 원은 a라는 이름을 가진 객체고 b는 a의 프로퍼티로써 getter/setter를 통해 observe가 구현된 데이터다(물론, a자체도 getter/setter를 가지고 있지만, 위 그림은 b에 대한 getter/setter를 중심으로 표현되어 있다)

 

위 흐름에서 보라색의 b라는 원 내부에 setter로부터 흘러나온 Notify 라는 빨간 화살표를 주목해보자. b라는 데이터가 변경되면, 당연하게도 값을 set해주는 setter가 호출될 것이고, 값을 변경하는 setter가 호출되었기 때문에 해당 데이터를 활용중인 DOM(View)에게도 이 소식을 알려주기 위해 Notify 기능이 호출된 것이다. 그렇게 호출된 Notify의 흐름을 통해 b라는 데이터를 사용중인 Directive v-text를 찾았고 이 값이 변경되면서 실제 DOM이 보여주고있던(Presentation) 화면의 값도 변경되게 된다.

 

4. 그럼 왜 공식 홈페이지에는 MVVM 패턴과 관련이 없다는건가.

사실 이 포스팅은, Vue.js가 MVVM 패턴과 관련이 없다, 라는 명제가 참이라는 것을 증명하기 위해 출발했다. 그동안 나를 비롯한 많은 사람들이 잘 못 알고있었구나, 라는 걸 깨닫고 싶었고...우리가 잘 못 알고있는 거라면 바로잡을 필요가 있으니까.

 

하지만 찾아보면 찾아볼수록, Vue.js는 MVVM 패턴이라는 확신이 들었다.

특히나 지금은 활용치 않는 예전에 쓰인 공식 가이드에는, 대놓고 MVVM 그림에 Vue를 대입시켜 놓을 정도로 상세하게 언급되어있었으니까. 

 

그래서 대체 이게 뭘까, 싶다가...설마하는 생각에 해당 문구의 영문을 보았다.

Although not strictly associated with the MVVM pattern, Vue’s design was partly inspired by it

 

수능 외국어 영역 5등급인 내가 해당 영문을 번역 해보자면,

(수능때 늘 하던 직역)
비록, 긴밀하게 연관되어 있진않다, MVVM 패턴과는. Vue의 디자인은, 부분적으로 영감을 받았다, 그것에 의해.

(자연스럽게 표현해보는 의역)
MVVM 패턴과 완벽하게 일치하는 것은 아니지만, Vue는 MVVM 패턴으로부터 기인하여 설계되었습니다.  

 

...직접 번역해보니 어딘가 싸한 느낌이 든다.

나보다 똑똑한 파파고와 구글은 이렇게 번역해준다.

파파고 : MVVM 패턴과 엄격하게 연관되어 있지는 않지만, Vue의 디자인은 부분적으로 그것의 영감을 받았다.
구글 : MVVM 패턴과 엄격하게 연관되어 있지는 않지만 Vue의 디자인은 부분적으로 영감을 받았습니다.

'엄격히'라는 형용사의 위치선정이 다르다.

그리고 그 위치선정에 따른 문장의 의미도 전혀 다르다.

 

엄격히 MVVM 패턴과 관련이 없지만 이라는 말과

MVVM 패턴과 엄격하게 연관되어 있지는 않지만 이라는 말은,

의미가 다르잖아!!!!!! 

 

혹시나 싶어서 중국어도 번역을 해봤다(Vue.js의 창시자, Evan You는 중국인이니까)

원문 : 虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。
파파고 : 뮤직비디오 VM 모델을 그대로 따르진 않았지만, Vue의 디자인도 힌트를 줬다.
구글 : MVVM 모델을 완전히 따르지는 않지만 Vue의 디자인도 MVVM 모델에서 영감을 받았습니다.

 

...그렇다.

엄격히 Vue는 MVVM패턴과 관련이 없지만, 이라는 문장은 잘 못 번역된 것이었다.

Vue가 MVVM 패턴과 관련이 1도 없다는 게 아니라, 100% 일치하는 것은 아니라는 의미다.

(파파고가 MVVM을 '뮤직비디오 VM'이라고 번역한 건 그냥 그러려니 하자)

 

5. 결론

Vue.js는 MVVM 패턴을 활용하는 것이 맞다.

번역이 아주 조금...형용사의 위치가 문제였을 뿐이다ㅠㅠ

 

없긴 뭐가 없어...

---

참고사이트

1. Model-View-View Model 위키피디아

2. Vue - the Progressive Framework(Slideshare)

3. Concepts overview in Vue.js