도입
이번에 우아한테크코스 프리코스를 진행하면서 과제를 총 4번 진행했습니다.
3주차 미션부터 공통적으로 있던 요구사항이 있습니다.
핵심 로직을 구현하는 코드와 UI를 담당하는 로직을 구분한다.
바로 이 요구사항입니다. 도메인과 뷰를 담당하는 로직을 분리하라는 요구사항이었습니다.
도메인과 뷰 로직을 분리하라는 요구사항은 즉 출력을 담당하는 뷰, 미션을 진행함에 있어 필요한 데이터를 관리하는 도메인으로 나누라고 이해를 했습니다.
이렇게 로직을 분리하는 것이 MVC패턴에 맞다고 생각이 들어 MVC패턴에 대해 학습을 진행했습니다.
하지만 다른 분들의 코드를 리뷰해보다 보니 제가 생각하나 MVC패턴과는 다른 흐름으로 진행이 되고 있는 것 같아 학습을 하고자 글을 작성하게 되었습니다.
왜 MVC 패턴을 사용할까?
1. 먼저 화면에 출력하는 것과 이벤트들을 캐치해 핸들링하고 실제 데이터들은 전체로 보면 하나의 애플리케이션에 필요한 것들이지만 출력만 해주는 것과 처리하는 부분은 서로 다른 성격이라서 분리를 하고자 함입니다.
2. 서로 분리를 시킴으로써 의존도를 낮추고 서로 영향을 미치지 않게 하기 위해서입니다.
내가 기존에 학습했던 MVC 패턴
기존에 MVC패턴에 대해 학습을 진행했었던 경험이 있습니다.
다음과 같은 구조를 가진 패턴이라고 이해했었습니다.
이때 중요한 포인트는 다음과 같습니다.
1. 양방향 순환참조를 하지 말 것
2. 각 역할에 알맞게 구조를 분리할 것
뷰(View)
UI가 뷰에 해당합니다.
사용자에게 보여줄 화면이고 보통 HTML, CSS를 통해 만들어진 결과물들입니다.
가지고 있는 데이터를 토대로 사용자에게 보여주는 역할을 해야 합니다.
컨트롤러(Controller)
흔히 말하는 이벤트 핸들러를 가지고 있어 사용자가 이벤트를 발생시킬 때 화면으로 부터 사용자의 동작을 받아서 Model을 변경합니다.
모델(Model)
실제로 필요한 데이터들을 말합니다.
자바스크립트의 객체거나 서버의 API 혹은 DB일 수도 있습니다.
새로 알게된 MVC 패턴에 대한 내용
SSR과 CSR의 MVC 패턴
Client-side와 Serever-side의 MVC 패턴이 다르다는 것을 알게 되었다.
Server-Side MVC 패턴의 경우, Rendering 및 HTML Serving을 위한 View와 Controller가 Server에서 처리합니다.
즉 Clinet는 모든 소스를 Server로부터 전송 받기 때문에 MVC 패턴이 Server에게 있습니다.
반대로 Client-side MVC 패턴의 경우에는 서버로부터 서비스 진입 초기에 HTML 파일 + JS 파일 및 리소스 파일 등을 모두 다운 받은후 Client에서 직접 Controller와 View를 담당하게 됩니다.
먼저, 내가 기존에 알고 있던 패턴은 Client-side에서 사용되는 패턴이다. Client-side는 Interaction이 다양하고, 이에 따른 대응이 필수적이다.
내가 위 사진과 같이 기존에 알고 있던 MVC 패턴의 문제점은 다음과 같다.
1. Model은 비지니스 로직과 관련이 있다.
2. View는 UI와 관련이 있다.
즉 ,각자의 변화의 이유가 다르지만 서로 간의 의존성이 존재하기 때문에 문제가 발생합니다. 또한, View와 Model의 높은 의존성은 어플리케이션이 커질 수록 복잡하지고 유지보수가 어렵게 만들 수 있습니다.
따라서 제가 새로 마주했던 흐름의 패턴을 사용하게 됩니다.
바로 이 구조의 MVC 패턴입니다. 뷰와 모델이 완벽하게 서로 알 수 없지만 컨트롤러가 중간역할로 양쪽 소통을 담당하고 있습니다.
MVC 패턴에서 가장 중요하다고 생각한 부분이 단방향으로 참조한다는 것이었는데 MVC에서는 모델(model)과 뷰를 완전히 분리하는 방식으로 작성할 것을 권장하고 있습니다.
하지만~~~~ 이 패턴은 MVP패턴이라고 볼 수 있습니다.
Controller가 양방향 소통을 하게 View와 Model을 생성하거나 가지고오는 역할을 하게 됩니다.
모델은 순수 데이터이며 데이터의 변경이 일어날 때마다 컨트롤러에게 알려줘야 합니다.
뷰는 컨트롤러가 전달해주는 모델을 기반으로 화면을 구성하게 됩니다.
이렇게 된다면 뷰는 사용자에게 화면을 보여주는 출력의 역할만 하게 되고 변경되는 데이터만 리렌더링을 거치게 되면 됩니다. 모델 또한 순수하게 데이터만 들고 있게 되고 변경사항이 있다면 변경해 컨트롤러에게 데이터를 넘겨주게 됩니다.
즉, 컨트롤러가 뷰와 모델의 변화를 흡수해야 한다는 것이고, 컨트롤러의 변화가 매우 많아 지게 됩니다.
이러한 이유로 인해 현재는 MVC패턴의 사용이 줄어든다고 합니다.
MVVM패턴 맛보기
MVVM은 Model-View-ViewModel 패턴입니다.
MVC패턴과는 다음과 같은 차이가 있습니다.
코드에서 DOM을 조작하는 코드가 사라지고 이 기능들은 angular, react, vue와 같은 프레임워크가 담당하게 됐습니다. 이제 개발자는 화면에 그려져야할 데이터만 만들어서 프레임워크에 전달해주면 프레임워크가 알아서 그려줍니다.
이를 View를 그리는 Model만 다루게 되었다는 의미로 ViewModel이라고 부르며 이 방식을 MVVM이라고 부릅니다.
그렇다면 기존의 MVC패턴과 달라진 부분을 살펴보자면 다음과 같습니다.
- 컨트롤러의 반복적인 기능이 선언적인 방식으로 개선이 되었습니다.
- Model과 View의 관점을 분리하려 하지 않고 하나의 템플릿으로 관리하려는 방식으로 발전했습니다.
