멈추지 않는 프론트엔드 개발자

MVC 디자인 패턴이란? 본문

cs

MVC 디자인 패턴이란?

jjining 2023. 12. 11. 05:50

 

 

✍️들어가기 전...

MVC 디자인 패턴이란 말을 여러번 들었는데 이게 뭘 말하는 건지 감이 잘 오지 않아 따로 알아보고 정리해보려고 한다.

 

 

💡MVC 패턴?

MVC는 Model-View-Controller의 약자로, 소프트웨어 디자인 패턴 중 하나이다.  사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다. MVC에서 모델은 애플리케이션의 정보(데이터)를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다.

 

💡그래서 MVC가 각각 뭘 의미 하는지?

  1. 모델(Model):
    • 애플리케이션의 데이터와 비즈니스 로직을 나타낸다. 한마디로 데이트를 가진 객체이다.
    • 비즈니스 로직(Business logic)은 컴퓨터 프로그램에서 실세계의 규칙에 따라 데이터를 생성·표시·저장·변경하는 부분을 일컫는다. 
    • 데이터의 상태를 유지하고, 데이터 변경에 대한 로직을 처리한다.
  2. 뷰(View):
    • 사용자에게 정보를 표시하는 역할을 한다. (HTML/CSS/Javascript들을 모아둔 컨테이너)
    • 모델의 데이터를 시각적으로 표현하며, 사용자의 입력을 컨트롤러로 전달한다.
  3. 컨트롤러(Controller):
    • 사용자가 접근한 URL에 따라 사용자의 요청사항을 파악한 후에 그 요청에 맞는 데이터를 Model을 의뢰하고, 데이터를 View에 반영해서 사용자에게 알려준다.
    • 뷰와 모델 간의 상호 작용을 관리하여 사용자 인터페이스와 비즈니스 로직을 연결한다.

 

💡왜 사용하는지?

  1. 모듈화 및 재사용성:
    • MVC는 애플리케이션을 모델, 뷰, 컨트롤러로 나누어 각 부분을 독립적으로 개발할 수 있게 한다. 각 구성 요소는 자체적으로 모듈화되어 있어 재사용성이 높아집진다. 특히 모델은 비즈니스 로직을 담고 있어 여러 부분에서 활용할 수 있습니다.
  2. 유지보수성과 확장성:
    • MVC는 각 구성 요소 간의 강한 의존성을 줄이고, 변경이나 추가가 용이하도록 한다. 한 부분을 수정할 때 다른 부분에 영향을 미치지 않도록 설계되어 있어 유지보수성이 향상되며, 애플리케이션의 확장이 용이해진다.
  3. 코드의 가독성과 이해도 향상:
    • 각 구성 요소가 명확하게 정의되어 있기 때문에 코드의 가독성과 이해도가 향상된다. 각 부분은 자신의 역할에 집중하고 다른 부분에 영향을 미치지 않도록 설계되어 있어 코드의 구조가 명확해진다.
  4. 효율적인 협업:
    • MVC는 역할이 분명하게 정의되어 있어 여러 개발자들이 동시에 협업할 때 효율적으로 일할 수 있고 각각의 개발자는 모델, 뷰, 또는 컨트롤러 중 하나에 집중하여 작업할 수 있다.
  5. 단방향 데이터 흐름:
    • 사용자 인터페이스의 상태 변화가 일정한 순서로 이루어지는 단방향 데이터 흐름은 코드의 예측 가능성을 높이고 디버깅을 쉽게 만든다.
  6. 테스트 용이성:
    • 각 구성 요소를 독립적으로 테스트할 수 있기 때문에 테스트 용이성이 높아진다. 모델, 뷰, 컨트롤러의 각 부분을 테스트하면 시스템 전체의 안정성을 확인하기 쉬워진다.
  7. 사용자 인터페이스 일관성:
    • 뷰와 컨트롤러의 분리로 사용자 인터페이스의 디자인과 동작을 일관성 있게 유지하는 데 도움이 된다.

 

💡MVC의 한계

일반적으로 View는 Controller와 연결되어 화면을 구성하게 된다. 그렇기에 자연스럽게 Controller는 여러 개의 View를 가질 수 있게 된다.

이 때, Model은 Controller를 통해서 View와 연결된다. 즉, Controller에 의해 하나의 View에 연결되는 Model도 여러 개가 될 수 있다는 말이다.

결국 복잡한 구조의 애플리케이션일수록 하나의 Controller에 다수의 View와 Model이 복잡하게 연결되어 서로간의 의존성이 커지는 상황이 발생할 수 있다.

 

 

 

Massive-View-Controller(대규모 MVC 어플리케이션)란?
MVC 패턴에서 컨트롤러의 역할이 과도하게 커지고 복잡해지는 상황을 지칭한다. 이는 주로 대규모 애플리케이션에서 발생할 수 있으며, 코드의 비대화, 재사용성 및 확장성 저하, 유지보수성 하락 및 테스트 용이성 저하 등의 문제를 야기할 수 있다.

 

 

 


 

참고 자료

https://velog.io/@langoustine/%EC%97%AC%EA%B8%B0%EB%8F%84-MVC-%EC%A0%80%EA%B8%B0%EB%8F%84-MVC-MVC-%ED%8C%A8%ED%84%B4%EC%9D%B4-%EB%AD%90%EC%95%BC

 

여기도 MVC, 저기도 MVC! MVC 패턴이 뭐야?

어딜가든 MVC에 대해서 많이 듣고 접하게 되는데 과연 MVC 패턴은 무엇이고 왜 등장했는지, 더 나아가 MVC의 필요성과 한계점은 무엇인지 학습하고 고민한 내용을 기록하였습니다.

velog.io

 

https://ko.wikipedia.org/wiki/%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%EC%BB%A8%ED%8A%B8%EB%A1%A4%EB%9F%AC

 

모델-뷰-컨트롤러 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 모델, 뷰, 컨트롤러의 관계를 묘사하는 간단한 다이어그램. 웹 애플리케이션에서 일반적인 MVC 구성요소 다이어그램 모델-뷰-컨트롤러(model–view–controller, MVC)

ko.wikipedia.org

 

https://www.infoq.com/news/2014/05/facebook-mvc-flux/

 

Facebook: MVC Does Not Scale, Use Flux Instead [Updated]

This article has been updated based on community and Jing Chen (Facebook)’s reaction. (See the Update section below.) Facebook came to the conclusion that MVC does not scale up for their needs and has decided to use a different pattern instead: Flux.

www.infoq.com