MVC 패턴을 알아보자

nerdchanii·2022년 11월 17일
45

design pattern

목록 보기
1/1
post-thumbnail

MVC 그게 모죠?

글의 목적

MVC에 대한 지식적인 좋은 글은 너무 많아서, 실제로 구현해보면서 설명해보고자 합니다.

Model?View?Controller?

  • MDN에 의하면, 아래와 같이 정의됩니다.
    - 모델: 데이터와 비즈니스 로직을 관리한다.
    - : 레이아웃 혹은 화면을 관리합니다.
    - 컨트롤러: 명령을 모델과 뷰 부분으로 라우팅합니다.

아래와 같은 다이어그램을 많이 발견할 수 있을거에요!


(위키참고)

이 그림에선 모델이 view를 업데이트를 하고있지만, 사실 이러한 형태보다는 아래와 같은 형태가 현재 널리 쓰이는 MVC에 가까운것 같더라구요.

이렇게 하면 모델과 뷰의 의존성이 controller에 의해서 중간에 끊어지게 됩니다.

이제 이론은 뒤로하고, 간단한 카운터를 구현하는 로직을 통해서 알아보도록 합시다.

카운터 예제로 보는 MVC


model

MVC의 Model은 클린아키텍처의 엔티티유즈케이스가 합쳐진 단위의 도메인(혹은 비즈니스 규칙의 집합)으로 이해했어요. 그래서 모델은 이렇게 카운터의 업무 규칙들이 존재하게 됩니다. 이 모델은 관심사가 업무규칙에 있기에, 업무규칙이 바뀐다면 이 로직은 변경해야합니다. 그러나, UI의 변경으로부터 Model은 자유롭습니다.
ex) 카운터의 업무규칙

  • 카운터는 증가할수 있고, 감소할 수 있다.
  • 카운터는 정수값을 지닌다.
  • 카운터는 리셋이 가능하다.


View

View는 어떻게 카운터를 화면에 보이게 할까? 와 관련된 부분입니다. 이 부분은 사용자에게 보여주는 역할을 담당합니다. 클린 아키텍처의 UI계층으로도 볼 수 있어요.

이 view는 모델이나 컨트롤러에 대해서 알지 못하지만 UI를 그려낼 수 있습니다. 심지어 모델이 바뀌더라도, view는 바뀌지 않을 수 있고, 모델은 바뀌지 않더라도 UI는 마음껏 바뀔 수 있습니다. 상호간의 종속성이 없기 때문입니다.

이렇게 관심사를 분리해주면, 각자가 변해야하는 이유에 따라 자유롭게 변할 수 있게 됩니다.


Controller

모델과 뷰, 뷰와 모델사이에서 이 둘을 제어하는 역할을 수행합니다. 그래서 컨트롤러는 모델과 뷰에 의존적이고, 모델과 뷰를 사용하는 부분입니다. 컨트롤러는 모델과 뷰에 대해 그들이 알려준 만큼 그들에 대해서 알수 있고, View와 Model을 사용할 수 있습니다.


다이어그램과 함께 정리해보자

카운터를 구현하는 간단한 예제를 살펴보았습니다. 이를 다이어그램으로 살펴보면 다음처럼 그려낼 수 있을것 같습니다. Controller가 두 클래스의 인터페이스에 의존하고 있고 Model과 View 는 어떤것에도 의존적이지 않은 구조로 만들어 줄 수 있습니다.


사실 MVC를 어렴풋이 알고 있었지만, 여태까지 잘 이해가 가지않아 학습을 뒤로 미뤘었어요. 이번기회에 정리하고 넘어갈 기회가 생겨서 제 자신을 위해 남겨보았습니다.🙂
MVC가 잘 와닿지 않는 분들에게 작지나마 이해하는데 도움이 되었으면 좋겠네요:)

혹시 틀리거나 잘못된 부분이 있다면! 꼭 댓글 남겨주시면 감사하겠습니다!!:)
profile
이해할 수 있을때까지 🏃🏻

8개의 댓글

comment-user-thumbnail
2022년 11월 17일

잘보고갑니다!

1개의 답글
comment-user-thumbnail
2022년 11월 17일

글이 흥미롭게 잘 읽히네요.
혹시 코드 캡쳐 프로그램이 무엇인지 공유 가능할까요? 😊

1개의 답글
comment-user-thumbnail
2022년 11월 17일

쉽게 설명해주셔서 잘 이해할 수 있었던 거 같아요 잘 보고 갑니다!

1개의 답글
comment-user-thumbnail
2022년 11월 21일

와 잘보고갑니다. ui는 view에서 만들었는데, ui를 사용하는 데이터를 controller에서 관리하면서 고민하고있었는데!!! 작성하신 코드 보고 mvc 구분지을 수 있게되었습니다 감사합니다.

1개의 답글