MVC (Model - View - Controller) pattern 개념 공부 및 정리

🎨 MVC pattern이란?

모델 뷰 컨트롤러 (model-view-controller, MVC) 패턴은 소프트웨어 공학에서 사용되는 디자인 패턴입니다. 

디자인 패턴은 소프트웨어 공학의 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용이 가능한 해결책을 의미한다고 합니다.

 

저는 간단하게 개발 과정에서 쌓아온 설계 노하우를 축적해 이름을 붙여서 새로이 이름을 붙여 이후에도 재사용 하는 개발 방법론에 대한 규약이라고 이해했습니다.

 

즉, 특정한 코드나 프로그램이 아니라 효율적인 코드 작성과 프로그램을 만들기 위한 방법론을 디자인 패턴이라고 하는 것이죠.

 

오늘 정리할 MVC pattern은 이러한 디자인 패턴의 한 종류로 Model, View, Controller 세 개의 구성 요소로 나누어서 프로젝트를 진행하는 방식을 의미합니다.

출처 MDN web docs

Model, View, Controller의 역할을 요약하면 다음과 같습니다.

---

💽 모델 (Model)

데이터 자체 또는 데이터를 다루는 객체 뿐만 아니라 프로그램에서 다루는 요소들을 개념적으로 정의한 것을 의미합니다. Domain이라고 불리기도 한다고 합니다.

 

모델의 규칙

1. 사용자가 편집하기를 원하는 모든 데이터를 갖고 있어야 한다.
2. 뷰나 컨트롤러에 대해서 어떠한 정보도 몰라야 한다.
3. 변경이 일어나면, 변경 통지에 대한 부분이 구현되어야 한다.

---

💻 뷰 (View)

뷰는 사용자가 보게 되는 레이아웃과 디스플레이를 처리하여, 다양한 사용자 입출력의 과정 및 결과를 보여주기 위한 인터페이스의 개념에 해당합니다.

요약하면, 어플리케이션이 사용자에게 보여질지 정의하는 부분으로 데이터 및 객체의 입력을 받거나 데어터를 보여주는 부분을 담당합니다.

 

뷰의 규칙

1. 모델이 가지고 있는 데이터를 따로 저장해서는 안된다.
2. 모델이나 컨트롤러와 같이 다른 부분에 대해 어떠한 정보도 몰라야 한다.
3. 변경이 일어나면, 변경 통지에 대한 부분이 구현되어야 한다.

---

🎮 컨트롤러 (Controller)

데이터와 사용자 인터페이스(UI, user interface) 즉, 모델과 뷰를 연결하는 다리 역할을 수행합니다. 

모델을 업데이트하는 로직을 포함하고 어플리케이션의 사용자로부터 새롭게 받은 입력에 대응하는 작업을 처리하는 부분입니다.

 

컨트롤러의 규칙

1. 모델이나 뷰에 대해 알고있어야 한다.
2. 모델이나 뷰의 변경 사항을 모니터링 해야 한다.

---

MVC pattern을 사용하는 이유?

MVC pattern에 따라 프로젝트를 3가지 부분으로 나누어 구현하게 되는 경우 분업을 효율적으로 할 수 있어 각자 맡은 바에만 충실하게 개발에 집중할 수 있습니다.

 

그에 따라서 개발된 어플리케이션의 유지/보수성을 높일 수 있고, 확장성 및 유연성 또한 증가하게 될 것이고, 이러한 장점들로 인해서 MVC pattern을 채택하여 개발을 진행한다고 합니다.

---

MVC pattern의 장점

역할별로 분리된 코드를 다루기 때문에, 유지 보수가 편리하고 확장성이 증가합니다.

새로운 도메인이 필요한 경우 Model 파트를 추가적으로 구현하면 됩니다.

---

MVC pattern의 단점

Controller가 비대해질 수 있다고 합니다.

• 결국 세 개의 파트로 분리해서 구현하지만, Model과 View는 연관되어있고
• 소프트웨어가 점점 복잡해져, domain(Model)이 증가하는 경우 중개자 역할을 하는 Controller가 비대해질 수 밖에 없습니다.
• 이는 Model, View 어느 쪽에 구현해야 할지 애매한 부분을 모두 Controller에 구현하기 때문입니다.

 

제가 공부하고 있는 nodejs의 express web framework 또한 MVC pattern을 사용하여 개발을 할 수 있는 프레임워크의 예시이기 때문에, 겸사겸사 정리해보게 되었습니다.

 

추후에 공부하는 내용을 추가해 보도록 하겠습니다! 😀

---

References

https://velog.io/@ljinsk3/MVC-%ED%8C%A8%ED%84%B4

MVC 패턴