Group Study (2022-2023)/Node.js

[6주차] MVC 패턴

yun jaeeeun 2022. 11. 21. 02:24

MVC(모델-뷰-컨트롤러)

Model, View, Controller의 약자이다. 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다. 

MVC 소프트웨어 디자인 패턴의 세 가지 부분은 다음과 같이 설명할 수 있다.

모델

데이터와 비즈니스 로직을 관리한다. 모델은 모델의 상태에 변화가 있을 때 컨트롤러와 뷰에 이를 통보한다. 이와 같은 통보를 통해서 뷰는 최신의 결과를 보여줄 수 있고, 컨트롤러는 모델의 변화에 따른 적용 가능한 명령을 추가·제거·수정할 수 있다. 

레이아웃과 화면을 처리한다. 사용자가 볼 결과물을 생성하기 위해 모델로부터 정보를 얻어 온다.

컨트롤러

명령을 모델과 뷰 부분으로 라우팅한다. 모델에 명령을 보냄으로써 모델의 상태를 변경할 수 있다. 또는 컨트롤러가 관련된 뷰에 명령을 보냄으로써 모델의 표시 방법을 바꿀 수 있다. 


모델 뷰 컨트롤러 예시

간단한 쇼핑 리스트 앱이 있다고 상상해보자. 우리가 원하는 것은 이번 주에 사야할 각 항목의 이름, 개수, 가격의 목록입니다. MVC를 사용해 이 기능의 일부를 구현하는 방법을 설명할 것이다.

모델

모델은 앱이 포함해야할 데이터가 무엇인지를 정의한다. 데이터의 상태가 변경되면 모델은 일반적으로 뷰에게 알리며 (필요에 따라 디스플레이가 변경될 수 있다.), 업데이트된 뷰를 제어하기 위해 다른 로직이 필요한 경우 컨트롤러에게 알리기도 한다.

다시 쇼핑 리스트 앱에서 모델은 리스트 항목이 포함해야 하는 데이터 (품목, 가격, 등)와 이미 존재하는 리스트 항목이 무엇인지를 지정한다.

뷰는 앱의 데이터를 보여주는 방식을 정의한다.

쇼핑 리스트 앱에서 뷰는 항목이 사용자에게 보여지는 방식을 정의하며, 표시할 데이터를 모델로부터 받는다.

컨트롤러

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

예를 들어보면, 쇼핑 리스트는 항목을 추가하거나 제거할 수 있게 해주는 입력 폼과 버튼을 갖는다. 이러한 작업들은 모델이 업데이트되는 것이므로 입력이 컨트롤러에게 전송되고, 모델을 적절하게 처리한 다음, 업데이트된 데이터를 뷰로 전송한다.

항목을 알파벳순서로 정렬한다거나, 가격이 낮은 순서 또는 높은 순서로 정렬하는 것 처럼, 단순히 데이터를 다른 형태로 나타내기 위해 뷰를 업데이트하고 싶을 수도 있다. 이런 경우에 컨트롤러는 모델을 업데이트할 필요 없이 바로 처리할 수 있다.