그냥 블로그

[면접 대비] MVC / MVVM / MVP / MTV 본문

Front-End/이론

[면접 대비] MVC / MVVM / MVP / MTV

코딩하는 공대생 2023. 10. 31. 21:48
반응형

MVC, MVVM 이 두가지는 면접 단골이다.. 근데 잘 모름 ㅎ MTV는 Django의 디자인 패턴인데, 

Django를 다뤄본 경험이 있어서 함께 적어보기로 했다.

 

디자인패턴이란 다수의 엔지니어들이 일반화된 패턴으로 소프트웨어 개발을 할 수 있도록 한 규칙, 커뮤니케이션의 효율성을 높이는 기법

 

공통점 : 각 부분을 독립적으로 개발할 수 있어 하나를 수정하고 싶을 때 모두 건들지 않아도 됨.

=> 개발 효율성 및 유지보수의 간편화, 다수의 멤버로 개발하기 용이

 

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

모델 : 앱에 사용되는 데이터와 그 데이터를 처리한다..

데이터의 상태 변경 시, 모델을 일반적으로 뷰에게 알리며(필요한 대로 화면 변경) 가끔 컨트롤러에게 알리기도 함.

 

: 앱의 데이터를 보여주는 방식을 정의(UI). 항목이 보여지는 방식을 정의하며, 표시할 데이터를 모델로부터 받는다. 

 

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

 

MVC 패턴의 사용 이유

사용자가 보는 페이지, 데이터 처리, 그리고 두가지를 중간에서 제어하는 컨트롤, 이 3가지 구성으로 하나의 애플리케이션을 만들면 각각 맡은바에만 집중할 수 있게 된다. 공장에서도 하나의 역할만 담당해 처리하는게 효율적임! 

 

서로 분리되어 각자의 역할에 집중할 수 있게끔하여 개발을 한다.

비교적 간단한 패턴으로 구조파악과 확장이 쉽다.

 

예시 ) Angular.JS

 

MVC 패턴의 단점

View와 Model 사이 의존성이 높다. 높은 의존성은 어플리케이션이 커질수록 복잡해지고 유지보수를 어렵게 만들 수도 있다.

 

MVVM ( 모델 - 뷰 - 뷰모델 )

https://beomy.tistory.com/43

모델 : 앱에서 사용되는 데이터와 그 데이터 처리

뷰 : 사용자에게 보여지는 UI

뷰 모델 : 뷰를 표현하기 위해 만든 뷰를 위한 모델, 뷰를 나타내주기 위한 모델이자 뷰를 나타내기 위한 데이터 처리

 

MVVM 패턴의 사용 이유

사용자의 액션이 View로 들어오면, Command 패턴으로 View Model에 Action 전달. 

뷰 모델이 모델에게 데이터를 요청하고 응답받으면 뷰 모델은 응답받은 데이터를 가공해서 저장, 뷰는 뷰 모델과 데이터 바인딩해 화면을 나타낸다. 

 

Command 패턴과 Data Binding 두 가지 패턴을 사용해 구현했다. Command 패턴과 Data Binding을 이용해 View와 View Model 사이의 의존성을 없앴다. 각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있다.

 

MVVM 패턴의 단점

View Model의 설계가 쉽지 않음. 

 

* 커맨드 패턴 : 실행될 기능을 캡슐화함으로써 주어진 여러 기능을 실행할 수 있는 재사용성이 높은 클래스 설계

- 즉, Button 클래스의 pressed 메서드에서 구체적인 기능(램프 켜기, 알람 동작 등)을 직접 구현하는 대신 버튼을 눌렀을 때 실행될 기능을 Button 클래스 외부에서 제공받아 캡슐화해 pressed 메서드에서 호출한다.

*데이터 바인딩 : UI 요소와 데이터를 프로그램적 방식으로 연결하지 않고, 선언적 형식으로 결합할 수 있게 도와주는 라이브러리. 데이터 바인딩을 사용하면, 데이터를 UI 요소에 연결하기 위해 필요한 코드를 최소화할 수 있다.

 

MVP ( 모델 - 뷰 -  프레젠터 )

모델과 뷰는 MVC와 동일

Presenter : View를 통한 사용자 입력을 받고 Model의 도움을 받아 사용자 데이터 처리, 결과를 다시 View로.

interface를 통해 View와 상호작용한다. 액티비티나 프래그먼트와 같은 view 구성요소는 이 인터페이스를 구현하고 원하는 방식으로 데이터를 랜더링한다.

 

MVP 패턴의 사용 이유

인터페이스를 통해 통신하기 때문에 MVC의 단점인 View-Model 간 의존성이 없다. 

 

MVP 단점

View와 Presenter 사이 의존성이 높고 앱이 커질수록 이 의존성이 더 강해짐.

 

 

MTV ( 모델 - 템플릿 -  뷰)

MVC 패턴과 유사하나 View <-> Template , Controller <-> View 로 용어가 다름.

 

 

[개발자 면접준비]#1. MVC패턴이란

오늘은 개발자면접에 많이 나오기도 하는 MVC패턴에 대해서 알아보고자 합니다. 과연 MVC패턴이 무엇...

blog.naver.com

 

 

[디자인패턴] MVC, MVP, MVVM 비교

웹 개발자로 일을 하면서 가장 먼저 접한 디자인패턴이 바로 MVC 패턴이었습니다. 그만큼 유명하고 많이 쓰이는 디자인패턴인 MVC 패턴과 MVC 패턴에서 파생되어져 나온 MVP 패턴과 MVVM 패턴을 이야

beomy.tistory.com

 

 

[Design Pattern] 커맨드 패턴이란 - Heee's Development Blog

Step by step goes a long way.

gmlwjd9405.github.io

 

 

'Front-End > 이론' 카테고리의 다른 글

TDD(Test Driven Development) - Front End (3)  (0) 2024.03.08
TDD(Test Driven Development) - Front End(2)  (3) 2024.03.08
TDD(Test Driven Develop) - Front End 관점 (1)  (1) 2024.03.08
WebRTC란 무엇일까?  (1) 2024.02.21
[면접대비] CORS  (0) 2023.10.31