JavaScript 디자인 패턴 학습, 제 2판

8장. JavaScript MV* 패턴

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

객체 디자인과 애플리케이션 아키텍처는 애플리케이션 설계의 두 가지 주요 측면입니다. 이전 장에서 첫 번째와 관련된 패턴을 다루었습니다. 이 장에서는 세 가지 기본 아키텍처 패턴을 살펴보겠습니다: MVC(모델-뷰-컨트롤러), MVP(모델-뷰-프레젠터), MVVM(모델-뷰-뷰모델)입니다. 과거에는 이러한 패턴이 데스크톱 및 서버 측 애플리케이션을 구조화하는 데 많이 사용되었습니다. 이제 이러한 패턴이 JavaScript에도 적용되었습니다.

현재 이러한 패턴을 사용하는 대부분의 JavaScript 개발자는 MVC/MV*와 유사한 구조를 구현하기 위해 다양한 라이브러리 또는 프레임워크를 활용하고 있으므로, 이러한 솔루션이 기존 패턴과 비교하여 MVC에 대한 해석이 어떻게 다른지 비교해 보겠습니다.

참고

대부분의 최신 브라우저 기반 UI 디자인 프레임워크에서 모델과 뷰 레이어는 MVC/MVVM을 기반으로 쉽게 구분할 수 있습니다. 그러나 세 번째 컴포넌트는 이름과 기능이 모두 다릅니다. 따라서 MV*의 *는 세 번째 컴포넌트가 다른 프레임워크에서 어떤 형태를 취하는지를 나타냅니다.

MVC

MVC는 관심사 분리를 통해 애플리케이션 구성을 개선하도록 장려하는 아키텍처 설계 패턴입니다. 이 패턴은 비즈니스 데이터(모델)와 UI(뷰)를 분리하고, 전통적으로 로직과 사용자 입력을 관리하는 세 번째 구성 요소(컨트롤러)를 사용합니다. 트리그브 리엔수그는 1979년 Smalltalk-80에서 작업하면서 이 패턴을 처음 설계했으며, 처음에는 모델-뷰-컨트롤러-에디터라고 불렀습니다. MVC는 나중에 1995년 디자인 패턴에서 자세히 설명되었습니다: 재사용 가능한 객체 지향 소프트웨어의 요소 (일명 "GoF" 책)에 자세히 설명되어 대중화되는 데 큰 역할을 했습니다.

Smalltalk-80 MVC

원래 MVC 패턴이 해결하고자 했던 것이 무엇인지 이해하는 것이 중요합니다. 왜냐하면 이 패턴은 그 기원 이후 상당히 많이 변했기 때문입니다. 1970년대에는 GUI가 거의 없었습니다. 분리형 프레젠테이션이라는 개념은 현실 세계의 아이디어를 모델링하는 도메인 객체(예: 사진, 사람)와 사용자의 화면에 렌더링되는 프레젠테이션 객체를 명확하게 구분하기 위한 수단으로 유명해졌습니다.

MVC의 Smalltalk-80 구현은 이 개념을 더 발전시켜 애플리케이션 로직과 UI를 분리하는 것을 목표로 했습니다. 애플리케이션의 이러한 부분을 분리하면 애플리케이션의 다른 인터페이스에 모델을 재사용할 수 있다는 아이디어였습니다. Smalltalk-80의 MVC 아키텍처에는 몇 가지 주목할 만한 흥미로운 점이 있습니다:

• 모델은 도메인별 데이터를 나타내며 UI(보기 및 컨트롤러)에 대해 무지했습니다. 모델이 변경되면 관찰자에게 알렸습니다.

• 뷰는 모델의 현재 상태를 나타냅니다. 관찰자 패턴은 모델이 업데이트되거나 ...