MVC

MVC Pattern

Table of Contents

• 1. What is MVC?
• 2. Motivation of MVC
• 3. Patterns in MVC

 

1. What is MVC?

MVC(Model-View-Controller)란 무엇일까?
Application을 세가지 역할로 구분한 개발 방법론이다. 아래의 그림과 같이 사용자가 Controller를 통해 Model을 변경하고, 변경사항은 View를 통해서 나타내게 된다. 가장 널리 사용되는 구조 중 하나이며 어플리케이션 개발, 웹 개발 등 다양한 분야에서 사용된다.
먼저 MVC는 각각 무슨 일을 하는지 간단하게 먼저 알아보자.

• Model: application object
  모델은 데이터를 담당한다.(== DB query를 다룬다) 즉, 데이터들의 변경에 대해서만 처리한다.
• View: UI (screen presentation)
  화면 출력과 관련된 코드들을 담당한다. html/css/js와 같은 코드들을 관리한다고도 할 수 있다.
• Controller: 유저의 입력에따른 UI변화를 정의
  사용자가 접근할 수 있는 지점이다. Controller에서 요청사항을 파악한 후 Model에 수정사항을 요청하고, 데이터를 View에 반영한다.

MVC Flow

위의 그림을 참고하여 시나리오를 써보자.

1. User는 Controller를 통해서 변경사항을 요청한다.
2. Controller는 변경사항을 확인하고, Model에 수정사항을 요청한다.
3. Model의 변경사항을 나타낼 View를 선택하고 전달한다.
4. View는 User에게 UI를 전달한다.

어느정도 MVC 에 대해서 이해하였으리라 생각한다. 그럼 우리는 왜 MVC를 배우고, 왜 그렇게 중요시 되어지는지 알아보도록 하자.

 

2. Motivation of MVC

하나의 데이터가 여러 뷰들을 변경시키거나, 여러 뷰들을 복합적으로 사용해야하는 경우가 있다.
이런 복잡한 변경에도 다른 로직들은 영향을 받지 않았으면 한다.

해결책으로 책임을 분리시키키기로 한 것
Presentation 과 Control logic을 분리하였고, 여러 뷰들이 같은 데이터 모델에 접근할 수 있는 방법을 고안해냈다.
그리고 클라이언트들을 구현, 테스트 유지보수가 쉽게하도록 만든 방식이다.

라고 한다면, 누군가는 이해했으리라 생각한다.
하지만 누군가는 이 대답이 너무 교과서적인 대답이고, 너무 간단하게 설명한게 아닌가 생각이 들 수 있다.

여기에 대한 답은 이 패턴없이 앱을 만들어본 경험이 있냐, 그리고 이 패턴을 적용한 이후로 개발해본 경험이 있냐로 대답이 될 수 있다고 생각한다.

여기까지 잘 이해가 되었다면, 아래 다이어그램을 통해 조금 더 자세히 알아보자.

MVC

처음 나온 그림과 상이함에 이해가 가지 않을 수 있다. 처음 나온 그림은 전체 진행을 알려주기위한 그림이었다면, 지금 본 그림은 실제로 어떻게 상호작용을 해야하는지 나타내주는 그림이다.

• Model은 데이터를 담당한다. DB와 연결되어 있다. 사용자가 변경하려는 데이터 값에 대해서만 통제해야한다.
  Model은 가능한한 Controller와 View에 대한 정보를 갖지 말아야한다.
  변경사항 발생 시, Observer pattern을 이용하여 변경 통지에 대한 전달만 한다.
• View는 UI를 담당한다. Model이 무슨 일을하는지 알아선 안된다. Model이 정보를 넘겨주면 그대로 출력하는 역할만 하여야 한다.
• Controller는 이벤트 처리를 담당한다. 그리고 Model과 View를 연결하는 다리역할이다. 모델에 변경사항을 알리거나, View들을 선택해주기도 한다. 메인 로직역할이며, 의존성이 높다.

 

3. Patterns in MVC

Design Pattern 설명 에서 잠깐 언급했듯이, MVC는 Architecture Pattern 이기도 하다. 그리고 두개 이상의 디자인 패턴이 적용된 복합 패턴이기도 하다.

MVC에는 다양한 디자인 패턴이 적용되어 있고, 사용자에 따라 추가적인 패턴이 더 적용될 수 있지만, 여기서는 세 가지 대표적 패턴들에 대해서만 얘기하고 넘어가도록 하겠다.

• Strategy pattern
  controller와 view는 1:n 으로 매칭이 된다. 이 때, Controller가 여러 View들을 사용하기 위해 적용한다. view들이 action을 갖지않으려면 필요하다.
• Observer pattern
  View - Model 사이의 결합을 느슨하게(디커플링) 하기 위해 적용한다. Model에서 변경사항을 Observer pattern을 이용해 view들에게 전달하기만 한다.
• Composite pattern
  하나의 화면도 여러 단계로 구성되어질 수있다. 하나의 윈도우안에 여러 패널이 존재하고, 텍스트 메세지와 여러개의 버튼들이 존재할 수 있다. 이런 복합체인 경우에 Composite pattern을 이용해서 전체가 변경되지 않고, 접근하는 component만 변경요청을 하면 나머지는 패턴에 맞게 적절하게 변경되는 것을 의미한다.

POS기나 다른 예제들을 통해서 설명했으면 조금 더 수월하게 설명할 수 있었으리라 생각하지만, 아쉽게도 그 부분까지는 작성하지 못했다.

 

이미지, 문서 참고)
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=cestlavie_01&logNo=221039985405
https://opentutorials.org/course/697/3828
https://developer.mozilla.org/ko/docs/Glossary/MVC