MVC패턴, MVP패턴, MVVM패턴 ★★★

1. MVC (Model-View-Controller) 패턴

모델(Model): 데이터와 비즈니스 로직을 담당합니다.

뷰(View): 사용자 인터페이스(UI)와 표시를 담당합니다.

컨트롤러(Controller): 모델과 뷰 간의 상호작용을 관리하고 사용자 입력을 처리합니다.

장점: 분리된 역할로 코드를 구성하여 유지보수와 확장이 쉽습니다.

단점: 복잡한 애플리케이션에서 컨트롤러가 비대해질 수 있고, 테스트하기 어려울 수 있습니다.

 

 

  1.1 MVC (Model-View-Controller) 패턴 예시

 

 웹 애플리케이션에서 사용자가 할 일 목록을 관리하는 기능을 구현한다고 가정합니다.

// 모델
class TodoModel {
  constructor() {
    this.todos = [];
  }

  addTodo(todo) {
    this.todos.push(todo);
  }

  getTodos() {
    return this.todos;
  }
}

// 뷰
class TodoView {
  constructor(controller) {
    this.controller = controller;
  }

  render(todos) {
    // 웹 페이지에 할 일 목록을 표시하는 로직
  }
}

// 컨트롤러
class TodoController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  addTodo(todo) {
    this.model.addTodo(todo);
    this.updateView();
  }

  updateView() {
    const todos = this.model.getTodos();
    this.view.render(todos);
  }
}

 

 

 

 

2. MVP (Model-View-Presenter) 패턴

모델(Model): 데이터와 비즈니스 로직을 처리합니다.

뷰(View): UI와 표시를 담당합니다.

프레젠터(Presenter): 컨트롤러와 유사한 역할로, 모델과 뷰 간의 상호작용을 관리하고 비즈니스 로직을 처리합니다. 뷰와 직접 상호작용합니다.

장점: 뷰와 모델의 완전한 분리로 테스트가 쉽고, 뷰가 비즈니스 로직에서 독립적입니다.

단점: 프레젠터가 뷰와 강하게 결합될 수 있어, 인터페이스 변경이 복잡할 수 있습니다.

 

 

2.1  MVP (Model-View-Presenter) 패턴 예시

웹 애플리케이션에서 사용자가 로그인하는 기능을 구현한다고 가정합니다.

// 모델
class UserModel {
  authenticateUser(username, password) {
    // 사용자 인증 로직
  }
}

// 뷰
class LoginView {
  constructor(presenter) {
    this.presenter = presenter;
  }

  showLoginResult(success) {
    // 로그인 결과를 화면에 표시하는 로직
  }

  getUsername() {
    // 사용자명 입력값 반환
  }

  getPassword() {
    // 비밀번호 입력값 반환
  }
}

// 프레젠터
class LoginPresenter {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  onLoginButtonClicked() {
    const username = this.view.getUsername();
    const password = this.view.getPassword();
    const success = this.model.authenticateUser(username, password);
    this.view.showLoginResult(success);
  }
}

 

 

3. MVVM (Model-View-ViewModel) 패턴

모델(Model): 데이터와 비즈니스 로직을 포함합니다.

뷰(View): UI를 나타냅니다.

뷰모델(ViewModel): 뷰와 모델 간의 중간 역할을 하며, 데이터 바인딩을 통해 뷰와 모델을 연결하고 비즈니스 로직을 처리합니다.

장점: 데이터 바인딩을 통한 자동화로 코드 양을 줄이고 유지보수를 쉽게 합니다. 뷰와 모델 간의 완전한 분리를 제공합니다.

단점: 학습 곡선이 높고, 복잡한 데이터 바인딩이 필요할 때 성능 문제가 발생할 수 있습니다.

 

 

3. MVVM (Model-View-ViewModel) 패턴 예시

웹 애플리케이션에서 사용자가 할 일 목록을 관리하는 기능을 구현한다고 가정합니다.

// 모델
class TodoModel {
  constructor() {
    this.todos = [];
  }

  addTodo(todo) {
    this.todos.push(todo);
  }

  getTodos() {
    return this.todos;
  }
}

// 뷰
class TodoView {
  constructor(viewModel) {
    this.viewModel = viewModel;
  }

  render(todos) {
    // 웹 페이지에 할 일 목록을 표시하는 로직
  }
}

// 뷰모델
class TodoViewModel {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  addTodo(todo) {
    this.model.addTodo(todo);
    this.updateView();
  }

  updateView() {
    const todos = this.model.getTodos();
    this.view.render(todos);
  }
}

 

 

4. 어떤 패턴을 선택해야 할까?

MVC: 간단한 프로젝트나 작은 규모의 애플리케이션에 적합합니다.
MVP: UI 로직이 복잡한 애플리케이션에 유용합니다.
MVVM: 데이터 중심의 복잡한 애플리케이션 또는 프런트엔드 프레임워크(예: Angular, React, Vue)와 함께 사용하는 것이 효과적입니다.