기술면접 - MVC

MVC 패턴이란?

• MVC 패턴은 소프트웨어 디자인 패턴 중 하나로, 소프트웨어의 구성요소들을 Model, View, Controller 세 가지로 구분하는 아키텍처이다.
  Model은 애플리케이션의 데이터와 논리를 담당하며, View는 데이터를 사용자가 볼 수 있도록 시각적인 형태로 표현하는데 사용된다. Controller는 Model과 View를 연결하는 역할을 하며, 사용자의 입력에 따라 Model과 View를 업데이트한다.

MVC 패턴의 장단점

• 장점
  코드의 재사용성이 높아진다.
  유지보수성과 확장성이 좋아진다.
  개발자들 간의 협업이 쉬워진다.
  코드의 가독성이 향상된다.

• 단점
  복잡한 애플리케이션에서는 구현이 복잡해질 수 있다.
  Model과 View의 의존성이 높아져 결합도가 높아지는 문제가 발생할 수 있다.

MVC 패턴의 규칙(가이드라인)

• Model은 View와 Controller에 의존하지 않는다.
• View는 Model에 의존한다.
• View는 Model로부터 사용자마다 다르게 변경되는 데이터만 받아야 한다.
• Controller는 Model과 View에 의존한다.
• View, Model, Controller는 서로 직접적인 상호작용이 없어야 한다.
• View를 업데이트할 때는 직접 Model을 수정하지 않고, Controller를 통해 업데이트 해야 한다.
• Model을 업데이트할 때는 직접 View를 수정하지 않고, Controller를 통해 업데이트 해야 한다.

• MVC 패턴을 지키는 예시 코드

// Model 정의
const model = {
  data: 'Hello World!',
  updateData: function(newData) {
    this.data = newData;
  }
}

// View 정의
const view = {
  render: function(data) {
    const element = document.getElementById('output');
    element.innerText = data;
  }
}

// Controller 정의
const controller = {
  initialize: function() {
    // 초기화 시 View에 Model의 값을 전달하여 화면에 표시
    view.render(model.data);
  },
  updateData: function(newData) {
    // 사용자의 입력에 따라 Model 값을 업데이트하고, 변경된 값을 View에 반영
    model.updateData(newData);
    view.render(model.data);
  }
}

// 초기화 및 데이터 변경 예시
controller.initialize(); // 초기값 'Hello World!' 출력
controller.updateData('MVC Pattern'); // 변경된 값 'MVC Pattern' 출력

MVC 5계층

• 프레젠테이션 계층(Presentation Layer)
  역할 : 사용자 인터페이스
  기능 : 사용자가 선택할 수 있는 기능이 표시되어야 하고, 요청에 필요한 부가적인 정보 전달을 위한 입력 양식이 있어야 한다. 또한 전달된 자료를 효과적으로 보여주기 위한 프레젠테이션 로직이 포함된다. 하지만 비즈니스 로직이나 퍼시스턴스 계층에서 처리하는 일을 직접 수행하면 안되고, 각 계층의 컴포넌트와 직접적인 통신이 있어선 안된다.

• 제어 계층(COntrol Layer)
  역할 : 프레젠테이션 계층과 비즈니스 로직 계층을 분리하기 위한 컨트롤러 제공
  기능 : 전체 시스템의 설정 상태를 유지해야 하며, 이를 통해 어떤 요청이 들어왔을 때 어떤 로직을 통해 처리해야 하는지를 결정한다. 사용자 요청을 검증하고 로직에 요청을 전달하는 일과 로직에서 전달된 응답을 적절한 View에 연결해야 한다.

• 비즈니스 로직 계층(Business Logic Layer)
  역할 : 핵심 업무를 어떻게 처리하는지에 대한 방법을 기술하는 곳
  기능 : 비즈니스 로직에는 핵심 업무 로직의 구현과 그에 관련된 데이터의 적합성 검증 외에도 다양한 부가적인 구현이 추가된다. 트랜잭션 처리, 다른 계층과의 통신을 위한 인터페이스 제공, 해당 계층의 객채들간의 관계 관리 등을 할 수 있다.

• 퍼시스턴스 계층(Persistence Layer)
  역할 : 데이터 처리를 담당한다. 주로 데이터의 CRUD(Create, Read, Update, Delete) 연산을 수행한다.
  기능 : 관계형 정보를 저장하고 수정/삭제 및 이러한 작업에 필요한 질의문을 관리하고 받아온 관계형 정보를 개체화 시키는 일을 한다.

• 도메인 모델 계층(Domain Model Layer)
  역할 : 각 계층 사이에 전달되는 실질적인 비즈니스 객체
  기능 : 도메인 규칙을 구현하고, 데이터 유효성 검사, 비즈니스 로직 실행 등을 하며, 다른 계층들과 상호작용하는 인터페이스를 제공하여 전체 애플리케이션의 유지보수성 및 확장성을 높인다.

MVC 패턴 유효성 검증

• View
  비어있는 값, 타입에 대한 검증 등 사용자의 입력값에 대하여 확인할 수 있는 오류 사안을 JS로 검증한다.

• Model
  데이터, 로직에 대해 검증한다.

• Controller
  PathVariabla, RequestBody 등의 파라미터 존재 유무를 확인한다.

MVC 패턴의 대안

• MVVM 패턴
  View와 Model의 의존성을 줄이기 위해 중간에 ViewModel을 추가하고, 데이터 바인딩을 사용하여 자동으로 View를 업데이트하는 패턴

• MVP 패턴
  Mode, VIew, Presenter의 세 부분으로 구성되며, 각 부분의 역할을 명확하게 구분하여 유지보수와 테스트에 용이한 패턴

• FLUX 패턴
  React에서 사용하는 패턴으로, 단방향 데이터 흐름을 중심으로 구성되며, 상태관리를 쉽게할 수 있는 패턴

• VIPER 아키텍쳐
  View, Interactor, Presenter, Entity, Router로 구성되며, 모듈별로 분리된 아키텍쳐를 가지며, 각 모듈은 독립적으로 테스트 가능한 구조로 구성된 패턴

• RIBs 아키텍쳐
  Router, Interactor, Builder의 약자로, VIPER 패턴의 확장된 형태로 화면 이동 로직을 구성하며, 다양한 기능 모듈을 쉽게 추가할 수 있는 패턴