- MVC
MVC는 Model + View + Controller를 뜻한다.
- Model : (데이터와 비즈니스 로직) 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분
- View : (레이아웃과 화면) 사용자에서 보여지는 UI 부분
- Controller : 사용자의 입력(Action)을 받고 처리하는 부분 (명령을 model과 view로 라우팅)
- MVC 동작원리
- Model은 데이터를 정의한다. 데이터가 변경되면 View에게 알리며, 다른 로직이 필요할 경우 Controller에게 알리기도 한다.
- View는 데이터를 보여주는 방식을 정의한다. 사용자에게 보여지는 방식을 정의하고, 데이터를 model로 부터 받는다.
- Controller는 입력에 대한 응답으로 model/view를 업데이트하는 로직을 포함한다.
- 웹에서의 MVC는 의식적으로 사용한 적이 없더라도, 프론트에서 데이터 통신을 하고 화면을 그렸다면 익숙한 패턴일 것이다.
하지만 mvc는 이러한 컴포넌트들이 더 엄격한 패턴을 따르도록 한다.
- Controller는 여러개의 view를 선택할 수 있는 1:n의 구조이다
- Controller는 View를 선택할 뿐 직접 업데이트 하지 않는다.
- MVC패턴의 장점은 널리 사용되고 있는 패턴이라는 점에 걸맞게 가장 단순하고, 보편적으로 가장 많이 사용되는 디자인패턴이다.
- View와 Model 사이의 의존성이 높아, 앱이 커질수록 복잡하고 유지보수가 어렵다는 단점이 있다.
- MVP
MVP는 Model + View + Presenter 를 뜻한다.
Model과 View는 MVC 패턴과 동일하고, controller 대신 presenter가 존재한다.
- Presenter : View에서 요청한 정보로 model을 가공하여 view에 전달한다.
- Presenter와 view는 1:1 관계이며 view와 model을 연결하는 역할이다.
- MVC 패턴의 단점이었던 view-model의존성을 해결하기 위해 나온 패턴이다.
- 어플리케이션이 복잡해질수록 View-presenter의존성이 높아진다
- MVVM
MVVM은 Model, View, View Model을 말하며, Model과 view는 다른 패턴과 동일한 역할을 한다.
- View Model과 View는 1:n 관계이다.
- View Model은 view에서 command 패턴으로 요청을 받고, view와 data binding하여 화면을 나타낸다- 이러한 패턴으로 view와 view model사이의 의존성을 없앴다. - 각각의 부분의 개별적 모듈화를 통하여 독립적으로 개발할 수 있다.- command패턴과, data binding요소로 인하여 뷰모델과 뷰의 관계를 끊을수 있다.
- 3가지 패턴의 차이점 !
MVP - MVC에서 컨트롤러가 Presenter로 교체된 형태이고 프리젠터는 뷰와 같은 레벨에 있다. 프리젠터는 뷰와 모델의 이벤트를 모두 받으면서 둘 사이의 상호작용을 조정한다.
MVVM - MVC에서 컨트롤러가 뷰모델로 교체된 형테이고 뷰모델은 UI레이어 아래에 위치한다. 뷰모델은 뷰가 필요로 하든 데이터와 커맨드 객체를 노출해 주기 때문에 뷰가 필요로하는 데이터와 액션은 담고 있는 컨테이너 객체로 볼 수도 있다.
- MVVM 패턴의 장점?
패턴의 차이점들을 예제로 접하지 않고 정의만 보았을때, 무엇이 다른지 굉장히 애매하게 보일수 있다.
하지만 프론트엔드에서 React개발자로서 react의 장점들을 살려 개발하다보면 많이 사용하고 있는 패턴이다.
정의를 정리해보면 "프론트엔드 화면 동작과 관련된 로직과, DB 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성하는 패턴"을 의미하기 때문이다. 따라서 나는 일종의 컴포넌트 모듈화, 리덕스 라이브러리등이 이러한 효과를 위해 같은 목적으로 쓰이는 방법이라고 이해한다.
- 모듈화를 할 수 있다. 즉 독립성이 보장된다
(UI, 비즈니스 로직, DB가 기능별로 모듈화 되어있어 역할 별 유닛테스트가 용이해진다)
- 가상돔을 사용한다.
(화면 전체를 다시 그리지 않고 프레임 워크가 정의한 방식에 따라 특정 돔 요소를 추가,삭제하는 방법으로 화면을 갱신할 수 있다)
- view가 data를 실시간으로 관찰한다
(observer 패턴을 이용하기 때문에 db를 관찰하고 자동으로 ui를 갱신해줄 수 있다)
