20.09.08_TIL

 

 

오늘은 MVC 패턴을 공부하였다. 

 

MVC 패턴이란 무엇일까?

일단 MVC 는 Model, View, Controller의 약자이다.  소프트웨어가 돌아가는 하나의 설계 패턴으로 이해하면 된다. 

그럼 이제 MVC 는 어떤 설계 패턴일까? 

 

MVC 패턴에서 가장 중요하다고 생각하는 키워드는 분업화라고 생각한다. MVC 패턴은 각 코드가 각자의 역할만을 하도록 설계한다. Model은 Model의 역할만, View는 View의 역할만, Controller는 Controller의 역할만 하도록 하는 것이다. 

 

이렇게 분업을 하였을 때의 장점은 각 코드들이 의도된 역할만 하므로 예측이 쉽고 관리가 쉽다는 것이다. 일종의 정리정돈이라고 생각한다. 있어야 할 곳에 각 물건이 있는 것이다. 

 

이제 그럼 Model 의 역할은 무엇이고, View 의 역할은 무엇이고, Controller의 역할은 무엇일까?

 

Model의 역할 

모델은 데이터에 관한 일을 하는 곳이다. 직접 자신이 가지고 있는 데이터를 관리할 수도 있고, 아니면 DB에 직접 접촉을 하여 데이터를 받아오거나 요청할 수 있다. 

 

Controller의 역할

controller는 유저로부터  어떠한 액션이나 이벤트에 대한 인풋 값을 받아온다. 그리고 받아온 값을 가공한 뒤 Model에게 가공된 데이터를 전달하는 역할을 한다. 

 

 

View 의 역할 

view는 화면에 받아온 데이터를 그리는 일을 한다.  Controller와 소통을 하며 값을 받아오고 화면에 출력한다. 

 

 

 

그럼 이제 예시로 어떻게 MVC패턴이 돌아가는지 살펴보자. 

 

 

 

 

만약 유저가 위와 같은 주소로 들어온다고 하자. 그럼 router에서는 분기가 일어나서 각각에 알맞은 Controller를 호출하게 된다. 

/routes
users/profile/:id = Users.getProfile(id);

 

router에서는 controller에 있는 getProfile이라는 메소드를 호출하고 있다.

 

 

/controllers
  class Users{
    function getProflie(id){
      profile = this.UserModel.getProfile(id);
      //profile에 model에서 받아온 값을 넣어주고 있다. 
      
      renderView('users/profile', profile)
      //받아온 데이터를 이젠 view에게 보내주고 있다. 
    }
  }

controller에서 getProfile이라는 메소드는 다시 Model에 있는 getProfile이라는 메소드를 호출하고 있다.

 

/model
  Class UserModel{
    function getProfile(id){
      data = this.db.get('SELECT * FROM users WHERE id = id')
      return data;
    }
  }

 

model을 보면 getProfile은 받아온 id값을 가지고 id값과 일치하는 데이터를 데이터베이스에 요청하고 있다. 

그리고 받아온 data를 리턴해주고 있다. 

 

 

지금까지의 과정을 정리하면 

1. user가 어떠한 주소로 들어옴

2. router에서 분기가 이루어지고 각각에 맞는 controller가 호출된다. 

3. controller는 model을 호출한다. 

4. model은 controller로 부터 받아온 인자값을 가지고 db에 data를 요청한다. 

5. db로부터 받아온 데이터는 다시 controller의 profile에 들어가고 

6. 그 데이터는 view에게 전달된다. 

 

 

/views
 /users
  /profile
  <h1>{{profile.name}}</h1>
  

view에서는 받아온 데이터를 화면에 출력하게 된다.