3월 4주차 - MVC ~ MVVM

[Mins00oo]

1.1.8 MVC 패턴

💡 MVC패턴은 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어져 있는 패턴

1. User가 Controller를 조작
2. Controller는 Model을 통해 데이터를 가져옴
3. 가져온 데이터를 바탕으로 View를 제어해서 User에게 전달

Model

💡 애플리케이션의 데이터, 정보를 나타냄

• 사용자가 편집하길 원하는 모든 데이터를 갖고 있어야 한다.
  • 화면안의 네모박스에 글자가 있다면, 박스의 위치, 글자 내용 등을 다 알고 있어야 함.
• 뷰나 컨트롤러에 대해 어떤 정보도 알지 않아야 한다.
  • 데이터 변경이 일어났을때 모델에서 직접 UI를 조정해서 수정할 수 있도록 View를 참조할 수 있는 내부 속성값을 가지면 안된다.

View

💡 inputbox, checkbox 등과 같은 사용자 인터페이스 요소를 나타냄

• 데이터 및 객체의 입력, 그리고 보여주는 출력을 담당
• 데이터를 기반으로 사용자들이 볼 수 있는 화면
• 모델이 가지고 있는 정보를 따로 저장하지 않아야 한다.
  • View에 정보를 보여주기 위해 Model에서 데이터를 받을건데 그 데이터를 임의의 View 내부에 저장해선 안된다.
• 모델이나 컨트롤러와 같이 다른 구성요소들을 몰라야 한다.
  • View는 데이터를 받으면 화면에 표시해주는 역할만 가진다.
• 변경이 일어나면 변경통지에 대한 처리방법을 구현해야만 한다.
  • View에서는 화면에서 표시된 내용에 변경이 일어나면 모델에 전달해서 변경해야 한다.

Controller

💡 데이터와 사용자 인터페이스 요소들을 잇는 다리역할

• 모델이나 뷰에 대해 알고 있어야 한다.
  • 모델이나 뷰가 서로 존재를 모르고 변경을 외부로 알리는데, 이를 컨트롤러가 중재하기 위해 모델과 그에 관련된 뷰에 대해 알고 있어야 한다.
• 모델이나 뷰의 변경을 모니터링 해야한다.

1.1.9 MVP 패턴

💡 MVC 패턴으로부터 파생되었으며 MVC의 C가 P(Presenter)로 교체된 패턴

Model

💡 데이터와 비즈니스 로직을 처리하는 부분

• 데이터베이스와 상호작용하여 데이터를 CRUD 수행

View

💡 사용자 인터페이스를 담당하는 부분

• Model에서 전달받은 데이터를 시각적으로 표현하며, 사용자와 상호 작용

Presenter

💡 View와 Model사이의 상호 작용을 관리하는 부분

• 사용자의 입력을 받아 Model에 데이터 처리를 요청하고 Model로부터 결과를 받아 View에 전달
• View에 대한 참조를 가지며, View와 직접적으로 통신한다.

MVC와의 차이점

• Presenter는 View와 직접적으로 통신하며, View에 대한 참조를 갖는다. 이로 인해 서로 간의 상호 작용이 더 강하게 결합되어 있다.
• Presenter는 상태 및 로직을 관리한다. 이로 인해 View는 오직 사용자 인터페이스와 관련된 로직만 처리하게 되며, View의 책임이 축소된다.

1.1.10 MVVM 패턴

💡 프론트엔드 애플리케이션 아키텍처의 한 종류

• 데이터와 UI를 분리하여 관리하고자 하는 목적을 갖고 있다.

Model

💡 데이터와 비즈니스 로직을 담당하는 구성 요소

• 애플리케이션의 핵심적인 데이터 처리와 관련된 기능들을 포함

View

💡 사용자 인터페이스를 담당하는 요소

• ViewModel의 상태와 바인딩되어 있어, ViewModel의 상태 변화가 발생하면 자동으로 View가 갱신된다.

ViewModel

💡 Model과 View 사이의 연결 역할을 담당하는 구성 요소

• Model로부터 데이터를 가져와서 이를 View에게 전달하는 역할을 한다.
• View와 데이터를 바인딩하며, 사용자의 입력을 받아 Model의 데이터를 변경