📝 웹서비스 프로그래밍 8장 MVC 패턴의 이해

CHAP.08 MVC 패턴의 이해

1. MVC 패턴

디자인 패턴

• 디자인 패턴(Design Pattern)
  • 건축학적 관점에서 출발한 개념
  • 1994년 Gof의 <<Design Patterns: Elements of Reusable Object-Oriented Software>>를 통해 소프트웨어 설계에서 공통적으로 발생하는 문제에 대한 재사용 가능한 솔루션으로 제시
  • Gof의 디자인 패턴은 생성, 구조, 행동, 동시 실행 등의 문제의 대해 여러 패턴을 제시하고 있으며 UML 클래스 다이어그램을 이용해 구조 표현
• UML(Unified Modeling Language)
  • 객체지향 설계와 구현을 지원하기 위해 만들어진 일종의 모델링 언어
  • 시스템 분석, 설계에 필요한 내용을 여러 다이어그램 형태로 정의한 규격

추상 팩토리 패턴

• 추상(Abstract): 자바의 추상 클래스 Abstract Class에도 사용되는 표현으로 구체적인 내용의 구현을 하위 객체에 위임하는 모델
• 팩토리(Factory): 디자인 패턴에서 객체를 생성하는 역할
• 추상팩토리는 객체를 생성하는 것을 별도로 구현하되 관련된 구체적인 구현을 하위 클래스에서 담당하게 하는 설계 모델
• 추상 팩토리 패턴 UML 클래스 다이어그램[별도 이미지 추가]

MVC 패턴

• Model-View-Controller의 약어
• GUI 기반의 어플리케이션 개발에 사용되는 디자인 패턴
• 백 엔드 기반의 웹 어플리케이션 개발의 기본모델
  • 모바일 앱 및 FE 기반 웹 어플리케이션 개발이 늘어나면서 MVP(Model-View-Presenter), MVVM(Model-View-ViewModel)과 같은 패턴도 널리 사용됨
• MVC 패턴의 목적은 화면과 데이터 처리를 분리하여 코드간 종속성을 줄이는 것
  • 구성요소간 역할을 명확하게 하여 코드를 쉽게 분리하고 협업에 용이

• MVC패턴 구조[별도 이미지 추가]

• 모델(Model)
  • 데이터를 처리하는 영역
  • 일반적으로 DB와 연동을 위한 DAO(Data Access Object) 클래스와 데이터 구조를 표현하는 DO(Data Object, 엔티티 클래스) 등으로 구성
  • 모델은 뷰나 컨트롤러에 독립적인 구조로 DB처리를 필요로 하는 여러 어플리케이션에 공유 할 수 있으며, 웹 어플리케이션이 아닌 경우에도 사용 가능
• 뷰(View)
  • 화면의 구성을 담당하는 영역
  • 주어진 데이터를 출력하는 용도로만 사용하는 것이 바람직
  • 뷰에서 데이터를 직접 가져오는 방식은 권장하지 않음
  • 뷰 영역의 구현을 위해 뷰 템플릿 엔진이 사용되며, JSP 역시 이러한 뷰 템플릿 엔진 중 하나
  • HTML 이외에 EL, JSTL등을 사용해 컨트롤러로부터 전달받은 데이터를 출력하고 HTML, CSS 등을 통해 화면 디자인
  • 뷰는 기본적으로 모델, 컨트롤러와의 종소성이 없도록 구현
• 컨트롤러(Controller)
  • MVC패턴의 핵심으로 모든 사용자 요청의 중심
  • 사용자 요청은 특정 뷰에 바로 전달되지 않고 컨트롤러를 통해 전달
  • 컨트롤러는 사용자 요청에 따라 모델을 통해 DB와 연동하여 데이터를 처리하고 뷰에 전달
  • 뷰로 전달하기 위해 데이터가 들어있는 DO 혹은 List<DO> 형태의 객체를 request에 저장한 후 포워딩
  • 컨트롤러는 특정 뷰를 지정해야 하기 때문에 뷰와 종속관계가 발생할 수 밖에 없음
    • 프로젝트의 규모가 클수록 컨트롤러는 복잡해지고 관리가 어려워지는 문제가 있음
• 컨트롤러의 구현
  • JSP, 서블릿 모두 가능
  • JSP: 간단한 기능을 구현할 때 유리
  • 서블릿: 규모 확장과 향후 스프링 프레임워크로의 확장 등에 유리
  • 컨트롤러 호출
• 컨트롤러를 구성하는 세 가지 방법
  • 사용자 요청마다 컨트롤러 만들기
  • 특정 모듈 단위로 하나의 컨트롤러 안에서 여러 요청 단위를 구분하여 처리
  • Front 컨트롤러를 따로 두어 모든 요청을 하나의 컨트롤러로 모은 다음 요청에 따라 구현 컨트롤러 호출

2. 서블릿 컨트롤러 설계

클라이언트 요청 처리

• 컨트롤러의 가장 기본적인 기능 세가지
  • 클라이언트 요청 처리
    • 클라이언트 요청을 단일 컨트롤러에서 처리할 것인지 개별 컨트롤러에서 처리할 것인지 결정해야함
    • 서블릿은 URL 요청을 GET, POST 등의 HTTP 메서드를 통해 처리하는 구조이기 때문에 여러 URL을 하나의 서블릿에서 처리할 수 있지만, URL에 따라 다른 처리를 구현할 수 없음

    • ex1) 어떤 쇼핑몰의 제품 등록과 삭제 기능

      - 제품 등록 요청 URL: /shop/addProduct
      - 제품 삭제 요청 URL: /shop/delProduct
      

      • 이때, 두 URL의 요청을 하나의 서블릿으로 처리하도록 URL 매핑 설정을 할 수 있으나, 두 요청 모두 GET 방식이라면 URL이 다르더라도 동일한 doGet() 메서드가 호출되기 때문에 어떤 요청이 호출된 것인지 구분할 수 없음
      • 따라서 각각의 URL 요청을 별도의 서블릿으로 구현해야 함

      GET방식과 POST 방식
      

      • GET 메서드는 특정 리소스의 표시를 요청할 때 사용
      • GET을 사용하는 요청은 parameter(Query String)를 통해 클라이언트에서 작성된 데이터를 서버로 전송
      • POST 메서드는 특정 서버 리소스(서블릿 등)에 데이터를 전송할 때 사용
      • GET 방식과 달리 웹 브라우저 주소창에 데이터는 보이지 않으며 데이터는 Request Body에 포함되어 전달

      • ex2) 회원 관리 프로그램의 회원 가입, 승인, 수정, 탈퇴(삭제), 로그인 기능

      - 가입 양식 화면 -> 가입 처리 컨트롤러 -> 가입 완료화면
      - 신규 회원 관리자 화면 -> 신규 회원 가입 승인 컨트롤러 -> 승인 완료 화면
      - 로그인 양식 입력 화면 -> 로그인 처리 컨트롤러 -> 메인 화면
      

      • 각각의 요청을 처리하기 위한 컨트롤러 필요
      • 입력/요청 화면과 입력 데이터를 받아 이를 처리하는 컨트롤러, 처리된 결과를 보여주기 위한 화면 필요
      • 각각의 컨트롤러를 구현해야 하지만, 같은 단위의 업무를 하나의 컨트롤러에서 처리하는것이 구조적으로 관리가 쉬울 수 있음
        • 하나의 컨트롤러에서 처리할 요청이 지나치게 많은경우 오히려 코드 관리가 어려울 수 있으므로 주의 필요
    • 사용자의 요청을 구분하여 하나의 서블릿에서 처리하기 위한 두가지 방법
      • URL의 파라미터 이용
        • URL에 action과 같이 별도의 파라미터를 두어 요청 구분

        - http://xxx.com/member?action=create
        - http://xxx.com/member?action=login
        
        member: 서블릿 URL 매핑 값
        action: 요청을 구분하기 위한 파라밑터
                
        

        • 요청에는 회원정보, 로그인 아이디 등의 사용자 데이터가 추가로 포함
        • GET, POST 방식이 모두 가능
        • 컨트롤러에서는 action값을 비교하여 별도의 메서드 구현 방식으로 처리
        • 비교적 간단한 방법이지만 action 파라미터의 구조가 변경되면 관련된 HTML,JSP,컨트롤러의 수정이 필요하다는 단점이 있음
          • URL파라미터를 이용의 실제 구현: 분기문 사용

          doGet(...){
            String action = request.getParameter("action");
            switch(action){
              case "create": createMember(); break;
              case "login": loginMember(); break;
              ...
            }
          }
          

      • Front 컨트롤러 구현
        • 모든 요청의 진입점이 되는 컨트롤러에서 서브 컨트롤러를 호출하는 구조
        • 좀 더 복잡한 구조를 체계적으로 처리 가능
        • Front 컨트롤러 패턴으로 정립되어 있어 여러 구현에 응용되는 디자인 패턴
        • 모든 요청을 하나로 모으는 방법이 필요하며, 일반적으로 서블릿 매핑의 구조적인 특징 활용

        - http://xxx.com/member/create.do
        - http://xxx.com/member/login.do
        
        /member : 회원관리 웹 어플리케이션 context 혹은 서비스 구분 경로
        *.do : 서블릿 URL 매핑 값으로 모든 요청은 하나의 서블릿 호출
        

        • 컨트롤러에서는 .do 앞의 요청 이름(create, login)으로 구분하여 별도의 메서드 혹은 서브클래스를 통해 실행
      • Front 컨트롤러 구현 장점
        • 요청에 대한 파라미터 없이 명확한 이름(create, login)으로 요청
        • 요청에 대한 URL 관리가 필요 없음
      • Front 컨트롤러 구현 단점
        • 전체 시스템의 세부 시스템이 분리되어 있는 경우
          • Context를 분리하는것은 세션 관리 등의 부담이 갈 수 있음
          • ex) 네이버와 같은 포털 형태
        • 단일 Context에 경로로 구분하는 경우
          • Front 컨트롤러에서 모든 요청을 조건문과 메서드 구현만으로 처리하기에는 컨트롤러 클래스가 비대해짐
        • 규모가 어느 수준 이상이 되면 경로에 따라 서브 컨트롤러로 포워딩 하는 처리 필요
          • 서브 컨트롤러 구현
            • URL 요청을 분석해 사용자 요청을 구분하는 작업이 우선적으로 필요
            • 메서드를 이용해 사용자 요청을 분리하여 처리
              • switch(혹은 if) 문을 사용하는 구조는 기능 추가 or 변경이 필요할 때 조건문도 함께 관리해야 하는 문제가 있음

              @WebServlet("*.do")
              public class MemberController extends HttpServlet{
                ...
                doGet(...){
                  String uri = request.getRequestURI();
                  String conPath = request.getContextPath();
                  String command = uri.substring(conPath.length());
              
                  switch(command){
                    case 'create.do': createMember(); break;
                    case 'login.do': loginMember(); break;
                  }
                }
              }
              

              • Command 패턴을 사용하면 switch(혹은 if) 구조 없이 해당 요청에 맞는 특정 컨트롤러가 실행되도록 구현

              public void init(ServletConfig sc) throws ServletException{
                Map<String, SubController> contList = new HashMap<>();
              
                contList.put("/create.do", new MemberCreateController());
                contList.put("/login.do", new LoginController());
                ...
              }
              
              public void service(HttpServletRequest request, HttpServletResponse response) throws ServletExcption, IOException{
                String url = request.getRequestURI();
                String contextPath = request.getContextPath();
                String path = url.substring(contextPath.length());
              
                SubController subController = conList.get(path);
                subController.process(request, response);
              }
                            
              // 서브 컨트롤러를 운영하는 Front 컨트롤러 설계
              // 서브 컨트롤러의 규격을 정의한 인터페이스 필요
              public interface Subcontroller{
                void process(HttpServletRequest request, HttpServletResponse response);
              }
              
              // 필요한 서브 컨트롤러 구현
              // 위의 다중 요청 처리 서블릿을 서브 컨트롤러 규격에 맞게 수정
              public class MemberController implements Subcontroller{
                void process(HttpServletRequest request, HttpServletResponse response){
                  ...
                }
              }
              

  • 입력 값 핸들링
    • 서블릿에서 클라이언트의 입력 값을 처리하려면 request.getParameter()이용
      • 회원가입 같이 여러 정보가 전달되는 경우 모든 값을 request.getParameter()로 받는것은 문제가 될 수 있음
    • DAO 클래스와 연동을 위해서는 입력 값을 Member 객체로 만든 후에 전달해야 하므로 기본적으로 다음과 같은 코드 구현이 필요

    doGet(...){
      Member m = new Member();
      m.setName(request.getParameter("name"));
      m.setTel(request.getParameter("tel"));
      ...
      dao.create(m);
    }
    

    • JSP에서는 useBean 액션을 통해 입력 값을 Member 객체로 쉽게 저장 가능
    • 서블릿에서는 그런 기능이 제공되지 않기 때문에 별도 라이브러리 사용
    • 대표적으로 Apache Commons BeanUtils 사용

    doGet(...){
      Member m = new Member();
      BeanUtils.populate(m, request.getParameterMap());
      ...
      dao.create(m);
    }
    

  • 뷰 이동
    • 컨트롤러에서 사용자 요청을 처리한 다음에는 적절한 뷰로 이동할 수 있어야 함
    • 뷰에서 보여줄 데이터를 포함해서 이동해야 하는 경우와 그렇지 않은 경우로 나뉨
    • 데이터를 포함하지 않는 경우
      • 사용자 요청 처리 후 별도의 데이터를 포함하지 않는다면 해당 페이지로 리디렉션(Redirection) 할 수 있음
      • jsp, 서블릿 모두 response.sendRedirect()사용

      response.sendRedirect('main.jsp');
      

    • 데이터를 포함하는 경우
      • request scope 속성으로 데이터 저장 후 원하는 페이지로 forwarding
      • 데이터 활용 목적에 따라 session 또는 applictaion을 사용할 수도 있으며 여러 데이터를 포함하는것도 가능

      doGet(...){
        ...
        request.setAttribute("member", m);
        RequestDispatcher dispatcher = request.getRequestDispatcher("userInfo.jsp");
        dispatcher.forward(request, response);
      }
      

3. [실습 8-1] 컨트롤러 기초 예제: 계산기 구현

컨트롤러 기초 예제: 계산기 구현

1. View 구현: calForm.html, calcResult.jsp
   • calForm.html
     • ...<form method="post" action="/jwbook/calcControl" >...</form>...
   • calcResult.jsp
     • ...결과: ${result}...
2. Model 구현: Calculator.java
3. Controller 구현: CalcController.java
   • CalcController.java

     ...@WebServlet("/calcControl")
     ...request.serAttribute("result", result);
     getServletContext().getRequestDispatcher("/ch08/calcResult.jsp").forward(request,response);
   

4. [실습 8-2] 고급 컨트롤러 서블릿 구현

고급 컨트롤러 서블릿 구현

1. View 구현: productList.jsp, productInfo.jsp
   • productList.jsp

    ...
    <c:forEach var="p" varStatus="i" items="${products}">
      <tr>
        <td>${i.count}</td>
        <td><a href="/jwbook/pcontrol?action=info&id=${p.id}">${p.name}</a></td>
        <td>${p.price}</td>
      </tr>
    </c:forEach>
    ...
   

   • productInfo.jsp

    ...
    <ul>
      <li>상품코드: ${p.id}</li>
      <li>상품명: ${p.name}</li>
      <li>제조사: ${p.maker}</li>
      <li>가격: ${p.price}</li>
      <li>등록일: ${p.date}</li>
    </ul>
    ...
   

2. Model 구현: Product.java, ProductService.java
   • ProductService.java

    import java.util.HashMap;
    import java.util.Map;
   
    public class ProductServie{
      Map<String, Product> products = new HashMap<>();
   
      public ProductService(){
        Product p = new Product("...")
        this.products.put("101",p);
        ...
      }
      public List<Product> findAll(){
        return new ArrayList<>(products.values());
      }
      public Product find(String id){
        return products.get(id);
      }
    }
   

3. Controller 구현: ProdutController.java
   • ProductController.java

    @WebServlet("/pcontorl")
    public class ProductController extends HttpServlet{
      private static final long serialVersionUID = 1L;
      ProductService = service;
      ...
      public ProductController(){
        service = new ProductService();
      }
      @Override
      protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        String action = request.getParameter("action");
        String view = "";
   
        if (request.getParameter("action") == null){
          getServletContext().getRequestDispatcher("/pcontrol?action=list").forward(request, response);
        } else{
          switch(action){
            case "list": view = list(request,response); break;
            case "info": view = info(request,response); break;
          }
          getServletContext().getRequestDispatcher("/ch08/" + view).forward(request,response);
        }
      }
   
      private String info(HttpServletRequest request, HttpServletResponse response){
        request.setAttribute("p", service.find(request.getParameter("id")));
        return "productInfo.jsp"
      }
   
      private String list(HttpServletRequest request, HttpServletResponse response){
        request.setAttribute("products", service.findAll());
        return "productList.jsp"
      }
    }