[Careerthon] MVC, MVP, MVVM 패턴

개요

• 디자인패턴이란?
• MVC패턴
• MVP패턴
• MVVM패턴
• MVC패턴과 MVVM의 차이

---

 

디자인패턴

디자인 패턴은 올바른 설계를 빠르게 만들 수 있도록 도와주는 문제해결방법으로

같은 실수를 반복하지 않기 위해서 특정 상황에서 발생하는 문제 패턴을 발견하고 해결방안을 기록해둔 것입니다.

건축학에서 비롯된 이 개념은 소프트웨어를 구축한다는 면에서 동일하게 적용되어 개발자들이 사용하고 있습니다.

라이브러리나 프레임워크가 도와주지 못하는 애플리케이션의 구조를 만드는 데 많은 도움을 주는 것이 바로 디자인패턴입니다.

장점

• 서로 같은 패턴을 알고 의사소통을 하면 훨씬 효율적이다
  • 다른 개발자나 팀과 소통이 필요한 경우 패턴을 알고 있다면 패턴에 담겨있는 내용과 특성 등에 대해 쉽게 얘기할 수 있다.
  • 내가 생각하고 있는 디자인에 대해서 다른 개발자가 더욱 빠르게 파악할 수 있습니다.
  • 전문용어의 사용은 개발팀의 능력을 더욱 극대화합니다. 

이러한 장점과 특징으로써 현재 디자인상의 문제에 가장 적합한 패턴을 찾고 도입하는 것이 중요한 얼마나 중요한지에 대해 알아보았습니다.

---

MVC패턴 (Model + View + Controller)

관심사에 따른 레이어의 분리를 하도록 지향

구조)

• Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분
  • Javascript Object, ServerAPI를 통해서 받는 데이터 DB 등 소프트웨어가 다룰 데이터
• View : UI 사용자에게 실질적으로 보여지는 부분
  • HTML 및 CSS로 만들어지는 결과물 
  • Model을 이용해서 직접 업데이트
  • Model에서 View에게 신호를 보내서 업데이트
  • View가 주기적으로 Model의 변화를 감지하여 업데이트
• Controller : 사용자의 입력을 받고 처리하는 부분
  • 여러개의 View를 선택할 수 있는 1 : n 구조
  • View를 선택할 뿐 직접 업데이트 하지 않음

동작)

1. 사용자의 Action이 Controller로 들어옴
2. Controller는 Action을 확인 후 Model을 업데이트하고 Model을 나타낼 View를 선택함 (View는 다수를 선택이 가능)
3. View는 Model을 이용해서  화면에 나타냄

장단점)

• 장점
  • 가장 널리 사용되는 패턴
  • 단순함
• 단점
  • View와 Model사의 의존성이 높아 규모가 커질수록 유지보수가 어렵고 복잡함

---

MVP패턴 (Model + View + Presneter)

MVC패턴의 의존성을 해결하기 위해 제시된 모델

구조)

• Presenter : View에서 요청한 정보로 Model을 가공하여 View에 전달해줌 (직접적으로 영향을 준다)
  • View와 Model의 인스턴스를 가지고 있어 둘을 연결함
  • View와 1:1관계
• Model과 View는 MVC와 동일 

동작)

1. 사용자의 Action이 View로 들어옴
2. View에서 Presenter로 데이터를 요청
3. Presenter는 Model에게 데이터를 요청 
4. Model은 Presenter의 요청에 응답하여 데이터 전달
5. Presenter에서 전달받은 데이터를 기반으로 업데이트 후 View로 데이터 전달
6. VIew는 Presenter가 응답한 데이터를 이용해서 화면에 나타냄

장단점)

• 장점
  • View와 Model의 의존성이 없다 (Presenter를 통해서만 데이터를 전달받기 때문에)
• 단점
  • 오히려 View와 Presenter사의 의존성이 높아짐

---

MVVM패턴 (Model + View + View-Model)

MVC의 역할은 그대로이나 구현 방식이 바뀐 것에 가깝다.

Model이 변하면 View를 수정하고 View에서 이벤트를 받아서 Model을 변경하는 패턴을 동작하기에 View에서 Model을 수행한다하여 View-Model이라는 개념이 도입 됨

또한 기존에 DOM을 직접 조작하던 코드는 사라지고 이 기능은 프레임워크에서 알아서하기에 View를 그리는 Model만 신경쓰게 되었다는 의미로 View-Model이라고 부르며 이러한 변화는 class나 id를 통해 간접적으로 HTML에 접근해야하는 불편함을 해소해 줌.

j-Query를 사용하던 이전에서 SPA기능으로 발전하게 됨 

React, Vue, Angular2 등 어떤 방식의 템플릿과 바인딩 문법을 쓰느냐의 차이지 MVVM 아키텍쳐는 대부분 그대로 유지

구조)

• View-Model : View를 표현하기 위해 만든 View를 위한 Model (데이터처리도 여기서 함)
• Model과 View는 MVC와 동일 

동작)

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이용해서 화면에 나타냄

장단점)

• 장점
  • View와 Model의 의존성이 없다
  • Command패턴과 Data Binding을 통해 View-Model과 View 사이의 의존성도 없다
  • 모듈화하여 개발할 수 있다
• 단점
  • View-Model의 설계가 쉽지 않다.

---

 

MVC와 MVVM의 차이점 (면접대비)

MVC패턴의 경우 User의 Action을 Controller에서 받아서 Model에서 Action에 따른 데이터 처리 그리고 Controller에서 View를 선택해서 업데이트를 하는 방식인 반면 MVVM의 경우에서는 View에서 받은 User의 Action을 View-Model에서 가공하여 View에 나타내는 동작방식을 가진다.

View와 View-Model과 View와 Controller의 1: n 방식은 동일하나 View가 Controller의 참조를 기억못하는 MVC와 달리 MVVM은 View-Model의 참조를 View에서 기억한다. (대신 View-Model에서 기억하지 못한다)

또한 MVVM의 경우 MVC보다 발전된 모델로써 MVC의 문제점인 의존성문제를 Command 패턴과 Data Binding을 통해서 해결한 패턴이다.

 

 

 

 

 

 

 

 

 

https://velog.io/@teo/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-MV-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

https://velog.io/@aborile/Frontend-Design-Pattern

https://beomy.tistory.com/43