Vue란?

새로 입사한 회사의 프론트엔드 스택이 Vue.js이기 때문에 빨리 익혀야 할 것 같아서 공부를 시작한다.

React에 대해 어느정도 익숙해져 있는 상태이므로 큰 어려움은 없을 것 같다고 생각한다!

항상 공식 문서는 옳으니까 공식문서를 읽으면서 공부를 진행하려고 한다

https://vuejs.org/guide/introduction.html

Introduction | Vue.js

Vue.js란?

• React와 마찬가지로 Component 기반의 SPA 프론트 페이지를 구축할 수 있는 "프레임워크"이다.
  • 물론, Virtual Dom을 이용한다!
• React와 비교했을 때 러닝 커브가 낮다.

Vue의 MVVM 패턴

• Vue는 MVVM 패턴을 이용하고 ViewModel에 집중하고 있는 프레임워크이다.
• View가 특정 Model에 종속되지 않도록 Model을 분리한 패턴이며 View, Model, View Model을 분리하여 독립적으로 개발하면서 생산성을 높인 패턴이라고 할 수 있다.
  • 흔히 말하는 MVC 패턴과 다른 점은 View와 Model 사이의 의존성이 없다는 점이다.
  • 또한 Command 패턴과 Data Binding을 이용하여 View와 View Model 사이의 의존성도 없앤 디자인 패턴이다.

Model

• 데이터와 데이터를 다루는 역할을 하는 계층이며 비즈니스로직이 포함되어 있다.

View

• 사용자에게 보여지는 User Interface

Model

• View를 표현하기 위해 만든 View만을 위한 Model이다.
• View를 나타내기 위한 데이터를 처리하는 부분이다.
• View가 사용하는 method와 field를 갖고, View에 상태 변화를 알리며 View가 사용할 수 있도록 데이터를 바인딩한다.

작동 순서

1. 사용자가 View를 통해 Action을 한다.
2. View에 Action이 들어오게되면, Command 패턴으로 View Model에 Action을 전달한다.
3. View Model은 Model에게 데이터를 요청한다.
4. Model은 View Model에게 요청받은 데이터를 응답한다.
5. View Model은 응답받은 데이터를 처리하고 저장하고 있는다.
6. View는 View Model과 Data Binding을 해서 화면을 그린다.

Command 패턴

• Command 패턴은 객체의 행위를 클래스로 만들어 캡슐화하는 패턴이다.
• 어떤 객체에가 다른 객체의 메서드를 실행하려면 그 객체를 참조해야 하지만 Command 패턴을 적용하면 의존성을 제거할 수 있다.

Data Binding

• Binding은 "묶는다"라는 뜻으로 웹 프로그래밍에서 화면에 그리고자 하는 데이터를 실제 데이터와 연결해주는 과정(일련의 프로세스)를 의미한다.