MVVM 모델에서의 VUE
Vue : MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리
- View : 브라우저 화면 ⇒ 화면단의 요소(HTML)는 DOM을 통해 자바스크립트로 조작 가능
- DOM Listeners : View에서 들어온 이벤트 발생 감지
- Model : DOM Listener에 의해 데이터 변경 및 로직 실행
- Data Bindings : 자바스크립트(Model)의 변화 감지 ⇒ View에 반영
디자인 패턴
MVC 패턴 : Model + View + Controller
- Model : 데이터와 데이터를 처리하는 부분
- View : 사용자에서 보여지는 UI 부분
- Controller : 사용자의 입력(Action)을 받고 처리하는 부분
MVC 패턴의 동작 순서
- Action => Controller
- Controller => Action에 따른 Model 업데이트
- Controller => Model을 나타내줄 View를 선택
- View <=> Model 화면 출력
MVC 패턴의 단점: View와 Model 사이의 의존성이 높다
View와 Model의 높은 의존성은 어플리케이션이 커질수록 복잡하지고 유지보수가 어려워진다.
- MVVM 패턴 : Model + View + View Model
- Model : 데이터와 그 데이터를 처리하는 부분
- View : 사용자에서 보여지는 UI 부분
- View Model : View를 표현하기 위한 Model이자 View를 나타내기 위한 데이터 처리를 하는 부분
MVVM 패턴의 동작 순서
- Action => View
- View => View Model (Command 패턴)
- View Model => Model 데이터 요청
- Model => View Model 데이터 응답
- View Model 데이터를 가공, 저장
- View는 Data Binding하여 화면 표시
MVVM 패턴은 View와 Model 사이의 의존성이 없습니다.
각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있습니다.
Vue의 핵심 : 반응성(Reactivity)
기존 웹 개발 방식 (HTML,CSS,JS)
HTML : 태그, DOM의 정보를 제작
CSS : 태그, DOM의 스타일 추가
JS : 태그, DOM의 내용을 조작
<body>
<div id="app"></div>
<script>
const div = document.querySelector("#app");
let str = "hi";
div.innerHTML = str; // div안의 내용 변경을 원한다면 다시 입력해야함..
str = "bye";
div.innerHTML = str;
</script>
</body>Reactivity 구현
Vue의 핵심 : reactivity(반응성)
데이터의 변화를 라이브러리에서 감지하여 화면에 바로 반영하는 것
Vue는 기본적으로 JavaScript 객체를 Vue 인스턴스 data 옵션으로 정의할 때 모든 속성들을 Object.defineProperty을 사용하여 Getter/Setter로 변환
➟ Object.defineproperty() Api 알아보기
➟ 반응성 깊이 알아보기
참고 : https://ui.toast.com/weekly-pick/ko_20210112
Object.defineProperty() // 객체의 특정 속성의 동작(접근과 할당)을 재정의(변경)하는 프로퍼티
Object.defineProperty(대상 객체, 객체의 속성,{
// 정의할 내용
get: function(){
//속성에 접근 했을 때의 동작 정의
}
set: function(){
//속성에 값을 할당 했을 때의 정의
}
})
Front-End Developer