MVC 패턴

MVC 패턴이란?

애플리케이션을 Model-View-Controller의 세 가지 주요 역할로 나누어 코드 구조를 설계하는 소프트웨어 디자인 패턴

• Model
  • 애플리케이션의 데이터와 비즈니스 로직을 담당
  • DB와의 상호작용과 데이터 유효성 검사 등 포함
  • 사용자에게 데이터를 제공하는 로직은 포함 X
• View
  • 사용자 인터페이스를 담당
  • Model에서 받은 데이터를 화면에 표시
  • Model에 독립적이기 때문에 사용자 인터페이스가 바뀌어도 Model에 영향 X
• Controller
  • 애플리케이션 흐름을 제어하는 담당
  • Model과 View를 연결
  • 사용자의 요청을 받아서 Model을 업데이트하거나, Model에서 데이터를 가져와서 View에 전달

 

장단점

컴포넌트 간의 결합도를 낮추고 관심사를 분리하여 각 구성 요소를 독립적으로 관리하므로

• 유지보수성 ↑: 필요 시 특정 부분만 수정 가능
• 테스트 용이성 ↑: 개별적으로 테스트 가능
• 협업 효율성 ↑: 명확한 역할 분담 가능
• 재사용성 및 확장성 ↑: 기능을 추가하거나 변경할 때 구조적인 변경 없이도 쉽게 확장 가능
• 러닝 커브 ↑: 초보자에게는 어려울 수 있음
• 복잡성 ↑: 프로젝트의 규모가 커질수록 복잡한 의존성이나 이벤트 처리가 발생할 수 있음
• 유연성 ↓: 작은 규모의 프로젝트에서는 분할이 과하게 발생하여 프로젝트 유연성이 감소할 수 있음

 

MVC 패턴을 지키는 방법

export class Model {
  getData() {
  }
}	

export class View {
  printModel(model) {
  }
}

export class Controller {
  start() {
     const model: Model = new Model(); 
     const view: View = new View();
     view.printModel(model);
   } 
}

• Model
  • Controller와 View에 의존하지 않는다. (Model에 Controller와 View에 관련된 코드X)
• View
  • Model에만 의존하고 Controller에는 의존하지 않는다.
  • Model로부터 데이터를 받을 때는 사용자마다 다르게 보여줘야 하는 데이터에 대해서만 받는다.
  • Model로부터 데이터를 받을 때 반드시 Controller에서 받는다.
• Controller
  • Model과 View에 의존해도 된다.

 

source: https://www.youtube.com/watch?v=ogaXW6KPc8I