MVC 패턴의 역사와 현대 자바스크립트 패턴에 끼친 영향
MVC 패턴은 가장 유서 깊은 디자인 패턴 중 하나입니다.
현대 어플리케이션 아키텍쳐를 구성하는 대부분의 이론들이 MVC 패턴에서 파생되었습니다.
그만큼 개발자가 MVC 패턴을 이해하는 것은 중요합니다.
본 게시글에서는 MVC 패턴의 역사와 주요 특징을 살펴보고 현대 디자인 패턴이 MVC 패턴을 기반으로 어떻게 발전했는지 알아보겠습니다.
MVC 패턴의 역사
SmallTalk과 MVC 패턴
1970년대에는 GUI(Graphic User Interface)라는 개념이 거의 존재하지 않았기 때문에 현실의 데이터(자동차, 사람 등)를 프로그램에서 모델링하는 도메인 객체와 사용자 화면에 렌더링되는 프렌젠테이션 객체 사이를 명확하게 구분하는 수단으로 ‘분리된 프레젠테이션’(Separated Presentaion)이라는 개념이 연구되고 있었습니다.
그리고 1979년 제록스 팔로알토 연구소의 트리베 린스카우그(Trygve Reenskaug)는 SmallTalk-80을 개발하던 중 복잡한 데이터를 사용자에게 제시하고 조작하는 문제를 해결하기 위해 분리된 프레젠테이션 개념을 발전시켜MVC(Model-View-Controller) 아키텍처를 고안했습니다. 당시 그가 고민한 주요 과제는 다음과 같았습니다:
- 대규모 시스템에서 사용자 인터페이스와 비즈니스 로직의 분리
- 동일한 데이터에 대한 다양한 표현 방식 지원
- 사용자 입력에 대한 일관된 처리 방식 필요
- 코드의 재사용성과 유지보수성 향상
SmallTalk-80에서 구현된 MVC 패턴의 목표는 애플리케이션의 비즈니스 로직과 UI를 분리하여 데이터 모델을 애플리케이션의 다른 영역에서도 재활용할 수 있게 하는 것이었습니다.
이렇게 구현된 MVC 패턴은 다음과 같은 특징을 가지고 있습니다.
초기 MVC의 주요 특징
Model (모델)
- 애플리케이션의 데이터와 비즈니스 로직을 담당
- View나 Controller에 독립적으로 동작
- 상태 변경 시 관찰자 패턴을 통해 View에 통지
View (뷰)
- Model의 데이터를 시각적으로 표현
- 동일한 Model에 대해 다양한 View 구현 가능
- 관찰자 패턴을 사용해 Model의 상태 변화를 감지하여 화면 갱신
Controller (컨트롤러)
- 사용자 입력을 처리하고 Model을 조작
- View와 Model 사이의 중개자 역할
- 입력에 따른 비즈니스 로직 실행 조정
많은 개발자들은 관찰자 패턴이 고전적인 MVC 패턴에 포함되어있다는 사실에 놀라곤 합니다. 초기 MVC 모델의핵심 기능은 모델의 변화를 뷰가 지속적으로 관찰하여 변화하고, 컨트롤러를 통해 사용자와 상호작용하는 것입니다.
현대의 MVC 모델
그렇다면 현대의 MVC 모델은 어떻게 발전하였을까요 저희는 자바스크립트 관점으로 살펴보겠습니다.
현대의 자바스크립트는 MVC(또는 MV* 변형 패턴)를 지원하는 여러 프레임워크를 갖추고 있어 쉽게 MVC 패턴을 사용할 수 있습니다.
Backbone.js, Ember.js, AngularJS와 같은 초기 프레임워크들이 MVC 패턴에 기반한 현대적 기반을 마련하였고 뒤를 이어서 React, Angular, Vue.js와 같은 완성된 프레임워크 생태계가 구현되었습니다.
이러한 프레임워크들은 구조의 결함으로 인해 발생하는 일명 ‘스파게티 코드’의 문제를 효과적으로 해결하고 높은 생산성의 개발 환경을 제공합니다.
