MVVM 패턴2

어제 간략하게 View, ViewModel, Model에 대해서만 정리해보았다.

오늘은, DOM, DOM Listeners, Data Binding등을 정리하면서 흐름을 이해해보려한다.

용어	설명
View	사용자에게 보이는 화면
DOM	HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
DOM Listeners	돔의 변경내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
Model	서버에서 가져온 데이터를 담는 용기
Data Bindings	View에 표시되는 내용과 모델의 데이터를 동기화
ViewModel	DOM Listener와 Data Binding을 제공하는 영역

예를 들어,

Naver나 Google 같은 화면에서 "오늘의 운세"를 입력한 후 [검색] 창을 클릭하면 "오늘의 운세"와 관련된 내용이 주르륵 검색된다.

그럼 여기서~ 이렇게 정리하면 될 꺼 같다. 이 아래 순서대로 생각해보자~

View	Naver나 Google 검색 화면
DOM	- "오늘의 운세"를 작성했던 입력 란  - [검색] 버튼
DOM Listeners	View에서 Model 사이 통로인 ViewModel에 존재  [검색] 버튼을 클릭 감지
Model	엄청 많은 정보들이 있는 곳
Data Bindings	View에서 Model 사이 통로인 ViewModel에 존재  Model에서 "오늘의 운세"에 관한 정보를 가져옴
View	그 결과를 Naver나 Google 검색 화면에 뿌려줌