MVC(Model, View, Controller) Pattern

1. What is MVC Pattern?

3가지 요소(Component)로 구성되는 패턴이다.

1. Model
2. View
3. Controller

이는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다.

MVC 패턴을 도입하면 도메인(Business logic)영역과 UI 영역이 분리되므로 서로 영향을 주지 않고 유지보수가 가능함.

2. Structure of MVC Pattern

Structure of MVC Pattern

2.1. Model

데이터(data)의 가공, 비즈니스 로직(Business Logic)을 담당하는 요소(Component)이다.

• 데이터베이스, 계산 로직 또는 다른 데이터 소스와의 상호 작용을 관리한다.
• 비즈니스 로직을 처리한 모델의 변경사항을 컨트롤러와 뷰에 전달한다.
• 모델(Model)은 다음과 같은 규칙을 가진다.
  • 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 함.
  • 뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 함. (독립성)
  • 변경이 일어나면, 변경 통지에 대한 처리 방법을 구현해야 함.

2.2. View

사용자에게 보여지는 부분, 즉 유저 인터페이스(User Interface)를 담당하는 요소(Component)이다.

• 하나의 MVC 패턴 내에 여러 개의 뷰가 존재할 수 있다.
• 모델(Model)에게 질의하여 데이터를 전달받고, 받은 데이터를 화면에 보여주는 역할을 한다.
• 뷰(View)은 다음과 같은 규칙을 가진다.
  • 모델이 가지고 있는 정보를 따로 저장해서는 안됨.
  • 모델이나 컨트롤러와 같이 다른 구성 요소들을 몰라야 함. (독립성)
  • 변경이 일어나면 변경통지에 대한 처리방법을 구현해야 함.

2.3. Controller

모델과 뷰 사이를 연결하는 역할을 한다.

• 모델과 뷰는 서로의 존재를 모른다. 변경 사항을 외부로 주고받는 방법으로 알 수 있다. 이 방법에 사용되는 것이 컨트롤러이다.
• 모델과 뷰에 대해 알고 있다.
• 변경 내용이 있다면 그것을 다른 요소에 알린다.
• 컨트롤러(Controller)는 다음과 같은 규칙을 가진다.
  • 모델이나 뷰에 대해 알고 있어야 함.
  • 모델이나 뷰의 변경 내용을 알아야 함.

3. Why MVC Pattern?

아무리 최초 설계를 잘한 시스템이라도, 유지 보수가 발생하기 시작하면, 각 기능 간의 결합도(Coupling)가 높아진다.

이러한 상황은 필연적으로 발생하기 마련이다. (비즈니스 목적의 변화, 최초 설계자의 부재 등)

시스템의 결합도가 높아지게 되면, 유지보수 작업을 할 때 다른 비즈니스 로직에 영향을 미치게 된다. 따라서 사소한 코드 변화가 의도하지 않은 버그를 유발할 수 있다.

디자인 패턴(Design Pattern)은 이렇게 높아진 결합도를 낮춤으로써 해결할 수 있다.

MVC 패턴처럼 3가지 요소를 분리함으로써, 유지보수 시에도 특정 요소(Component)만 수정하면 되기 때문에 보다 쉬운 시스템 변경이 가능하다.

예시)

• 화면의 변경 → 뷰를 수정하여 반영함.
• 데이터나 비즈니스 요건의 변경 → 모델을 수정하여 반영함.
• 뷰, 모델 변경 시 → 컨트롤러도 그에 맞게 수정하여 반영함.

4. Limitation of MVC Pattern

아래 사진을 보자.

Massive-View-Controller

• 다수의 뷰와 모델이 컨트롤러를 통해 연결된다.
• 이는 컨트롤러가 불필요하게 커지게 된다.
• 이를 Massive-View-Controller 현상이라고 한다.

이를 보완하기 위해 다양한 패턴이 파생됐다.

• MVP 패턴
• MVVM 패턴
• Flux
• Redux
• RxMVVM

5. MVC Pattern Example & Application

• 서버 사이드 렌더링으로 많이 사용되는 JSP, Thymeleaf 기술 스택을 통해 MVC 패턴을 적용할 수 있다.
• java를 사용하여, MVC패턴을 적용한 간단한 예제를 살펴보자. 
• 참고로, JSP 페이지는 주로 뷰(View) 부분을 담당하여 사용자 인터페이스를 처리한다.

5.1. 시나리오

1. 브라우저 화면에서 서버로 데이터를 전달함.
2. 컨트롤러에서 데이터를 전달받아, 서비스에게 데이터를 전달함.
3. 서비스는 레포지토리(Repository)를 이용하여, 전달받은 데이터를 데이터베이스에 저장함.
4. 저장한 후, 컨트롤러는 서비스를 통해 데이터를 다시 조회함.
5. 모델(Model)에서 조회한 데이터를 뷰(View)에게 전달함.
6. 화면에 변경이 발생하는지 확인함.

시나리오.

 

5.2. Packages (추후 업로드 예정..)

 

 

 

 

- References

https://junhyunny.github.io/information/design-pattern/mvc-pattern/#reference