MVC 패턴에 관하여

Error Coder·2023년 8월 20일
0

Nodejs로 새 프로젝트를 같이 준비 중이다.
그러나 Django로 코딩을 입문한 나는 MVC 패턴에 대해 전혀 알지 못했고 지금 프로젝트도 친구의 리드 하에 겨우겨우 쫓아가고 있는 신세다.

Nodejs는 Django와 다른 MVC 패턴으로 Mode-View-Controller 패턴으로 이루어진다고 한다.

모델-뷰 까지는 이해가 됐지만 컨트롤러 부분에서 이해가 잘 되지 않았다.
컨트롤러를 api 하나하나를 다루는 핸들로 이해하면 쉽다고 하였지만 체감이 되지 않았다.
그렇지만, 프로젝트를 진행하며 조금씩 이해가 되었다. 하지만, 좀 더 깊게 알 필요가 있다고 생각해 MVC 패턴에 관한 글을 적어본다.

MVC

(모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있다. 이러한 "관심사 분리" 는 더나은 업무의 분리와 향상된 관리를 제공합니다. MVC 에 기반을 둔 몇 가지 다른 디자인 패턴으로 MVVM (모델-뷰-뷰모델), MVP (모델-뷰-프리젠터), MVW (모델-뷰-왓에버) 가 있다.

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

모델: 데이터와 비즈니스 로직을 관리한다.
뷰: 레이아웃과 화면을 처리한다.
컨트롤러: 명령을 모델과 뷰 부분으로 라우팅한다.

모델

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

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

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

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

컨트롤러

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

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

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

웹에서의 MVC

웹 개발자로써, 여러분이 이 패턴을 이전에 의식적으로 사용한 적이 없더라도 아마 상당히 친숙할것이다. 여러분의 데이터 모델은 아마 어떤 종류의 데이터베이스에 포함되어있었을 것이다(MySQL 과 같은 전통적인 서버 사이드 데이터베이스, 또는 IndexedDB 같은 클라이언트 사이드 솔루션). 앱의 제어 코드는 아마 HTML/JavaScript 로 작성되었을 것이고, 사용자 인터페이스는 HTML/CSS 등 여러분이 선호하는 것들로 작성되었을 것입니다. 이는 MVC 와 아주 유사하게 들리지만, MVC 는 이러한 컴포넌트들이 더 엄격한 패턴을 따르도록 한다.

웹의 초창기에, MVC 구조는 클라이언트가 폼이나 링크를 통해 업데이트를 요청하거나 업데이트된 뷰를 받아 다시 브라우저에 표시하기 위해 대부분 서버 사이드에서 구현되었다. 반면, 요즘에는, 클라이언트 사이드 데이터 저장소의 출현과 필요에 따라 페이지의 일부만 업데이트를 허용하는 XMLHttpRequest 를 포함해 더 많은 로직이 클라이언트 사이드에 추가되었다.

AngularJS 및 Ember.js 와 같은 웹 프레임워크들은 약간씩은 방식이 다르지만, 모두 MVC 구조를 구현한다.

  • 출처 : mdn web docs(MVC Pattern)
profile
개발자 지망생

0개의 댓글