MVC 패턴

애플리케이션을 모델(Model), 뷰(View), 컨트롤러(Controller)로 나누어 각각의 구성요소 개발에 집중할 수 있도록 해주는 패턴.

모델

데이터와 비즈니스 로직을 담당하는 요소. 데이터베이스에 데이터를 저장하고 변화가 있을 시 뷰에게 알리는 등의 역할을 한다.

뷰

사용자 인터페이스를 담당하는 요소. 사용자에게 데이터를 보여주고 입력을 받는 등 인터페이스로서의 역할만 수행하며, 비즈니스 로직 등을 처리해서는 안된다.

컨트롤러

사용자의 요청을 받고 어떤 응답을 내려줄 지를 담당하는 요소. 입력에 따른 데이터 업데이트도 수행한다. 뷰와 모델의 중간다리 역할.

MVP 패턴

MVC 패턴에서 컨트롤러가 프리젠터(Presenter)로 변경된 패턴으로, 뷰의 모든 로직을 프리젠터가 처리함으로써 뷰와 모델을 완벽하게 분리한다.

UI 로직이 추상화된 프리젠터에 위치해 있어 데스크톱, 모바일 앱과 같이 실제 화면에서 테스트하기 어려운 환경에서 단위 테스트를 작성하기 좋다.

MVVM 패턴

MVC 패턴에서 컨트롤러가 뷰모델(View Model)으로 변경된 패턴으로, 뷰와 뷰모델 사이에 양방향 바인딩을 가진다.

중간자 역할을 하는 뷰모델이 뷰를 참조하지 않는다는 점에서 MVP 패턴보다 더 분리된 패턴이다.

데이터 바인딩을 구현하기 위해 옵저버 패턴이 사용된다.

마찬가지로 모바일, 데스크톱 앱 등에서 많이 활용되며, Vue.js 의 핵심 디자인 패턴이기도 하다. 단위 테스트 작성에 좋다.