MVC 패턴에 대해 알아보자!

개요

웹 서버 개발을 하다보면 흔히 MVC 패턴에 대해 들어봤을 것이다. 실제로 일을 하다보면 정말 많은 프로젝트에서 MVC 패턴을 이용하여 개발을 하고 있다. 오늘은 이 MVC 패턴이 무엇인지와 실제로 어떻게 활용되는 지 간단한 예제도 살펴볼 예정이다.

MVC 패턴이란?

MVC 패턴이란 소프트웨어를 개발할 때 가장 많이 쓰이는 디자인 패턴 중 하나이다. MVC는 각각 Model, View, Controller 를 의미하며, 애플리케이션 개발 시 이 3가지 요소로 나누어 각각 개발을 진행하는 것을 MVC 패턴을 적용하여 개발한다고 한다. 그렇다면 이제부터 각각 Model, View, Controller 가 정확하게 무엇을 의미하고, 어떤 기능을 하는 지 알아보고 각각의 관계는 어떻게 되는 지 알아보자.

모델 (Model)

Model은 데이터, 정보들을 관리하는 부분을 의미한다. 이는 Controller 에게 받은 데이터를 조작(Manupuating)하는 역할을 한다. Model이 되기 위해서는 아래의 3가지 규칙을 따라야 한다.

사용자가 편집하고 싶은 모든 데이터를 가지고 있어야 한다.

View나 Controller에 대해서 어떤 정보도 알 수 없다.

변경이 일어난 경우에, 변경을 어떻게 알릴 지에 대한 방법이 구현해야 한다.

뷰 (View)

View는 사용자가 실제로 브라우저에서 볼 수 있는 사용자 인터페이스(UI)를 의미한다. 사용자는 View를 통해 서버에서 정보를 받아오거나 혹은 서버로 특정 값들과 함께 요청을 보낼 수 있다. View는 아래의 3가지 규칙을 따라야 한다.

Model이 가지고 있는 정보를 따로 저장하면 안된다.

Model이나 Controller를 알고 있을 필요가 없다.

변경이 일어난 경우에, 변경을 어떻게 알릴 지에 대한 방법이 구현해야 한다.

컨트롤러(Controller)

컨트롤러는 Model과 View 사이의 중간자 역할을 하며 데이터의 흐름을 관리하는 기능을 수행한다. 위에서 말했듯이, Model과 View는 서로 모르는 상태이고, 서로 변경이 일어날 시 알리는 방법만 구현이 되어있다. 이 때, 이 변경이 된 상황을 바로 이 컨트롤러에 알리는 것이다. 그러면 컨트롤러는 각각의 변경사항을 전달받아 알맞게 이벤트를 처리하는 것이다. 컨트롤러는 아래의 2가지 규칙을 따라야 한다.

Model이나 View에 대해 알고 있어야 한다.

Model이나 View의 변경을 모니터링 해야 한다.

Model, View, Controller 사이의 관계

위에서 각각의 역할에 대해 이해를 하고 아래 그림을 살펴보자.

아래는 사용자가 실제로 웹 브라우징을 할 때 일어날 수 있는 상황을 그림에 따라 설명한 것이다.

사용자는 Brower를 통해 URL 을 요청하면, Router를 타고 Controller의 적절한 URL에 매핑되어 매핑된 View 를 보여준다.

사용자는 반환된 View 에서 값이 필요한 경우 적절하게 입력하고, 원하는 동작을 위해 적절한 요청을 보낸다.

에서 보낸 요청은 Controller로 전달되고, 이 요청을 처리하기위해 Model로 데이터 가공 요청을 한다.

Model은 가공된 데이터를 Controller로 전달하고, 이를 바탕으로 변경된 View 를 사용자에게 보여준다.

MVC 패턴의 장점

MVC 패턴을 사용할 경우 아래와 같은 장점들이 있다.

컴포넌트의 명확한 역할 분리로 인해 결합도를 낮출 수 있다.

코드의 재사용성 및 확장성을 높일 수 있다.

서비스를 유지보수하고 테스트하는데 용이해진다.

개발자 간의 커뮤니케이션 효율성을 높일 수 있다.

MVC 패턴의 단점

복잡한 시스템에서 컨트롤러의 비중이 높아진다면 Massive-View-Controller 현상을 피할 수 없다. 아래 사진처럼 하나의 컨트롤러에 많은 Model과 View가 연결되면 컨트롤러의 부하가 커질 수 밖에 없다. 이는 Model과 View를 변경할 때 엮여있는 부분이 많으므로, 변경 시 많은 사이드이펙트를 야기할 수 있다.

MVC 패턴 적용 예제 코드

아래는 Express.js 환경에서 ejs 템플릿 엔진과 함께 구현해볼 수 있는 간단한 예제이다.

Model (User.js)


class User {
  constructor(id = '', password = '', name = '') {
    this.id = id;
    this.password = password;
    this.name = name;
  }
  // getter, setter, and other methods ...
}

Controller (UserController.js)


// other methods ...
exports.getUsers = (req, res, next) => {
  // userService.findUsers()
  // -> DB에서 모든 사용자 목록 가져오는 기능이 구현되어 있다고 가정
  const users = userService.findUsers();
  res.status(200).render('users', {
    users: users,
  });
};
// other methods ...

View (users.ejs)


<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
            </tr>
          </thead>
          <tbody>
            <% for (let user of users) { %>
            <tr>
              <td><%= user.id %></td>
              <td><%= user.name %></td>
            </tr>
            <% } %>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

결론

오늘은 MVC 패턴이 무엇이고, 어떻게 동작하는 지, 그리고 장단점에 대해 알아보았다. 또한, 예제 코드를 작성하며 MVC 패턴을 실제로 구현해보고 어떻게 동작하는 지 실제로 알아보았다. MVC 패턴은 정말 실무에서 자주 사용하는 디자인 패턴으로 이번 기회에 다시 개념을 정리할 수 있는 기회가 되었다.

MVC 패턴에 대해 알아보자!생성일2024. 10. 23.태그작성자Beomgu Jeon

MVC 패턴에 대해 알아보자!