[바미] MVC, MVP, MVVM 패턴에 대해 알아봅시다.

MVC 패턴

MVC 패턴은 크게 Model-View-Controller 3가지로 나눈 소프트웨어 개발 방법론입니다.

 

• Model : 일반적으로 DB테이블에 해당한다. 순수한 데이터로서 DB의 역할을 하거나 DB에 데이터를 요청해서 원하는 데이터를 받는 역할을 합니다.
  사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 하고 View나 Controller에 대한 정보는 알수없습니다.
• View : Controller로 데이터를 받아서 클라이언트 측 기술인 html/css/javascript를 이용해 표현하는 역할을 합니다.
  데이터를 따로 보관하지 않고 처리합니다.
• Controller : 사용자가 접근 한 URL에 따라서 사용자의 요청사항을 파악한 후에 그 요청에 맞는 데이터를 Model에 의뢰하고, Model에서 받은 데이터를 View에 반영해서 사용자에게 알려주는 역할을 합니다.

MVC패턴을 사용하는 이유

서로 분리해서 각자의 역할에만 집중할 수 있게 개발을 할 수 있습니다. 이런 경우 유지보수성, application의 확장성, 유연성 증가, 중복코딩 발생여부 등 발생가능한 다양한 문제점을 해결할 수 있죠.

MVC패턴의 한계

기본기능 설계를 위해 클래스들을 많이 필요하기 때문에 자칫 잘못하면 더 복잡해질 수 있다. 이러한 이유로 초반에 설계시간이 올래 걸리고 숙련된 개발자가 필요합니다. 그리고 Model과 View의 의존성이 완벽히 분리 할 수 없기 때문에 패턴이 모호해질 수 있고 변형이 올 수 있습니다.

MVC패턴의 한계에 대한 해결방안

MVC패턴의 Model과 View의 의존성이 높다는 단점을 보안할만한 대안으로 MVVM패턴이 있다. MVVM패턴은 Model + View + View Model를 합친 용어입니다.

 

---

MVVM 패턴

 

• Model : MVC패턴의 Model의 기능과 거의 동일하게 데이터를 처리하는 부분입니다.
• View : MVC패턴의 View의 기능과 거의 동일하게 사용자에 보여지는 UI부분입니다.
• View Model : View를 표현하기 위해 만든 View를 위한 Model입니다.
  View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터 처리를 하는 부분이죠.

2) 동작

MVVM 패턴의 동작 순서는 아래와 같습니다.

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하여 화면을 나타냅니다.

3) 특징

MVVM 패턴은 Command 패턴과 Data Binding 두 가지 패턴을 사용하여 구현되었습니다.

Command 패턴과 Data Binding을 이용하여 View와 View Model 사이의 의존성을 없앴습니다.

View Model과 View는 1:n 관계입니다.

4) 장점

MVVM 패턴은 View와 Model 사이의 의존성이 없습니다. 또한 Command 패턴과 Data Binding을 사용하여 View와 View Model 사이의 의존성 또한 없앤 디자인패턴입니다. 각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있습니다.

5) 단점

MVVM 패턴의 단점은 View Model의 설계가 쉽지 않다는 점입니다.

 

MVP 패턴

MVP 패턴은 MVC에서 Controller가 사라지고 Presenter가 생긴 구조이고, 처음 데이터의 요청은 View로 들어오게 됩니다.

2) 동작

1. 사용자가 제출한 form 데이터가 View에게 전달됩니다.
2. View가 Presenter에게 데이터를 전달하며 새로운 데이터를 요청합니다.
3. Presenter는 Model에게 데이터를 전달하며 새로운 데이터를 요청합니다.
4. Model은 Presenter의 요청을 토대로 데이터를 처리하여 새 데이터를 Presenter에게 전달합니다.
5. Presenter는 받은 데이터로 View에게 알립니다.
6. View는 받은 데이터를 통해 화면을 업데이트 합니다.

3) 특징

MVP패턴은 넓은 범위를 가지고 있는데 MVP는 뭘 주고 받냐는 의미입니다.

 

Back단에서 M은 Struct 같은 것이고, V는 개념적인 View를 말합니다. (Array, Map, 등등)

P는 원문 해석에 따라 과거에는 Process로 해석할 수 있고, Presenter로 해석 할 수 있었는데

지금에서는 MVC 패턴 중 C와 비슷한 부분으로 자리잡고 있습니다.

 

또한 Presenter 와 View 가 1:1 의 구조로 연결됩니다.

 

4) 장점

View 와 Model 사이의 연결점이 없어서 의존성문제가 사라집니다.

5) 단점

대신 Presenter 역할이 중요해지면서 View와 Presenter 사이의 의존성 문제가 생기게 됩니다.

 

3개의 파트가 왜 나누어져야 하는가?

MVC, MVP, MVVM등 3개의 파트가 독립적이여야 합니다.

상황에 따라서 M과 V가 분리가 되지 않더라도 V와 P, V와 C는 반드시 독립되어져야 합니다.

 

그 이유는 의존성 문제 때문입니다. 상호 참조(Circular dependencies)라고 하는데요.

C를 Main이라 했을 때, C가 A(View)와 B(Preseter)를 컨트롤 해주어야 합니다.

절대로 A와 B가 서로 호출되면 안됩니다.

 

상호 참조? 그게 왜 문제가 되는데?

이것이 MVC, MVP, MVVM과 같은 아키텍쳐를 공부해야 하는 이유중에 하나입니다.

사실 이 부분을 말씀드리고 싶어 MVC, MVP, MVVM패턴에 대해 글을 썼습니다.

 

단순하게 설명 하자면 자신이 개발하고 있는 코드가 상호 참조 문제에 노출이 되어있다면 버그가 어디서 터지는 지 찾아내기가 어렵기 때문입니다.

 

그래서 코드의 설계가 중요하죠.

자신이 개발하고 있는 코드를 실행시켰을 때 

이러한 문구가 뜬다면 상호참조 문제가 발생된 것이니 빨리 해결하셔야 합니다.

 

자료 참고

 https://beomy.tistory.com/43

[디자인패턴] MVC, MVP, MVVM 비교

https://server-engineer.tistory.com/167

MVC Pattern의 장단점

velog.io/@denmark-choco/MVC-design-pattern

MVC design pattern

gmlwjd9405.github.io/2018/07/06/singleton-pattern.html

[Design Pattern] 싱글턴 패턴이란 - Heee's Development Blog

 ko.wikipedia.org/wiki/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EB%94%94%EC%9E%90%EC%9D%B8_%ED%8C%A8%ED%84%B4

 

 https://hjjooace.tistory.com/entry/MVC패턴-MVVM-패턴-Singleton-패턴