MVC 패턴에 대하여

백나라·2023년 12월 22일

Node.js 기반의 Express 프레임워크와 관련하여 MVC(Mode-View-Controller) 패턴에 대해 간략히 살펴보겠습니다. 먼저, 디자인 패턴은 특정 반복되는 문제에 대한 재사용 가능한 해결책을 제공하는 구조화된 패턴입니다. 다양한 디자인 패턴 중에서 MVC 패턴은 Model, View, Controller의 역할에 중점을 둔 구조화된 디자인 패턴입니다.

Model: 데이터와 관련된 처리를 하는 역할

View: 사용자에게 보여지는 부분

Controller: 모델과 view를 이어주는 부분

Express 또한 MVC 패턴을 따르며 명시적으로 모델, 뷰, 컨트롤러가 분리되어 있습니다. 서버 기반에서 사용자 요청에 대한 응답 및 데이터 처리 방식이 MVC 패턴을 기반으로 설계되어있는데, 각각의 Model, View, Controller는 서로 다른 관심사를 가지고 있어 명확한 역할 분담이 이루어지고 있습니다.

사용자가 google 검색창에 “후드집업” 키워드를 검색합니다.
해당 요청에 대한 라우팅이 동작하며 데이터베이스로에 관련 데이터를 요청해서 가져옵니다.
“후드집업” 검색에 대한 결과 데이터를 템플릿엔진에 전달합니다.
템플릿엔진이 해당 데이터를 반영한 UI를 처리하면 그 UI 결과를 사용자 브라우저에 응답합니다.

Model

입력받거나 저장되어있는 데이터에 대한 모든 처리를 담당
DB에 저장하고 DB에서 조회하며 DB를 제어

View

사용자가 애플리케이션 내에서 상호 작용하는 화면
HTML 템플릿 파일
템플릿 엔진(ejs, jade 등)을 사용하여 동적으로 뷰를 생성하고 렌더링
최종적으로 만들어진 html을 controller에 전달

Controller

클라이언트의 요청과 응답에 대한 처리
Model과 상호작용하며 주소체계(URL)를 통해 요청과 응답을 제어(routes)

👩‍💻 MVC 패턴의 규칙

MVC 패턴을 제대로 사용하면 비즈니스 로직에 대한 영역과 UI 영역이 분리되므로 서로 영향을 주지 않고 독립적으로 유지될 수 있어서 유지보수가 용이해집니다. 특히 프로그램이 복잡해지고 코드가 길어질수록 이러한 원칙은 더욱 중요해집니다.

Model은 컨트롤러와 뷰에 의존하지 않아야 합니다.
- Model 내부에 컨트롤러와 뷰에 관련된 코드가 있으면 안됩니다.
  - 데이터에 관련된 부분만 처리하며 언제든 깔끔하고 정제된 데이터를 꺼내 쓸 수 있도록합니다.
- Model은 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 합니다.
- 변경이 일어나면, 변경 통지에 대한 처리 방법을 구현해야 합니다.
VIew는 모델에만 의존해야 하며, Model로부터 데이터를 받을때, 반드시 Controller를 통해 받습니다.
- Model이 가지고 있는 정보를 따로 저장해서는 안됩니다.
- View에는 Model이나 컨트롤러에 관련된 코드는 있으면 안됩니다.
- 모델이나 뷰는 서로의 존재를 모르고 있으며 변경 사항을 외부로 알리고 수신하는 방법만 있습니다.
- Controller의 중재를 통해 Model롭 부터 데이터를 받습니다.
VIew가 Model로부터 데이터 받을 때 사용자마다 다르게 보여주어야 하는 데이터에 대해서만 받아야 합니다.
- VIew는 사용자에게 공통적으로 보여지는 UI와 다르게 보여져야하는 UI를 합쳐져서 만들어지는 화면입니다.
- 공통적으로 보여지는 부분에 대한 정보는 Model로부터 받는것이 아닌 VIew가 자체적으로 가지고 있어야 하는 정보여야합니다.
Controller에는 Model과 view의 코드가 있어도 됩니다.
- 중재자로써 Model이나 View의 변경을 모니터링 해야 합니다.