Vue 란 무엇일까?

Vue 란 ?

MVVM 패턴의 뷰모델 (ViewModel) 레이어에 해당하는 화면 (View) 단 라이브러리

 

MVVM

Model - View - ViewModel 패턴으로, 로직과 UI 분리를 위해 설계된 패턴이다.

Command 패턴과 Data Binding 패턴을 사용하며, 두 패턴으로 인해 View 와 ViewModel 은 의존성이 사라진다.

DOM 이 View 의 역할, 자바스크립트가 Model 의 역할을 한다.

 

동작 원리

1. View 에 입력이 들어오면 Command 패턴으로 ViewModel 에 명령
2. ViewModel 은 필요한 데이터를 Model 에 요청
3. Model 은 ViewModel 에 필요한 데이터를 응답
4. ViewModel 은 응답 받은 데이터를 가공해 저장
5. View 는 ViewModel 과의 Data Binding 으로 인해 자동 갱신 됨

 

cf ) Command 패턴

커맨드 패턴은 객체의 행위 (메서드) 를 클래스로 만들어 캡슐화 하는 패턴이다.

어떤 객체 (A) 에서 다른 객체 (B) 메서드를 실행하려면 그 객체 (B) 를 참조하는 의존성이 발생한다.

그러나 커맨드 패턴을 적용하면 의존성을 제거할 수 있다.

또한 기능의 변경이 일어날 때 A 클래스 코드를 수정할 필요없이, 기능에 대한 클래스를 정의하면 되므로 확장성과 유연성을 가지게 된다.

잘 정리된 블로그가 있으니 참고! 👉 https://victorydntmd.tistory.com/295

 

cf ) Data Binding

Model 의 데이터와 View 에 표시되는 내용을 동기화

 

Vue 의 장점

• 학습 곡선이 앵귤러, 리액트에 비해 상대적으로 낮다.

• 컴포넌트라는 작은 단위로 쪼개어 관리되므로 유지보수와 재사용성이 높다.

• 가볍고 빨라서 적은 오버헤드와 빠른 성능을 낼 수 있다.

• View 에 최적화 되어있어, View 의 동적 변화에 대한 처리가 매끄럽다.

• 다양한 모듈이 존재한다.

  • SPA를 위한 vue-router
  • 유효성 검증을 위한 vue-vaildator
  • HTTP, Ajax를 위한 vue-resource
  • Vue에 최적화된 개발자 모드를 위한 vue-devtools 등..

 

Vue 의 단점

• 언어 장벽 : 메이저 개발자들이 대체로 중국 커뮤니티에 집중 되어있다.
• 필요 이상의 유연성으로 프로젝트가 더 복잡해 질 수 있다.
• 자체 Template 을 사용하므로, 런타임 에러가 발생하기 쉽고, 테스트 하기 어려우며 재구조화 하기 어려움 등의 이유로 인해, 대규모 프로젝트 개발에 문제를 야기할 수 있다.

 

참고

• https://magi82.github.io/android-mvc-mvp-mvvm/
• https://wikidocs.net/17701
• https://mygumi.tistory.com/206
• https://hydev.tistory.com/2