Model View Controller
한줄 정리
사용자 인터페이스 , 데이터 및 논리 제어를 구현하는데 널리 사용되는 S/W 디자인 패턴
개요
Model : Data와 Business Logis을 관리합니다
View : Layout과 화면을 처리합니다
Controller : command, 명령을 Model과 View 부분으로 Routing 합니다
출처:MDN Web docs
파생 모델
1. MVVM(Model View ViewModel)
데이터 바인딩을 통하여 뷰와 뷰 모델을 연결하고 뷰 모델은 뷰화 모델 간의 상호작용을 쉽게 처리할 수 있게 도와줍니다. 주로 Web Client Application에서 사용됩니다
Model : Application의 데이터와 비즈니스 로직을 나타냅니다
View : User Interface를 나타냅니다
ViewModel: 뷰와 모델 사이에서 데이터 바인딩 및 상호작용을 관리합니다
View: 사용자 인터페이스를 나타냅니다
Presenter: View와 Model 사이의 중간 다리 역할을 합니다. Presenter은 View에서 발생한 이벤트를 처리하고, Model의 데이터를 업데이트하며, View에 결과를 표시합니다
3. MVW(Model View Whatever)
View와 Model 사이에 Controller나 중간 지점으로 사용되는 다른 구성 요소를 두는 패턴입니다. MVC, MVVM, MVP 등의 패턴들이 모두 MVW 패턴에 속한다고 볼 수 있습니다. MVW 패턴은 특정한 패턴을 사용하지 않고 유연하게 개발하는 데 적합합니다.
MVC(Model View Controller)는 사용자 인터페이스 , 데이터 및 논리 제어를 구현하는데 널리 사용되는 S/W 디자인 패턴입니다. S/W의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있으며, 이러한 "sepration of concerns", 관심사 분리는 향상된 관리와 업무의 분리를 지원합니다.
Model, View, Controller
The Model
모델은 앱이 contain, 포함해야 할 데이터가 무엇인지를 정의합니다. 데이터의 상태가 변경되면 모델을 usually, 일반적으로 뷰에게 notify,알리며(따라서 display가 필요에 따라 변경됩니다) 업데이트된 뷰를 제거하기 위해 다른 로직이 필요한 경우 컨트롤러에게 알리기도 합니다.
쇼핑 리스트 앱을 상상하고, 각 item의 이름, 수량, 가격의 list를 필요로 한다고 가정합시다.
모델은 목록 항목이 포함해야 할 데이터(항목, 가격 등)와 이미 있는 목록 항목을 지정합니다.
The View
View는 App이 어떻게 displayed 되는지 define합니다.
쇼핑 리스트 앱에서, View는 list가 user에게 어떻게 표현되고, display하기 위해 Model로부터 어떻게 데이터를 받아오는지 define합니다.
The Controller
Controller는 사용자의 입력에 대하여 Model과 View를 업데이트하는 logic이 포함됩니다.
쇼핑 리스트 앱에서, 입력 form과 버튼을 통해 항목을 추가하거나 삭제할 수 있습니다.
이는 Model을 업데이트 해야 하기 때문에, 입력은 Controller로 전송되고 Controller는 적절한 방식으로 모델을 조작한 후, 업데이트된 데이터를 뷰로 전송합니다.
이에 반해, 데이터를 다른 방식으로 표시하기 위해서만 View를 업데이트 할 경우,
예를 들어 항목의 이름을 오름차순으로 변경하고자 한다면
Controller는 Model을 업데이트 하지 않고도 직접 처리할 수 있습니다
MVC on web
HTML/JS 를 통한 App 제어 <-> HTML/CSS/ 로 구현된 사용자 인터페이스 - 웹 구조는 MVC와 매우 유사한 구조입니다. MVC는 더욱 엄격한 패턴을 강요합니다.
웹 초기에는 MVC architecture가 server-side로 구현되었습니다.
client는 form이나 link를 통해 update를 요청하며 update된 View를 browser에서 display하는 방식이었습니다. 하지만 최근에는 client-side data store의 등장(advent)과 XML HTTP Request를 통해 필요에 따라 부분적인 페이지만 업데이트가 가능해져서 더 많은 logic이 client로 이동하고 있습니다.
