[Node.js] MVC 패턴이란?

앱 런칭을 위해 PM + 서버팀 개발을 위해 기본적인 것들을 공부하며 기록중!

✅ MVC 란?

model - view - controller

1. 모델: 데이터와 비즈니스 로직을 관리
2. 뷰: 레이아웃과 화면을 처리
3. 컨트롤러: 명령을 모델과 뷰 부분으로 라우팅

모델

정보들의 가공을 책임지는 컴포넌트

앱이 포함해야할 데이터가 무엇인지를 정의

데이터의 상태가 변경되면 모델을 일반적으로 뷰에게 알리며, 간혹 컨트롤러에게 알리기도 함

쇼핑 리스트 앱에서 모델은 리스트 항목이 포함해야 하는 데이터 (품목, 가격, 등)

이미 존재하는 리스트 항목이 무엇인지를 지정

모델의 규칙

• 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 함
• 뷰나 컨트롤러에 대해서 어떠한 정보도 알지 않아야 함
• 변경이 일어나면, 변경 통지에 대한 처리방법을 구현해야 함

뷰

사용자에게 보여주는 부분, 즉 유저 인터페이스를 의미

앱의 데이터를 보여주는 방식을 정의

쇼핑 리스트 앱에서 뷰는 항목이 사용자에게 보여지는 방식을 정의

표시할 데이터를 모델로부터 받음

뷰의 규칙

• 모델이 가지고 있는 정보를 따로 저장해서는 안됨
• 모델이나 컨트롤러와 같이 다른 구성 요소를 몰라야 함
• 변경이 일어나면, 변경 통지에 대한 처리방법을 구현해야 함

컨트롤러

모델(Model)과 뷰(View) 사이를 이어주는 브릿지(Bridge) 역할을 의미

앱의 사용자로부터 입력에 대한 응답으로 모델과 뷰를 업데이트 하는 로직을 포함

예를 들어, 쇼핑 리스트는 항목을 추가하거나 제거할 수 있게 해주는 입력 폼과 버튼을 가짐

이러한 액션들은 모델이 업데이트되는 것이므로 입력이 컨트롤러에게 전송되고, 모델을 적당하게 처리한다음, 업데이트된 데이터를 뷰로 전송

단순히 데이터를 다른 형태로 나타내기 위해 뷰를 업데이트하고 싶을 수도 있음 (예를 들면, 항목을 알파벳순서로 정렬한다거나, 가격이 낮은 순서 또는 높은 순서로 정렬)

이런 경우에 컨트롤러는 모델을 업데이트할 필요 없이 바로 처리할 수 있음

컨트롤러의 규칙

• 모델이나 뷰에 대해서 알고 있어야 함
• 모델이나 뷰의 변경을 모니터링해야 함

✅ MVC 과정

1. 사용자가 ROUTER통해 controller를 조작
2. model을 통해 데이터를 가져옴
3. 업데이트된 정보로 View를 제어
4. View는 다시 Controller로 전달
5. 사용자에게 전달

✅ MVC 패턴의 장점

1. 비즈니스 로직과 UI로직을 분리하여 유지보수를 독립적으로 수행가능
2. Model과 View가 다른 컴포넌트들에 종속되지 않아 유지보수성, 애플리케이션의 확장성, 유연성 증가
3. 중복코딩이 없음

✅ MVC 패턴의 한계

MVC패턴에서 View는 Controller에 연결되어 화면을 구성하는 단위 요소이므로 다수의 View를 가질 수 있음. 그리고 Model은 Controller를 통해서 View와 연결되지만, Controller에 의해서 하나의 View에 연결될 수 있는 Model도 여러 개가 될 수 있어 View와 Model이 서로 의존성을 띄게 됨. 즉, Controller에 다수의 Model과 View가 복잡하게 연결되어 있는 상황이 발생할 수도 있음.

✅ MVC 패턴 요약

Model - 백그라운드에서 동작하는 비즈니스 로직(데이터) 처리

View - 정보를 화면으로 보여주는 역할

Controller - 사용자의 입력 처리와 흐름 제어 담당. 화면과 Model과 View를 연결시켜주는 역할

[참고자료]

https://developer.mozilla.org/ko/docs/Glossary/MVC

https://cocoon1787.tistory.com/733