MVC 패턴의 개념과 장단점

[anuu0916]

개념

• Model View Controller의 약자로, 코드를 구성할 때 각각의 역할에 따라 코딩하는 디자인 패턴입니다.
• Model : 응용 프로그램에 특정한 데이터를 캡슐화하고 해당 데이터를 조작하고 처리하는 논리와 계산: 을 정의
• View : 콘텐츠를 보여주는 화면
• Controller : 뷰 객체와 하나 이상의 모델 객체 사이에서 중개자 역할. 사용자의 이벤트에 따라 모델 객체 또는 뷰를 변화시킴

장단점

• 장점 : 비교적 간단한 패턴으로 구조파악과 확장을 쉽게 할 수 있습니다.
• 단점 : 뷰와 모델의 완벽한 분리가 어렵고 앱이 커지면 컨트롤러의 코드량이 커져 유지보수 하기가 힘듭니다.

출처 : https://hongz-developer.tistory.com/132

[anuu0916]

MVC 패턴의 동작 순서는 아래와 같습니다.

1. 사용자의 Action들은 Controller에 들어오게 됩니다.
2. Controller는 사용자의 Action을 확인하고, Model 을 업데이트 합니다.
3. Controller는 Model를 나타내줄 View를 선택합니다.
4. View는 Model을 이용하여 화면을 나타냅니다.

특징

• Controller는 여러개의 View를 선택할 수 있는 1:n의 구조입니다.
• Controller는 View를 선택할 뿐 직접 업데이트 하지는 않습니다. (View는 Controller를 알 수 없음. )

장점 가장 단순하고 직관적이다.

단점 MVC 패턴의 단점은 View와 Model 사이의 의존성이 높다는 점. View와 Model의 높은 의존성은 어플리케이션이 커질수록 복잡해지고 유지보수가 어려워집니다.

출처 : https://donggyu9410.medium.com/%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-mvc-mvvm-%EB%B9%84%EA%B5%90-1a4e6c1c860a

[developer-sora]

프론트엔드에서의 MVC 패턴

MVC는 프론트엔드라는 분야가 생기기도 전에 세상에 등장했다. 그렇기 때문에, 초창기 웹서비스에서의 MVC는 M(Model)은 데이터베이스, V(View)는 html, css, javascript를 포함한 클라이언트, 그리고 C(Controller)는 라우터를 통해 데이터를 처리하고 새로운 html 파일을 만들어서 보여주는 영역을 말했다.

일반적으로 MVC에 대해 이야기하면 백엔드에 대한 개념 위주로 설명하는데, 프론트엔드에서의 MVC는 백엔드와 다르다. 시간이 흐르면서 백엔드에서 더 이상 html파일을 전부 만들지 않아도, 프론트엔드 쪽에서 ajax라는 기술을 통해서 html의 변경이 가능해졌다. 백엔드 역할의 일부가 프론트엔드 쪽으로 넘어오면서 프론트엔드의 MVC 개념이 생기게 된다.

M(Model)은 ajax를 통해 받은 데이터와 그 데이터를 통해 변경될 수 있는 상태를 말하고, V(View)는 html, css로 만들어진 말 그대로의 화면을 말하고, C(Controller)는 javascript가 View에서 호출되는 이벤트를 통해 서버에 데이터를 전달하고, 다시 전달받은 데이터로 Model을 변경해주는 역할을 한다.

MVC이후에는 react, vue, angular등을 라이브러리와 프레임워크를 사용하면서 Controller도 직접 조작할 필요없이, 화면에 보여주는 ViewModel만 변경해주면 된다는 개념에서 등장한 MVVM이 나왔다. 이후에 등장하는 MV* 의 아키텍처는 대부분 MVC를 기반으로 나온 것이다.

실제 코드

// Model
let state = 0;
const $button = document.querySelector('button');

// View
const render = () => {
  document.body.innerHTML = state;
};

// Controller
const setState = newState => {
  state = newState;
  render();
};

$button.addEventListener('click', () => {
  setState(state + 1);
});

https://velog.io/@luna238/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%9D%98-MVC

[SW-H]

View와 Model의 높은 의존성의 의미 : 의존성이 낮다면 view에서 model의 구조를 몰라도 관계없이 수정가능해야 하는데 그렇지 않다