💡MVC 패턴

주니어 개발자의 개인 공부 과정을 기록합니다.

디자인 패턴: 개발 과정에서 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리한 “규약”을 통해 쉽게 쓸 수 있는 형태로 만든 것.

즉, 상황(개발 과정에서 발생했던 문제점들)에 따라 간편하게 적용되도록 정리한 설계 방법론

---

MVC 패턴

MVC(모델-뷰-컨트롤러)는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴

• 하나의 애플리케이션, 프로젝트를 구성할 때 그 구성 요소를 세 가지의 역할로 구분한 패턴

• MVC에 기반을 둔 몇 가지 다른 디자인 패턴으로 MVVM (모델-뷰-뷰모델), MVP(모델-뷰-프리젠터), MVW (모델-뷰-왓에버)가 있다

모델 Model

: 데이터와 비즈니스 로직을 관리한다.

• 모델은 앱이 포함해야할 데이터가 무엇인지를 정의.
• 데이터의 상태가 변경되면 일반적으로 뷰에게 알리며
• 업데이트된 뷰를 제거하기 위해 다른 로직이 필요한 경우, 컨트롤러에게 알리기도 한다.
• 예시) 쇼핑 리스트 앱: 품목, 가격 등의 데이터

뷰 View

: 레이아웃과 화면을 처리한다.

• 앱의 데이터를 보여주는 방식을 정의.

컨트롤러 Controller

: 명령을 모델과 뷰 부분으로 라우팅한다.

• 앱의 사용자로부터의 입력에 대한 응답.
• 모델 및/또는 뷰를 업데이트하는 로직을 포함
• 예시) 쇼핑 리스트는 항목을 추가하거나 제거할 수 있게 해주는 입력 폼과 버튼
  • 이러한 액션들은 모델이 업데이트되는 것이므로
  • 입력이 컨트롤러에게 전송되고,
  • 모델을 적당하게 처리한다음,
  • 업데이트된 데이터를 뷰로 전송한다

왜 MVC패턴을 사용해야 할까

• 서로 분리되어 각자의 역할에 집중할 수 있게끔하여 개발을 하고 그렇게 애플리케이션을 만든다면,
  • 유지보수성,
  • 애플리케이션의 확장성, 그리고
  • 유연성이 증가하고,
  • 중복코딩이라는 문제점 또한 사라지게 된다.

MVC패턴의 예

• facebook의 react

  • react는 mvc 패턴만을 사용하다가 flux 패턴도 쓴다.(redux)
  • react는 mvc 프레임워크는 아니고 View만 신경쓰는 라이브러리이다
  • 다른 웹프레임워크와는 달리 ajax, 데이터 모델링, 라우팅 같은 것이 없습니다. 그저 뷰만 신경쓴다
  • 단방향 데이터 흐름으로 데이터 변경에 관한 DOM객체만 변경해주는 체계, 데이터가 변경되면 양방향 데이터 바인딩처럼 모델 변경 ➔ 뷰변경이 아니라 특정함수를 실행시킴으로써 DOM객체를 갱신한다
• python의 django
• 구글의 AngularJS
• php의 코드이그나이터

---

✨ tl;dr

✔️ MVC 패턴이란?

• 하나의 애플리케이션, 프로젝트를 구성할 때, 그 구성 요소를 세 가지의 역할로 구분한 패턴