Spring 에 대해 학습하며, Spring 은 MVC 디자인 패턴을 따른다고 배웠습니다.
MVC 패턴에 대해 검색하면 항상 함께 나오는 패턴이 MVP, MVVM 패턴인데, 이에 대해 한번 정리해보고자 합니다.
디자인 패턴이란? 디자인 패턴은 건축으로치자면 공법에 해당하는 것으로, 프로그램 개발에서 자주 나타나는 과제를 해결하기 위한 방법입니다. 소수의 뛰어난 엔지니어가 해결한 문제를 다수의 엔지니어들이 처리할 수 있도록 한 규칙이면서, 구현자들 간의 커뮤니케이션의 효율성을 높이는 기법입니다.
MVC패턴
MVC란 Model-View-Controller의 약자로, 애플리케이션을 세가지 역할로 구분한 개발 방법론입니다. MVC 패턴은 비지니스 로직과 화면을 분리합니다. 이러한 관심사 분리는 업무를 분담하여 유지보수하는 데에 도움을 줍니다.
Java 기반의 Spring의 경우 Spring MVC 라는 프레임워크가 있을 정도로 많이 사용됩니다.
Model
데이터 및 비지니스 로직을 관리합니다.
데이터의 상태가 변경되면 모델은 일반적으로 뷰에 알려 화면을 바꾸어주거나 컨트롤러에 알려 업데이트된 뷰를 제어하게 됩니다.
View
화면(UI)을 관리합니다.
컨트롤러에 의해 호출되며, 호출될 경우 데이터가 포함된 모델을 전달받습니다.
모델로부터 받은 데이터를 받아 사용자에게 데이터를 보여줍니다.
Controller
명령을 모델과 뷰에 전달합니다.
라우팅(Routing) 기술을 통해 사용자 요청 및 응답을 주로 처리합니다. 즉, 사용자가 접근한 URL에 따라 사용자의 요청을 파악한 후에, 그 요청에 맞는 데이터를 Model 의뢰하고 데이터를 View에 반영하여 사용자에게 알립니다.
웹 동작 방식
위의 개념을 웹에 적용하면 다음의 순서로 이루어집니다.
사용자가 웹 사이트에 접속합니다. (Uses)
Controller는 사용자가 요청한 웹페이지를 서비스하기 위해 모델을 호출합니다. (Manipulates)
Model은 데이터베이스나 파일과 같은 데이터 소스를 제어한 후에 그 결과를 리턴합니다.
Controller는 Model이 리턴한 결과를 View에 반영합니다. (Updates)
데이터가 반영된 View는 사용자에게 보여집니다. (Sees)
장점
UI 패턴 중에서도 가장 쉽게 구현가능합니다.
화면과 비지니스 로직을 분리하여 작업이 가능합니다.
또한 Model, View, Controller 영역 별 개발로 인하여 확장성이 뛰어납니다.
단점
View와 Model 간의 의존성이 크고, UI쪽 로직이 복잡하게 구현되어야 하는 경우에는 적절하지 않습니다.
적용 분야
대부분의 현대적 웹 앱 혹은 데스크톱 앱 개발 시 관련 개발 언어와 개발 프레임워크 환경에서 지원됩니다.
Windows Desktop 개발 기술 : WinForm
C# ASP.NET MVC 5 Framework, JAVA Spring MVC Framework
Python Django / Flask Framework
PHP7 Laravel / Codelgniter Framework
Node.js Express Framework
Spring MVC Spring은 DI나 AOP 같은 기능 뿐 아니라 Servlet 기반의 웹 개발을 위한 MVC 프레임워크를 제공하고 있습니다. Spring MVC는 Model2 아키텍쳐와 Front Controller 패턴을 프레임워크 차원에서 제공합니다. 또한 Spring이 제공하는 트랜젝션이나 DI 및 AOP 등도 손쉽게 사용가능합니다.
MVP패턴
MVP 패턴은 Model-View-Presenter로 구성된 디자인 패턴입니다. MVC 패턴을 따르고 있지만, MVC와는 다르게 UI(View)와 로직(Model)을 분리하고, 서로간에 상호작용을 다른 객체(Presenter)에 그 역할을 줌으로써 서로의 영향(의존성)을 최소화하는 것에 있습니다.
Model
MVC와 동일하게 프로그램에서 사용되는 데이터를 저장하고 비지니스 로직을 처리합니다.
View와 Presenter 등 다른 어떤 요소에도 의존적이지 않고 독립적입니다.
View
UI를 담당하며 Model에서 처리된 데이터를 Presenter를 통해 전달받아 유저에게 보여줍니다.
Presenter를 이용해 데이터를 주고받기 때문에 Presenter에게 의존적입니다.
Presenter
Model과 View의 매개체입니다. Model과 View의 매개체라는 점에서 Controller와 유사하지만, View에 직접 연결되는 대신 인터페이스를 통해 상호작용한다는 차이점이 있습니다.
인터페이스를 통해 상호작용하므로 MVC가 가진 테스트 문제와 모듈화/유연성 문제 역시 해결할 수 있습니다.
뷰와 1:1로 매칭됩니다.
장점
MVC 패턴과는 다르게 코드가 깔끔해지고, Model과 View의 결합도를 낮추어 로직을 추가/변경할 때에 해당 부분만 수정하면 돼서 확장성이 좋습니다.
또한 UI와 데이터 파트가 나뉘어 역할이 분명하고 쉽고 빠른 코딩이 가능합니다.
단점
어플리케이션이 복잡해질수록 View와 Presenter의 의존성이 강해지는 문제가 있습니다. 또한 MVC Controller처럼 추가 비지니스 로직에 집중되는 경향이 있다고 합니다.
개발자가 오랜시간 MVP 패턴을 기반으로 앱을 개발하면, 어느 순간 문제가 발생하기 쉽고, 분리하기 어려운 Presenter를 발견하게 됩니다.
적용분야
Windows Desktop 개발 기술 : WinForm, WPF
Mobile App 기존 개발 기술 : 전통적인 iOS, Android Native App 개발 시 사용되어오고 있습니다.
Jquery, Javascript 기반의 전통적인 Front-end 개발 기술입니다.
MVVM패턴
MVVM 패턴은 Model-View-ViewModel 의 약자로 프로그램의 비지니스 로직과 프레젠테이션 로직을 UI로 명확하게 분리하는 패턴입니다.
Model
데이터를 다루는 부분으로, 비지니스 로직을 포함합니다.
데이터베이스, 네트워크 요청 또는 파일 시스템과 같은 데이터 소스와 상호작용합니다.
View
레이아웃과 화면을 보여주는 역할을 합니다.
사용자 인터페이스(UI)를 담당하는데, 사용자가 보는 화면을 표시하고, 사용자 입력을 처리합니다.
View Model과의 느슨한 결합을 통해 데이터를 표현합니다.
ViewModel
View 와 더불어 View Model 과 데이터 바인딩을 통해 상호 상태 변경을 인식하고 데이터를 자동 갱신합니다.
데이터 바인딩 기술로 인한 UI 요소에 대한 데이터 처리 코딩량이 획기적으로 감소함으로서, 개발 생산성이 향상됩니다.
데이터 바인딩 구조를 통해 사용자와의 상호작용으로 View 의 내용이 바뀌면 바인딩된 데이터 소스인 View Model 의 데이터가 자동으로 변경되고 View Model 데이터 소스가 변경되면 자동으로 바인딩된 View 의 값이 변경됩니다.
동작과정
사용자의 Action들은 View를 통해 들어옵니다.
View에 Action이 들어오면 ViewModel에 Action을 전달합니다.
ViewModel은 Model에게 데이터를 요청합니다.
Model은 ViewModel에게 요청받은 데이터를 응답합니다.
ViewModel은 응답 받은 데이터를 가공하여 저장합니다.
View는 Data Binding을 이용해 UI를 갱신시킵니다.
장점
UI가 나오지 않아도 개발이 가능하기 때문에 뷰 로직과 비지니스 로직을 분리하여 생산성을 높일 수 있습니다.
의존성이 없기 때문에 테스트가 수월합니다.
뷰와 뷰모델이 1:N 관계이기 때문에 중복되는 로직을 모듈화하여 여러 뷰를 적용할 수 있습니다.
단점
설계가 복잡해집니다. MVVM 패턴에 대한 이해가 필요하며, ViewModel에 대한 설계 능력도 필요합니다.
뷰모델이 너무 비대해질 수 있습니다.
데이터바인딩으로 인한 메모리 소모가 심합니다.
적용분야
Window Desktop: WPF(MVVM), UWP
Web Front-end Frameworks: React.js, Vue.js, Angular,js
Mobile: Xamarin, React Native, Swift for IOS, Kotlin for Android
