MVC(Model, View, Controller) Pattern

6 분 소요


Wiki
모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다.

어플리케이션을 세 개의 영역으로 분할하고 각 구성 요소에게 고유한 역할을 부여하는 개발 방식입니다. MVC 패턴을 도입하면 도메인(비즈니스 로직) 영역과 UI 영역이 분리되므로 서로 영향을 주지 않고 유지보수가 가능합니다. MVC 패턴의 구조를 살펴보면서 각 컴포넌트가 무슨 역할을 수행하는지 알아보도록 하겠습니다.

MVC 패턴 구조

MVC 패턴은 이름에서도 알 수 있듯이 모델(Model), 뷰(View), 컨트롤러(Controller) 세 개의 컴포넌트로 이루어졌습니다. 각 컴포넌트는 고유한 역할을 수행합니다. 이미지를 통해 전체적인 구조를 파악하고 컴포넌트 별로 무슨 역할을 수행하는지 정리해보았습니다.

MVC 패턴 다이어그램 및 웹 어플리케이션에서 사용하는 일반적인 MVC 패턴
이미지 출처, [Wiki, 모델-뷰-컨트롤러][wiki-link]


모델(Model)

DATA, 정보들의 가공을 책임지는 컴포넌트를 말합니다.

모델(Model)은 어플리케이션의 정보, 데이터를 나타냅니다. 데이타베이스, 처음의 정의하는 상수, 초기화 값, 변수 등을 뜻합니다. 비즈니스 로직을 처리한 후 모델의 변경사항을 컨트롤러와 뷰에 전달합니다.

모델은 다음과 같은 규칙을 가지고 있습니다.

  • 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 합니다.
  • 뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 합니다.
  • 변경이 일어나면, 변경 통지에 대한 처리 방법을 구현해야만 합니다.

뷰(View)

사용자에게 보여지는 부분, 즉 유저 인터페이스(User interface)를 의미합니다.

MVC 패턴은 여러 개의 뷰(View)가 존재할 수 있으며, 모델에게 질의하여 데이터를 전달받습니다. 뷰는 받은 데이터를 화면에 표시해주는 역할을 가지고 있습니다. 모델에게 전달받은 데이터를 별도로 저장하지 않아야 합니다. 사용자가 화면에 표시된 내용을 변경하게 되면 모델에게 전달하여 모델을 변경해야 합니다.

뷰는 다음과 같은 규칙을 가지고 있습니다.

  • 모델이 가지고 있는 정보를 따로 저장해서는 안됩니다.
  • 모델이나 컨트롤러와 같이 다른 구성요소들을 몰라야 됩니다.
  • 변경이 일어나면 변경통지에 대한 처리방법을 구현해야만 합니다.

컨트롤러(Controller)

모델(Model)과 뷰(View) 사이를 이어주는 브릿지(Bridge) 역할을 의미합니다.

모델이나 뷰는 서로의 존재를 모르고 있습니다. 변경 사항을 외부로 알리고 수신하는 방법만 있습니다. 컨트롤러(Controller)는 이를 중재하기 위해 모델과 뷰에 대해 알고 있어야 합니다. 모델이나 뷰로부터 변경 내용을 통지 받으면 이를 각 구성 요소에게 통지해야 합니다. 사용자가 어플리케이션을 조작하여 발생하는 변경 이벤트들을 처리하는 역할을 수행합니다.

컨트롤러는 다음과 같은 규칙을 가지고 있습니다.

  • 모델이나 뷰에 대해서 알고 있어야 합니다.
  • 모델이나 뷰의 변경을 모니터링 해야 합니다.

MVC 패턴 왜 사용할까?

MVC 패턴에 대한 여러 글을 읽어봤지만 결국 '유지보수의 편리성'이라는 하나의 결론으로 수렴합니다. 최초 설계를 꼼꼼하게 진행한 시스템이라도 유지보수가 발생하기 시작하면 각 기능간의 결합도(coupling)가 높아지는 경우가 발생합니다. 이는 최초 설계 이념을 정했던 사람들의 부재 혹은 비즈니스 요건 변경으로 인해 필연적으로 발생하는 것 같습니다. 결합도가 높아진 시스템은 유지보수 작업 시 다른 비즈니스 로직에 영향을 미치게 되므로 사소한 코드의 변경이 의도치 않은 버그를 유발할 수 있습니다.

선배 개발자들은 이런 문제점을 해결하기 위해 UI 시스템의 핵심 컴포넌트를 모델, 뷰, 컨트롤러로 나누고 각 컴포넌트가 자신의 수행 결과를 다른 컴포넌트에게 전달하는 프로그래밍 방식을 만들었습니다. MVC 패턴을 가진 시스템의 각 컴포넌트는 자신이 맡은 역할만 수행한 후 다른 컴포넌트로 결과만 넘겨주면 되기 때문에 시스템 결합도를 낮출 수 있습니다. 유지보수 시에도 특정 컴포넌트만 수정하면 되기 때문에 보다 쉽게 시스템 변경이 가능합니다. (화면의 변경은 only 뷰, 데이터나 비즈니스 요건이 변경은 only 모델, 뷰와 모델 변경에 따른 일부 컨트롤러 변경)

MVC 패턴의 한계

세상에 완벽이라는 단어는 없습니다. MVC 패턴에도 한계가 존재합니다. 복잡한 대규모 프로그램의 경우 다수의 뷰와 모델이 컨트롤러를 통해 연결되기 때문에 컨트롤러가 불필요하게 커지는 현상이 발생합니다. 복잡한 화면을 구성하는 경우에도 동일한 현상이 발생하는데 이를 'Massive-View-Controller' 라고 합니다.

Massive-View-Controller

이미지 출처, https://www.infoq.com/news/2014/05/facebook-mvc-flux/


이런 문제점을 보완하기 위해 다양한 패턴이 파생되었습니다.

  • MVP 패턴
  • MVVM 패턴
  • Flux
  • Redux
  • RxMVVM

MVC 패턴의 적용 사례

MVC 패턴은 Spring 프레임워크와 JSP(Java Servlet Page)를 사용한 웹 어플리케이션 개발에서 가장 즐겨 사용되는 개발 방식입니다. Spring Boot 프레임워크는 공식적으로 JSP를 지원하지 않지만, 개발은 가능하므로 이를 이용해 간단한 예제를 구현해보았습니다.

MVC 패턴 적용 시나리오
  1. 브라우저 화면에서 서버로 데이터를 전달합니다.
  2. 컨트롤러에서 데이터를 전달받아 서비스에게 데이터를 전달합니다.
  3. 서비스는 JpaRepository를 이용하여 전달받은 데이터를 데이터베이스에 INSERT 합니다.
  4. INSERT 수행 후 컨트롤러는 서비스를 통해 데이터를 다시 조회합니다.
  5. 조회한 데이터를 모델 객체를 통해 뷰에게 전달합니다.
  6. 화면에 변경이 발생하는지 확인합니다.

패키지 구조

pom.xml 파일 dependency 추가

  • Spring Boot 프레임워크는 JSP를 공식적으로 지원하지 않기 때문에 아래와 같은 의존성들이 필요합니다.
  • jstl - JSP 페이지를 작성할 때 사용할 수 있는 액션과 함수가 포함된 라이브러리
  • jasper - Tomcat의 JSP 엔진, JSP 파일을 구문 분석하여 서블릿 Java 코드로 변환하는 기능을 제공
    <dependencies>
    ...
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>

        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>
    ...
    </dependencies>

application.yml

  • .jsp 파일 경로를 알려주기 위해 다음과 같은 설정을 추가합니다.
  • spring.mvc.view.prefix=/WEB-INF/jsp/
  • spring.mvc.view.suffix=.jsp
server:
  port: 8081
spring:
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/mysqldb?characterEncoding=UTF-8&serverTimezone=UTC
    username: root
    password: 1234
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    database-platform: org.hibernate.dialect.MySQL5InnoDBDialect
    hibernate:
      ddl-auto: update

index.jsp

  • 뷰(View) 역할을 수행하는 JSP 입니다.
  • /src/main 폴더 하위에 /webapp/WEB-INF/jsp 폴더를 만들고 JSP 파일을 추가합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>멤버 등록</title>
</head>
<body>
    <div>
        <form action="/jsp/member/index" method="post">
            <p>
                ID : <input type="text" name="id" />
                비밀번호 : <input type="password" name="password" />
                이름 : <input type="text" name="memberName" />
                E-MAIL : <input type="text" name="memberEmail" />
            </p>
            <p>
                <input type="submit" value="전송" />
        </form>
    </div>
    <div class="container">
        <table class="table table-hover table table-striped">
            <tr>
                <th>ID</th>
                <th>이름</th>
                <th>E-MAIL</th>
            </tr>
            <c:forEach items="${memberList}" var="member">
                <tr>
                    <th>${member.getId()}</th>
                    <th>${member.getMemberName()}</th>
                    <th>${member.getMemberEmail()}</th>
                </tr>
            </c:forEach>
        </table>
    </div>
</body>
</html>

JspController 클래스

  • 컨트롤러(Controller) 역할을 수행하는 클래스입니다.
  • /jsp/member/index 경로로 전달받은 POST 요청을 memberService 클래스를 이용해 INSERT
  • memberService 클래스를 이용해 데이터 조회 후 JSP 화면 렌더링 시 사용하는 model 객체에게 데이터를 전달합니다.
package blog.in.action.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import blog.in.action.domain.member.Member;
import blog.in.action.domain.member.MemberService;

@Controller
@RequestMapping(value = "/jsp/member")
public class JspController {

    private final MemberService memberService;

    public JspController(MemberService memberService) {
        this.memberService = memberService;
    }

    @GetMapping("/index")
    public String index(Model model) {
        List<Member> memberList = memberService.findAll();
        model.addAttribute("memberList", memberList);
        return "index";
    }

    @PostMapping(path = "/index")
    @Transactional(propagation = Propagation.REQUIRED)
    public String register(HttpServletRequest servletRequest, Model model) {
        Member member = new Member();
        member.setId(servletRequest.getParameter("id"));
        member.setPassword(servletRequest.getParameter("password"));
        member.setMemberName(servletRequest.getParameter("memberName"));
        member.setMemberEmail(servletRequest.getParameter("memberEmail"));
        memberService.registMember(member);
        List<Member> memberList = memberService.findAll();
        model.addAttribute("memberList", memberList);
        return "index";
    }
}

MemberService 클래스

  • 모델(Model) 역할을 수행하는 클래스입니다.
  • 서비스 객체는 데이터 CRUD, 인증과 관련된 비즈니스 로직을 수행합니다.
package blog.in.action.domain.member;

import java.util.Collection;
import java.util.List;
import java.util.Optional;
import java.util.stream.Collectors;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Service;

@Service
public class MemberService implements UserDetailsService {

    @Autowired
    private MemberRepository memberRepository;

    @Autowired
    private PasswordEncoder passwordEncoder;

    public Member registMember(Member member) {
        String encodedPassword = passwordEncoder.encode(member.getPassword());
        member.setPassword(encodedPassword);
        return memberRepository.save(member);
    }

    public Member findById(String id) {
        Optional<Member> option = memberRepository.findById(id);
        if (!option.isPresent()) {
            return null;
        }
        return option.get();
    }

    public List<Member> findAll() {
        return memberRepository.findAll();
    }

    // 계정이 갖고있는 권한 목록을 return
    private Collection<? extends GrantedAuthority> authorities(Member member) {
        return member.getAuthorities().stream().map(authority -> new SimpleGrantedAuthority(authority)).collect(Collectors.toList());
    }

    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        Optional<Member> option = memberRepository.findById(username);
        if (!option.isPresent()) {
            throw new UsernameNotFoundException(username);
        }
        // ID, PASSWORD, AUTHORITIES 반환
        Member member = option.get();
        return new User(member.getId(), member.getPassword(), authorities(member));
    }
}
테스트 결과

OPINION

사용자 인터페이스가 필요한 어플리케이션에서 가장 즐겨 사용되는 디자인 패턴입니다. MVC 패턴에 대해 주어 들은 건 있어서 어느 정도 설명은 가능하지만, 구체적으로 정리해보지 않았기 때문에 포스트로 한번 정리해보았습니다. 디자인 패턴에 대해 공부하고, 이를 적용하고 싶은 마음은 굴뚝 같지만 쉽지 않습니다. 책을 읽어봐도 이해가 쉽지 않아 관련된 공부 방법을 찾아 보던 중 Okky 커뮤니티 멘토이신 fender 님의 글이 굉장히 인상 깊어 제 블로그에 옮겨왔습니다.

디자인패턴과 알고리즘
일단 그런 질문을 하는 개발자들의 수준을 대략적으로 일반화해보면 아마도 사용해본 프레임워크의 예제를 조금씩 변형해서 비슷한 프로그램을 찍어낼 수 있는 능력을 갖추었을 것입니다. 하지만 그런 프레임워크가 어떻게 동작하고 왜 그런 모양으로 생겼는지는 이해하지 못할 것이고, 당연히 비슷한 프레임워크 같은 것을 만들 수 있는 능력은 없을 것입니다.
…(중략)
그리고 객체지향 언어로 좋은 API를 설계하려면, 또한 그 이전에 그렇게 설계된 스프링 프레임워크 등의 API를 이해하려면 결국 디자인 패턴을 공부해야 합니다.

조금은 공부 방법에 힌트가 되는 글이었습니다. 아직 경험이 적은 개발자이기 때문에 프레임워크에 적용된 좋은 사례를 찾아보고 왜 적용되었는지, 해당 디자인 패턴을 적용하여 얻을 수 있는 이점은 무엇인지에 대해 고민해보고 정리하는 식의 공부를 진행해보려 합니다.

해당 코드는 blog-in-action 저장소에서 확인 가능합니다.

REFERENCE

댓글남기기