날아라김지원
article thumbnail
Published 2022. 6. 20. 19:22
MVC MVP MVVM 패턴 웹개발지식

- MVC MVP MVVM 패턴

1. MVC패턴

Model, View, Controller로 이루어진 디자인 패턴

애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만

집중해서 개발할 수 있다. 재사용성과 확작성이 용이하다. 단 애플리케이션이 복잡해 질수록

모델과 뷰의 관계가 복잡해진다.

  • 모델박스 안에 글자가 들어 있다면, 그 사각형모양의 박스 위치 정보, 글자 내용, 글자 위치, 글자컨트롤러를 통해 모델을 생성하거나 갱신한다.
  • 포맷(utf-8등)에 관한 정보를 모두 가지고 있어야 한다. 뷰에서 데이터를 생성하거나 수정하면
  • 모델은 애플리케이션의 데이터인 데이터베이스, 상수, 변수등을 뜻한다. 사각형 모양의
  • 뷰즉, 모델을 기반으로 사용자가 볼 수 있는 화면을 뜻한다. 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 한다.
  • 또한 변경이 일어나면 컨트롤러에 이를 전달해야 한다.
  • 뷰는 inputbox, checkbox, textarea등 사용자 인터페이스 요소를 나타낸다.
  • 컨트롤러ex) 데이터를 aggregate하거나 액션에 대한 validate검사, 데이터 캐싱
  • mvc 패턴의 예시) React, Angular, Django등...
  • 컨트롤러는 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 하며 이벤트 등 메인 로직을 담당한다. 모델과 뷰의 생명주기도 관리하고 모델이나 뷰의 변경 통지를 받으면 이를 해석해 각각의 구성 요소에 해당 내용에 대해 알려준다.

2. MVP 패턴

MVC패턴에서 컨트롤러가 프레젠터(presenter)로 교체된 패턴

뷰와 프레젠터는 일대일 관계이기 때문에 MVC패턴보다 더 강한 결합을 지닌 디자인 패턴

3.MVVM패턴

MVC의 C에 해당하는 컨트롤러가 뷰모델(view model)로 바뀐 패턴

여기서 뷰모델은 뷰를 더 추상화한 계층이며(VM과 V의 관계 1:N), MVVM 패턴은 MVC 패턴과는

다르게 커맨드와 데이터 바인딩을 가지는것이 특징이다. 뷰와 뷰모델 사이의 양방향 데이터 바인

지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있따.

MVVN패턴의 예 : 뷰, 안드로이드

  • 커맨드V에 입력이 들어오면 커맨드패턴으로 VM에 명령 요청을 객체의 형태로 캡슐화하여 나중에이루어져있다.
  • 이 작업을 수행, 및 트리거할 수 있도록 하는 패턴, command, receiver, invoker, client로
  • 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법
  • 데이터 바인딩뷰모델을 변경하면 뷰가 변경된다.
  • 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법

MVC, MVP MVVM패턴 요약

이러한 패턴의 목표는 애플리케이션에 대한 시각화, 데이터 처리등 관리의 책임을 분리하는것

어떻게 나눌 것인가에 대한 해답중 하나

MVC MVP MVVM
V와 C는 1:n관계 V와 P는 1:1 관계 V와 VM은 1:n 관계
V는 C에 대한 참조를 못함 V는 P에대한 참조가능 V는 VM에대한 참조 가능
단위테스트 보통 단위테스트 어려움 단위테스트 하

profile

날아라김지원

@flykimjiwon

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!