MVC, MVP, MVVM

디자인 패턴

소프트웨어에서 자주 사용되는 인기 있는 디자인 패턴

디자인 패턴은 각각의 책임을 분리해주어 결합도를 낮추고, 확장 테스트, 유지보수에 용이하다는 장점이 있음

[ MVC ]

 

하나의 애플리케이션을 Model - View - Controller로 이루어진 3개의 축면으로 분리하여 개발하는 디자인 패턴

 

Modal

애플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분

 

View

사용자에게 보여지는 UI 부분

 

Controller

다가오는 사용자의 요청을 처리하는 역할을 담당

Model을 통해 받은 데이터를 처리하거나 결과 값을 View에 반환하는 역할

일반적으로 View는 Model 사이를 중재하는 역할

 

동작방식

1. 사용자의 요청(Action)이 Controller에 들어옴
2. Controller는 요청에 맞게 요청을 확인하고 Moeal을 업데이트함
3. Controller에 업데이트된 Model을 나타내줄 View를 선택
4. View는 업데이트 된 Model을 이용하여 화면을 나타냄

View가 업데이트 되는 방법

• view가 Model을 이용하여 직접 업데이트
• Model에서 View에게 Notify 하여 업데이트
• View가 Polling 으로 주기적으로 Model의 변경을 감지하여 업데이트
  • Polling: 하나의 장치(또는 프로그램)가 충돌 회피 또는 동기화의 처리 목적으로 다른 장치의 상태를 주기적으로 검사하여 일정한 조건을 만족할 때 송수신 등의 자료처리를 하는 방식

 

특징

Controller가 여러개의 View를 선택할 수 있는 1:n 구조

Controller는 View를 선택할 뿐 직접 업데이트하지 않음

 

장점

가장 단순한 패턴으로 여러 개발 분야에서 보편적으로 사용되는 디자인 패턴

 

단점

View와 Model 사이의 의존성이 높아 어플리케이션이 커질수록 복잡해지고 유지보수가 어려울 수 있음

 

 

[ MVP ]

 

Model - View - Presenter로 이뤄진 디자인 패턴

MVC와 유사한 디자인 패턴으로 MVC에서 Controller가 하는 역할을 Presenter가 함

 

Modal & View

MVC와 같은 컨셉으로 사용됨

 

Presenter

Presenter는 View를 통한 사용자의 입력을 받음

그다음 Model에 도움을 받아 사용자의 데이터를 처리하고 결과를 View로 다시 전달함

즉 View에서 요청한 정보로 Model을 가공하여 View에 전달

 

동작방식

1. 사용자의 Action은 View를 통해 들어오게 됨
2. View는 데이터를 Presenter에 요청함
3. Presenter는 Model에게 데이터를 요청함
4. Model은 Presenter에게 요청받은 데이터를 응답함
5. Presenter이 데이터를 가공하고 다시 View에게 응답함
6. View는 Presenter가 응답한 데이터를 이용하여 화면을 나타냄

 

특징

Presenter는 View와 Model 인스턴스를 가지고 있어 둘을 연결하는 접착제 연할

Presenter와 View는 1:1 관계

 

장점

View와 Model의 의존성이 없음(Presenter을 통해서만 데이터를 전달받기 때문)

 

단점

View와 Presenter사이의 의존성이 높고 애플리케이션이 복잡해질수록 의존성이 더 강해짐

 

[ MVVM ]

 

Model - View - View Model로 이뤄진 디자인 패턴

 

Modal & View

MVC와 같은 컨셉으로 사용됨

 

ViewModel

View를 표현하기 위해 만든 View를 위한 Model

View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터를 처리하는 부분

 

동작

1. 사용자의 Action들은 View를 통해 들어옴
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패턴과 Data Binding을 이용하여 View와 View Model 사이의 의존성을 없앴음
View Model과 View는 1:n 관계

• Command 패턴
  • 객체의 형태로 캡술화 하여 사용자가 보낸 요청을 나중에 이용할 수 있도록 메서드 이름, 매개변수 등 요청에 필요한 정보를 저장 또는 로깅, 취소할 수 있게 하는 패턴
• Data Binding
  • 제공자와 소비자로부터 데이터를 결합시켜 이것들을 동기화하는 기법
  • 데이터 바인딩 프로세스에서 각 데이터 변화는 데이터에 묶인 요소에 의해 자동으로 반영됨

 

장점

MVVM 패턴은 View와 Model 사이의 의존성이 없음

또한 Command 패턴과 Data Binding을 사용하여 View와 View Model 사이의 의존성 또한 없앤 디자인패턴

각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있음

 

단점

ViewModel의 설계가 쉽지 않음

 

 

 

프론트엔드 아키텍처 자세히 알기 

프론트엔드에서 MV* 아키텍쳐란 무엇인가요?