MVC 패턴

오랜만에 React가 아닌 Vanilla JS 프로젝트를 하면서

기능 구현에만 집중하는 것보다 디자인 패턴에 대해 공부하고 만들어 보는 것을 목표로 삼았다.

MVC, MVP, MVVM 등 다양한 패턴이 있는데 글로 적힌 설명을 봐도 잘 와닿지 않았다.

그래서 Js를 배울때 누구나 한 번쯤 만들어 보는 todo-list를 디자인 패턴을 적용하여 만든 예제를 찾았다.

MVP, MVVM의 예제는 찾을 수 없었지만, MVC 패턴은 다행히 있었다!

TODO MVC > TodoMVC (Vanilla ES6)

코드를 보고 MVC 패턴에 대한 이해가 됐다.

Model: Data 관리
View: 화면 랜더링 관리
Controller: 사용자의 신호를 받고 명령을 내리는 역할

이렇게 관심사를 나누고 코드를 작성하는 패턴이었다.

그런데 내가 이해한 코드와 인터넷의 설명과 좀 다른 부분이 있었다.

코드로 이해한 MVC 패턴은 위 이미지와 같은 형태였는데,

어떤 설명에선 Model과 View가 연결돼 있다고 설명했다.

데이터가 업데이트 됐다는 것을 View에 알려준다고 하는데,

controller가 해결하면 될 일을 왜 Model이 뷰에게 알려준다고 설명할까?

답은 둘 다 MVC패턴이다.

데이터가 변경됐다는 신호를 Controller에게도 View에게도 줄 수 있다.

다만 view에 신호를 줄 경우에는 모델과 뷰의 의존성이 높아지기 때문에

나는 Model의 데이터 변경 신호를 Controller에서 받기로 했다.

---

• ← Previous Post
• Next Post →

---

---