MVVM pattern?

[ParkYK]

What is MVVM?

마크업 언어나 GUI 코드를 비지니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 아키텍처 패턴을 말한다.

 - MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지고 있다.
 - 뷰와 모델 사이의 양방향 데이터 바인딩을 지원한다.

 -  UI를 별도의 코드 수정 없이 재사용할 수 있다.
 - 단위 테스트등의 작업이 쉽다.
참고1 : 커맨드란 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법
참고2: 데이터 바인딩이란 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경된다.

MVVM은 Model-View-View-Model의 줄임말로 각각 다음의 역할을 한다. 
어플리케이션 로직과 UI를 분리하기 위해 설계된 패턴으로, UI를 가지는 응용 프로그램을 위한 아키텍처 패턴

View
  - 유저 인터페이스
  - HTML/CSS/XML/YAML 등으로 작성
ViewModel
  - 상태와 연산(명령)
  - View의 실제 논리 및 데이터 흐름을 담당
  - 상태 데이터를 변경하면 즉시 View에 반영
Model
  - 도메인 특화 데이터

MVVM 패턴의 주요 장점은 코드의 재사용성을 높이고, 테스트가 용이하며, 코드의 유지보수성을 향상시킨다는 점이다.

View와 비즈니스 로직을 명확하게 분리함으로써 개발자가 더 깨끗하고 관리하기 쉬운 코드를 작성할 수 있도록 도와준다.

Vue.js에서 MVVM 패턴을 사용하는 주요 장점

1. • 컴포넌트 기반 구조를 통해 View, ViewModel, Model의 역할이 명확히 구분된다.
   • Vue 컴포넌트는 주로 View 역할을 하며, 컴포넌트 내의 데이터와 메소드는 ViewModel 역할을 한다.
2. • Vue.js는 양방향 데이터 바인딩을 지원하여 View와 ViewModel 간의 동기화가 자동으로 이루어진다.
   • 데이터의 변경이 자동으로 UI에 반영되고, UI의 변경이 자동으로 데이터에 반영된다.
3. • Vue 컴포넌트를 통해 UI 요소를 재사용할 수 있다.
   • 컴포넌트 기반 아키텍처는 코드의 재사용성과 유지보수성을 높여준다.
4. • ViewModel에 해당하는 부분을 독립적으로 테스트할 수 있어, UI와 비즈니스 로직의 테스트가 용이하다.
   • Jest, Mocha 등의 테스트 프레임워크와의 통합이 잘 되어 있어 테스트 작성이 간편하다.
5. • Vue의 반응형 데이터 시스템을 통해 데이터의 변경이 자동으로 UI에 반영되므로, 코드의 간결성과 효율성이 높아진다.
6. • Vue CLI와 같은 도구를 통해 프로젝트 설정과 빌드 과정을 자동화하여 개발 생산성을 높여준다.
   • Vuex를 사용하여 상태 관리를 중앙에서 효율적으로 처리할 수 있다.
7. • Vue.js는 활발한 커뮤니티와 풍부한 에코시스템을 갖추고 있어 다양한 플러그인과 도구를 사용할 수 있다.
   • 공식 문서와 커뮤니티 자료가 잘 정리되어 있어 학습 곡선이 완만하다.