[Vue.js] VueJS 강의 #1 - 모델 패턴과 반응형 웹

참조된 서적 : Vue.js 코딩 공작소 (길벗)

개발자 보물상자에서 VueJS 책 한권 다 읽었다라고 할 수 있게끔 쉽게 설명해드리겠습니다.

블로그 포스팅 순서는 책 챕터와 다르게 진행될 수 있습니다. (가끔 필요없을 것 같은 챕터는 건너띌 수도 있다는 뜻)

1. 모델 - 뷰 - 뷰모델 패턴 ( Model - View - ViewModel )

이 내용을 대략적으로 그림으로 한번 표현해보면 아래 그림으로 볼 수 있습니다.

그러면 각각의 파트마다 본인의 역할이 나누어져있을텐데 그 역할에 대해 자세히 알아보도록 합시다.

- 뷰 (View)

뷰는 여전히 사용자가 볼 수 있는 화면을 보여주는 역할을 담당하지만, 클라이언트의 비지니스 로직은 담당하지 않습니다. 대신 현재 상태의 데이터를 실시간 렌더링합니다.

- 데이터 바인딩 (Binder)

데이터 바인딩은 뷰 모델에서 수행된 데이터를 뷰에 전달하고, 뷰에서 사용자가 발생시킨 이벤트를 뷰 모델에게 전달하는 역할을 담당하며 뷰가 렌더링을 할 수 있도록 합니다.

- 뷰 모델 (View Model)

뷰 모델은 백앤드 개발로 비유하면 컨트롤러의 역할을 수행합니다. 뷰에서 사용자가 발생시킨 이벤트에 따라서 어떤 비지니스 로직을 수행할 것인지 결정을 하고 결정된 로직을 모델에게 수행하라고 명령하는 역할을 한다고 볼 수 있습니다.

- 모델 (Model)

모델은 모든 로직 수행에 대한 결정은 뷰 모델이 합니다. 그렇기 때문에 모델에서는 어떤 로직을 가지고있고, 수행할 준비만 하고 있는 역할이라고 볼 수 있습니다.

웹을 조금이라도 해보신 분들은 반응형 많이 들어보셨을 겁니다. 반응형 애플리케이션은 비동기(Async) 기술을 활용합니다.

- 애플리케이션 상태 변화를 관찰합니다.

- 애플리케이션 전체에 변경 알림을 전달합니다.

- 상태 변화에 따라 뷰를 자동으로 렌더링합니다.

- 뷰에서의 사용자와 상호작용하기 위해 적절한 응답을 제공합니다.

- VueJS는 Object.defineProperty 함수를 활용해서 getter/setter 를 사용합니다.

그렇기 때문에 ES5 지원하지 않는 브라우저에서는 사용할 수 없습니다.

- 2. 반응형 애플리케이션에서 설명한 것처럼 VueJS도 비동기(Async)를 사용합니다.

VueJS에서는 비동기 수행을 위해 Promise.then, MessageChannel, setTimeout( fn, 0 ) 을 사용하여 돌아갑니다.

- VueJS는 DOM 을 직접 컨트롤하는 것을 권장하지 않습니다.

어쩔 수 없이 DOM을 컨트롤 해야하는 경우가 발생한다면, Vue 가 모든 데이터 작업을 완료한 후에 할 수 있도록 Vue.nextTick( callback ) 을 사용해야합니다.