MVC Pattern

우테코 프리코스 미션을 수행하면서 MVC 패턴에 대해 관심을 가지게 되어 도입해보고자 간단하게 알아보는 시간을 가져보려 한다.

 

MVC의 개념은 Trygve Reenskaug라는 사람이 제시한 GUI 어플리케이션을 개발하는 방식에서 왔다. 현재 사용하는 MVC 패턴은 확장성과 유지보수에 있어 편리하여 흔히 사용되고 있다.

MVC?

https://www.freecodecamp.org/news/the-model-view-controller-pattern-mvc-architecture-and-frameworks-explained/

• Model : 데이터베이스와 상호작용하는 로직을 담는다.
• View : user와 상호작용하는 인터페이스를 담는다.
• Controller : view와 model의 중재자로서의 역할을 한다.

이렇게 세 부분으로 나누어 프로그램을 디자인하는 패턴이다.

다수의 언어와 프레임워크에서 지원하고 있는 방식이다. (Java, Ruby, C, C++, Angular, Django 등)

 

Separation of concerns ; 관심사의 분리

MVC 패턴에서는 유지와 최적화가 복잡하지 않다. 코드를 MVC 형태로 나누어 프론트는 view, 백엔드는 model로 관심사에 따라 분리하기 때문이다.

 

Model

모델은 DB 또는 JSON 파일과 같은 저장소에서 데이터를 받아오는 것을 책임지는 로직이 담겨있다.

피자를 만드는 주방의 역할

• 대부분의 경우, controller와 상호작용하여 view로 데이터를 전달한다. (주로 view와 직접적으로 소통하지는 않는다.)
• DB와의 상호작용, CRUD, 데이터 검증 등의 작업을 담당한다.

 

View

user와 직접적으로 상호작용하는 코드를 담고 있다.

• 입력을 받아 controller에게 전달하거나 주고받는다.
• HTML, CSS, JavaScript 등이 이 부분에 쓰이는 언어이다. (프레임워크 : React, Vue, Svelte 등)
• view를 구현하기 위해 template 엔진을 사용하는 경우도 있다.

피자를 시키기 위해 전화를 거는 역할
(전화를 건다고 해서 주방(Model)이 받진 않음)

 

Controller

model과 view 사이에서 중재자 역할을 하는 코드로, model도 아니고 view도 아닌 코드를 담는다.

피자 주문을 매장에 전달하는 역할

• View와의 상호작용 : user의 요청과 행동을 받아 처리하고 view를 통해 결과를 보여준다. (GET, POST, PUT, PATCH, DELETE)
• Model과의 상호작용 : view를 통해 전달받은 user의 요청에 따라 model로부터 필요한 데이터를 얻는다.

 

---

예시로 MVC 생각해보기

Car Clicker App: 자동차 목록을 클릭해 해당 자동차의 사진을 볼 수 있는 사이트를 개발한다고 해보자.

 

Model (data)

데이터가 DB, API, JSON 등 저장소에 포함되어있고, 이것을 관리하는 역할을 한다.

• Car Clicker App에서 model은 자동차에 대한 정보가 담겨있는 객체의 배열이 될 수 있다.
• 최근에 조회한 자동차 정보도 담고 있어야 한다.(없다면 null)

 

Views (UI)

사용자가 화면에서 무엇을 보게 할 것인지를 결정하는 역할을 한다.

• Car Clicker App에서는 CarListView와 CarView를 가질 수 있다.
  • CarListView는 자동차 목록을 보여주는 역할이다.
  • CarView는 자동차 사진 및 데이터를 보여주는 역할이다.
• 각 뷰가 각각 다른 데이터를 초기화하고 다른 모습으로 보여줄 것이므로 나누어 설계할 수 있다.

 

Controller (Brain)

데이터를 유저에게 입력받고, 수정하고, 제공하는 역할을 한다. view와 model을 연결하는 역할이 가장 주요 역할이다.

• getter와 setter 함수를 이용해 값을 가져오거나 설정한다.
• Controller의 역할이 너무 많아진다면 Service를 도입하여 model과 좀 더 가깝게 동작하는 코드를 묶어줄 수 있다.

 

 

참고자료

• https://www.freecodecamp.org/news/what-does-mvc-mean-in-computer-science/
• https://www.freecodecamp.org/news/the-model-view-controller-pattern-mvc-architecture-and-frameworks-explained/