Vue란?

코드의 재사용과 유지보수 편리성을 위해 정해진 약속대로 구조를 만들어야 한다.

이 구조를 디자인 패턴이라고 한다.

MVC 패턴

Model + View + Controller
- Controller: 브라우저 요청을 받으면 Model을 통해 데이터를 가져오고 View를 제어하여 사용자에게 전달
- Model: 데이터를 가공하는 클래스의 집합
- View: Controller가 폼 형태로 준 결과를 표시하고 사용자의 입력을 받아 데이터를 업데이트
왜 사용할까?
- 보이는 페이지, 데이터 처리, 연결하기로 나누어 각 요소가 맡은 임무에만 집중
- 서로 분리된 역할은 유지보수, 확장성, 유연성이 증가
한계
- 복잡한 화면과 데이터 구성 시 Controller에 여러 Model과 View가 복잡하게 얽히게 됨
- Model과 View의 의존성이 커질수록 유지보수와 테스트가 어려워짐

MVP 패턴

Model + View + Presenter
- Model: 앱에서 사용할 데이터와 데이터 처리
- View: 유저의 인터렉션을 받고 ViewModel에 명령을 내림
- Presenter: View에게 명령을 받아 Model을 가공하여 View에게 전달
왜 사용할까?
- Presenter를 통해 데이터를 전달받기에 View와 Model의 의존성이 없음
단점
- View와 Presenter가 1:1 관계이기에 의존성이 높아지고 필요한 클래스가 많아짐

MVVM 패턴

Model + View + ViewModel
- Model: 앱에서 사용할 데이터와 데이터 처리
- View: 유저의 인터렉션을 받고 자신이 사용할 ViewModel을 선택
- ViewModel: View에게 명령을 받아 Model에게 데이터를 요청하고 응답받은 데이터를 가공하여 Data binding으로 View갱신
왜 사용할까?
- View와 Model의 독립성을 유지
- View와 ViewModel이 바인딩하기에 코드의 양이 줄어듬
- 코드를 모듈화하여 재사용하고 테스트하기 용이함
단점
- ViewModel 설계가 어려움
- 복잡해질 수록 ViewModel가 비대해짐
- 표준화된 틀이 없어 사람마다 이해가 다름

DOM이 변경됐을 때, ViewModel의 DOM Listeners를 거쳐 Model로 신호가 간다.
View: HTML과 CSS로 이뤄진 화면 요소, v-text(디렉티브) 또는 {{}}(Mustache Expression)를 사용해 데이터를 추가한다.
Model: 데이터 또는 로직으로 JSON 형태로 데이터를 표현한다.
ViewModel:
- DOM Listeners가 View의 이벤트를 잡아 Model(Javascript)의 데이터를 변경하거나 로직을 실행
- Data bindings는 Model에서 변경된 데이터를 View에 반영
- Vue 객체 생성자를 통해 필요한 속성을 설정한다.
  - el: Vue로 만든 화면이 그려지는 인스턴스 시작 지점, CSS로 요소 지정
  - data: 인스턴스의 데이터 속성, Model
  - template: 화면에 표시할 HTML, CSS등 마크업 요소 정의
  - methods: 이벤트 및 동작 매서드, function
  - created...: 라이프 사이클 커스터마이징 로직

let vi = new Vue({
	el: '#app',
	data: model
});

Studee