MVC design pattern

MVC란?

Model View Controller의 약자로 소프트웨어가 돌아가는 방식에 대한 하나의 패턴으로 볼 수 있다.

특정 라이브러리를 지칭하는 것이 아니라 MVC 패턴으로 만들어진 라이브러리, 프레임워크 들이 있다.
-> 하나의 서비스가 돌아가는 방식, 디자인 패턴이라고 생각하면 될 것 같다.

특징

하나의 서비스가 돌아가기 위해서는 여러 가지 처리들이 필요한데 그런 처리들을 각 기능별로 나눠서
각 Model, View, Controller의 역할을 나누어서 기능을 나눈다는 특징이있다.
기능을 나눔으로써 하나의 코드에서 모든 것들을 하지 않고, 의도 된 코드를 특정 역할들로 나누어서 할 수 있기 때문에 코드 가독성, 관리성 등을 높일 수 있다고 한다.

몇 가지 유명한 web frameworks에서 MVC concepts을 사용하는 것들을 찾아보았다.

• Express (JS)
• Django (python)
• Ruby on Rails (Ruby)
• Laravel (PHP)
• Flask (python) 등 MVC 컨셉을 사용하고 있다.

---

MVC가 어떤것들을 담당하는 지 자세히 알아 볼 것이다.

Model

knowledge (지식)
handles data (데이터 다루기)
Interaction with DataBase(DB) (데이터베이스와의 상호 작용)

• DB를 가지고 있거나 DB와 연결이 되어있는 상태에서 Data를 가져오고, DataBase와 통신할 수 있다.
• DataBase를 받아온 값이나 Model 스스로가 가지고 있는 Data를 Controller를 통해 전달하고 다룰 수 있다.
• Controller가 Model에게 요청을 보내거나 Model이 요청에 따른 Data를 응답(반환)하는 등의 방식으로 로직이 이루어진다.
• Model은 View와 직접적으로 연결되는 경우는 많이 없다고 한다.

View

visual representation of a model
what the users see (UI: user interface)

• 사용자(user)가 보는 화면을 보여주는 역할을 한다.
• browser의 경우에는 html, css로 이루어 진 것을 생각할 수 있다.
• View는 Controller와만 소통을 한다. (Model, DataBase에는 직접 접근 하지 않는다.)
• Controller에게 View에서 일어나는 사용자의 action or event를 전달 하는 등의 역할을 할 뿐, 그 다음에 일어나는 과정에 대해서는 View는 알 수 없다. (ex) View에서 일어난 어떤 일 -> Controller -> Model -> DataBase => 처리 or 반환받은 것 -> Model -> Controller -> View에게 필요한 Data를 응답받게 되는 것이다.)
• 위의 예로 든 과정이 끝나면 View는 그 Data를 화면에 보여주는 역할을 한다.

Controller

receives input
process requests
get data form a model
pass data to the view

• View에서 일어나는 action or event에 대한 input값을 받아서 받은 값들을 Model에게 전해주기 전에 특정한 가공과정을 거칠 수도 있고, 그 후에 Model에게 가공 된 Data를 넘겨줄 수 있다.
• Model이 Data를 직접 가지고 관리하는 경우에는 Model에서 Data에 대한 처리를 담당하고, 그렇지 않을 경우라면 DB를 통해 Data에 대한 처리가 일어날 것이다.
• DB or Model에서 Data에 대한 처리가 일어난 후 다시 Controller에게 해당 처리가 끝난 후의 결과 또는 Data값을 반환해주게 된다.
• Controller는 Model에게서 받은 Data를 바로 View로 보내는 것이 아니라 로직에 따른 가공을 거쳐 View가 처리할 수 있는 특정한 작업 후 Data로 돌려주게 된다.

web에서 일어나는 일련의 과정을 살펴보면 아래의 그림과 같을 수 있다.

1. Browser에서 사용자의 action or event가 일어나면
2. 특정 end point들을 routeing(분기 처리)한다.
3. 각 router는 end point들에 맞는 Controller 함수들을 호출한다.
4. Controller는 end point들에 따라 바로 View를 보여줄 수도 있고, Model을 거쳐 DB에 들렸다가 다시 View로 보내줄 수도 있다. (경우에 따라 다름)

---

MVC 패턴에 대한 코드를 살짝 살펴보면

https://~~.com/api/members/9

위와 같은 end point로 GET Request를 보냈다고 가정했을 때

routes에서 먼저 체크를 할 것이다.

// routes
  members/:id = Members.getMember(id);

// controllers
  class Members {
     function getMember(id) {
       findMember = this.MemberModel.getMemberFind(id);

       renderView('members/', findMember); // 해당 findMember를 view로 보내준다.
     }
  }

// models
  class MemberModel {
    function getMemberFind(id) {
      data = this.db.get('SELECT * FROM members WHERE id = id')
      
      return data; // 단순 data 리턴
    }
  }

// views
  //members/:id
	<h1>{findMember.name}</h1>
	...등 해당 findMember 대한 여러 정보들..

각 역할들의 의존성에 대한 연결을 잘 이해하고, 코드 관리, 코드 가독성, 협업 등에서 유용하게 쓰일 수 있는 MVC 패턴에 대해 공부해보았다.