MVC 프레임워크 만들기, 프론트 컨트롤러 패턴 소개, 프론트 컨트롤러 도입 - v1, View 분리 - v2, Model 추가 - v3

  출처 : 인프런 - 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 (유료) / 김영한님  
  유료 강의이므로 정리에 초점을 두고 코드는 일부만 인용  

https://inf.run/Gmptq

---

1. 프론트 컨트롤러 패턴 소개

(1) 프론트 컨트롤러 도입 전/후 관계도

좌) 프론트 컨트롤러 도입 전 / 우) 프론트 컨트롤러 도입 후

 

(2) FrontController 패턴 특징

• 프론트 컨트롤러 서블릿 하나로 클라이언트의 요청을 받음, 프론트 컨트롤러도 서블릿임
• 프론트 컨트롤러가 요청에 맞는 컨트롤러를 찾아서 호출하여 입구를 하나로 통합, 공통 로직을 처리함
• 프론트 컨트롤러를 제외한 나머지 컨트롤러는 서블릿을 사용하지 않아도 됨(@Webservlet, extends HttpServlet)

(3) 스프링 웹 MVC와 프론트 컨트롤러

• 스프링 웹 MVC의 핵심도 FrontController임
• 스프링 웹 MVC의 DispatcherServlet이 FrontController 패턴으로 구현 되어 있음

---

2. 프론트 컨트롤러 도입 - v1

1) V1

(1) 프론트 컨트롤러 최초 도입

• 프론트 컨트롤러를 단계적으로 도입
• v1 버전에서는 기존 코드를 최대한 유지하면서 프론트 컨트롤러를 도입

(2) v1의 구조

 

(3) ControllerV1 - 인터페이스

• web하위에 frontcontroller.v1 패키지 생성 후 작성
• 다형성을 활용하기 위해 서블릿과 비슷한 컨트롤러 인터페이스를 작성
• 각 컨트롤러들은 해당 인터페이스를 구현하고 프론트 컨트롤러는 인터페이스를 호출해서 구현과 관계없이 로직의 일관성을 가져갈 수 있음

package hello.servlet.web.frontcontroller.v1;

public interface ControllerV1 {
    // 서블릿과 똑같은 추상 메서드 작성
    void process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException;
}

 

(4) MemberFormControllerV1, MemberSaveControllerV1, MemberListControllerV1 - 회원등록, 회원저장, 회원조회 컨트롤러V1

• v1패키지 하위에 controller 패키지를 생성후 작성
• ControllerV1 인터페이스를 구현하여 process()메서드를 구현하는 구조만 다를 뿐 기존의 service()메서드와 process()메서드의 내부 로직은 동일함(모든 v1 컨트롤러에 적용)

package hello.servlet.web.frontcontroller.v1.controller;

public class MemberFormControllerV1 implements ControllerV1 {
    @Override
    public void process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 기존 코드와 동일
    }
}

public class MemberSaveControllerV1 implements ControllerV1 {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    public void process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 기존 코드와 동일
    }
}

public class MemberListControllerV1 implements ControllerV1 {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    public void process(HttpServletRequest request, HttpServletResponse response)
                        throws ServletException, IOException {
        // 기존 코드와 동일
    }
}

 

(5) FrontControllerServletV1 - 프론트컨트롤러v1

• v1패키지에 작성
• 프론트 컨트롤러만 서블릿을 사용 즉, @WebServlet과 HttpServlet를 상속받는 코드를 사용함
• /front-controller/v1을 포함한 모든 하위 요청을 해당 서블릿에서 받아들임
• controllerMap: key = 매핑 URL, value = 호출될 컨트롤러
• service(): 먼저 getRequestURI()로 URI를 조회하여 실제 호출할 컨트롤러를 controllerMap에서 찾아서 해당 컨트롤러를 실행하고, requestURI에 해당되는 컨트롤러가 없으면 404 상태코드를 반환

package hello.servlet.web.frontcontroller.v1;

@WebServlet(name = "frontControllerServletV1", urlPatterns = "/front-controller/v1/*")
public class FrontControllerServletV1 extends HttpServlet {

    // key: 매핑 URL / value: 호출될 컨트롤러(객체)
    private Map<String, ControllerV1> controllerMap = new HashMap<>();

    public FrontControllerServletV1() {
        controllerMap.put("/front-controller/v1/members/new-form", new MemberFormControllerV1());
        controllerMap.put("/front-controller/v1/members/save", new MemberSaveControllerV1());
        controllerMap.put("/front-controller/v1/members", new MemberListControllerV1());
    }

    @Override
    // requestURI를 조회해서 실제 호출할 컨트롤러를 controllerMap에서 조회, 없으면 404를 반환
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("FrontControllerServletV1.service");

        //호출된 URI값을 얻을 수 있음
        String requestURI = request.getRequestURI();

        ControllerV1 controller = controllerMap.get(requestURI);
        if (controller == null) {
            response.setStatus(HttpServletResponse.SC_NOT_FOUND);
            return;
        }
        // 컨트롤러를 찾으면 process를 호출해서 해당 컨트롤러를 실행 
        controller.process(request, response);

    }
}

 

** JSP는 이전 MVC에서 사용했떤 것을 그대로 사용

---

3. View 분리 - v2

1) V2

(1) 뷰 중복 코드 제거

• 모든 컨트롤러에서 뷰로 이동하는 부분에 중복이 발생함
• 별도로 뷰를 처리하는 객체를 만들어 분리

String viewPath = "/WEB-INF/views/members.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);
dispatcher.forward(request, response);

 

(2) V2 구조

(3) MyView

• 뷰 객체는 이후 다른 버전에서도 함께 사용하기에 패키지 위치를 frontcontroller에 작성
• 별도로 뷰를 처리하는 객체 생성하여 dispatcher.forward를 해당 객체에서 호출
• 인터페이스로 설계하여 다른 뷰 템플릿 엔진으로 확장할 수 있도록 설계할 수 있지만 예제이기도하고, 구현 프로그램의 규모가 작으므로 구현클래스로 작성

package hello.servlet.web.frontcontroller;

public class MyView {

    private String viewPath;

    public MyView(String viewPath) {
        this.viewPath = viewPath;
    }

    public void render(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);
        dispatcher.forward(request, response);
    }
}

 

(4) ControllerV2 - 인터페이스

• process()메서드의 반환타입을 MyView로 반환

package hello.servlet.web.frontcontroller.v2;

public interface ControllerV2 {
    // MyView 타입으로 반환
    MyView process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException;
}

 

(5) MemberFormControllerV2, MemberSaveControllerV2, MemberListControllerV2 - 회원등록, 회원저장, 회원조회 컨트롤러V2

• 각 컨트롤러에 dispatcher.forward()를 직접 생성해서 호출하지 않아도 됨(코드 중복이 제거됨)
• 단순히 MyView객체 생성 후 생성자에 뷰이름만 넣어주고 반환하면 됨
• V1의 코드들과 비교해보면 중복되었던 부분이 확실하게 제거된 것을 확인할 수 있음

package hello.servlet.web.frontcontroller.v2.controller;

public class MemberFormControllerV2 implements ControllerV2 {
    @Override
    public MyView process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        return new MyView("/WEB-INF/views/new-form.jsp");
    }
}

public class MemberSaveControllerV2 implements ControllerV2 {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    public MyView process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // ... 저장 로직은 v1와 동일
        
        return new MyView("/WEB-INF/views/save-result.jsp");
    }
}

public class MemberListControllerV2 implements ControllerV2 {
    
    private MemberRepository memberRepository = MemberRepository.getInstance();
    
    @Override
    public MyView process(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // ... 조회 로직은 v1와 동일
        
        return new MyView("/WEB-INF/views/members.jsp");
    }
}

 

(6) FrontControllerServletV2 - 프론트컨트롤러v2

• ControllerV2의 반환타입이 MyView이므로 프론트 컨트롤러 V2의 controller.process는 호출결과를 MyView로 반환받음
• view.render를 호출하면 forward 로직을 수행해서 JSP가 실행됨
• 프론트컨트롤러의 도입으로 MyView 객체의 render()메서드를 호출하는 것을 모두 일관되게 처리가 가능해졌으며 각각의 컨트롤러는 MyView 객체를 생성해서 반환하기만 하면 됨

package hello.servlet.web.frontcontroller.v2;

@WebServlet(name = "frontControllerServletV2", urlPatterns = "/front-controller/v2/*")
public class FrontControllerServletV2 extends HttpServlet {

    // HashMap생성, 생성자 작성코드 -> FrontControllerServletV1 코드와 동일
    
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // requestURI조회 및 404반환코드 -> FrontControllerServletV1 코드와 동일
        
        // 컨트롤러가 있으면 view.render를 호출
        MyView view = controller.process(request, response);
        view.render(request, response);
    }
}

 

---

4. Model 추가 - v3

1)V3

(1) 서블릿 종속성 제거

• 컨트롤러 입장에서 HttpServletRequest와 HttpServletResponse가 꼭 필요하지 않지만 서블릿 스펙상 계속 해당 코드를 작성해야함
• 요청 파라미터의 정보는 Java의 Map으로 대신 넘기도록 하면 지금 구조에서는 컨트롤러가 서블릿 기술을 몰라도 동작할 수 있음
• request객체를 Model로 사용하는 대신 별도의 Model 객체를 만들어서 반환하면 구현하는 컨트롤러가 서블릿 기술을 전혀 사용하지 않도록 변경할 수 있음
• 구현 코드가 매우 단순해지고 테스크 코드 작성이 쉬운 장점이 생김

(2) 뷰 이름 중복 제거

• 컨트롤러에서 지정하는 viewPath 경로가 중복이 되고 있음
• 컨트롤러가 뷰의 논리 이름을 반환하고 실제 물리 위치의 이름은 프론트 컨트롤러에서 처리하도록 단순화 해두면 향후 뷰의 폴더 위치가 함께 이동해도 프론트 컨트롤러만 고치면 됨
• /WEB-INF/views/new-form.jsp 의 경로에서 new-form처럼 jsp파일의 이름이 논리 이름임

(3) V3 구조

 

(4) ModelView

• 모델 객체는 이후 다른 버전에서도 함께 사용하기에 패키지 위치를 frontcontroller에 작성
• 지금까지는 서블릿에 종속적인 HttpServletRequest를 사용했고 Model도 request.setAttribute()를 통해 데이터를 저장하고 뷰에 전달하였음
• 서블릿 종속성을 제거하기 위해 직접 Model을 만들고 View 이름까지 전달하는 객체를 생성
• 뷰의 이름과 뷰를 렌더링할 때 필요한 model 객체를 가지고 있음
• model은 단순히 Map으로 되어있으므로 컨트롤러에서 뷰에 필요한 데이터를 key, value의 형태로 넣어주면 됨

package hello.servlet.web.frontcontroller;

@Getter @Setter
public class ModelView {
    private String viewname;
    private Map<String, Object> model = new HashMap<>();

    public ModelView(String viewname) {
        this.viewname = viewname;
    }
}

 

(5) ControllerV3 - 인터페이스

• ModelView로 반환
• 서블릿 기술을 전혀 사용하지 않아 구현이 매우 단순해지고 테스트코드를 작성하기 쉬워짐
• HttpServletRequest가 제공했던 파라미터는 프론트컨트롤러가 paramMap에 담아서 호출하고 응답결과로 뷰 이름과 뷰에 전달할 Model 데이터를 포함하는 ModelView객체를 반환

package hello.servlet.web.frontcontroller.v3;

public interface ControllerV3 {
    ModelView process(Map<String, String> paramMap);
}

 

(6) MemberFormControllerV3, MemberSaveControllerV3, MemberListControllerV3 - 회원등록, 회원저장, 회원조회 컨트롤러V3

• ModelView 생성시 view의 논리적인 이름만 지정하고 실제 물리적인 이름은 프론트 컨트롤러에서 처리하도록 변경
• 회원저장 컨트롤러에서 파라미터 정보는 Map에 담겨 있으므로 paramMap.get()으로 필요한 요청파라미터를 조회
• 모델도 Map이므로 뷰에서 필요한 member객체를 mv.getModel().put()으로 담아서 모델에 반환(ModelView)

package hello.servlet.web.frontcontroller.v3.controller;

public class MemberFormControllerV3 implements ControllerV3 {
    @Override
    public ModelView process(Map<String, String> paramMap) {
        // viewPath의 논리적 이름만 입력 -> 논리적 이름은 설계시 미리 정의
        return new ModelView("new-form");
    }
}

public class MemberSaveControllerV3 implements ControllerV3 {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    public ModelView process(Map<String, String> paramMap) {
        String username = paramMap.get("username");
        int age = Integer.parseInt(paramMap.get("age"));

        Member member = new Member(username, age);
        memberRepository.save(member);

        ModelView mv = new ModelView("save-result");
        mv.getModel().put("member", member);
        return mv;
    }
}

public class MemberListControllerV3 implements ControllerV3 {

    private MemberRepository memberRepository = MemberRepository.getInstance();
    
    @Override
    public ModelView process(Map<String, String> paramMap) {
        List<Member> members = memberRepository.findAll();
        
        ModelView mv = new ModelView("members");
        mv.getModel().put("members", members);
        return mv;
    }
}

 

(7) FrontControllerServletV3 - 프론트컨트롤러v3

• createParamMap 메서드의 HttpServletRequest에서 파라미터 정보를 꺼내 Map으로 변환(paramMap)하고 컨트롤러에 전달하면서 호출
• viewResolver 메서드로 컨트롤러가 반환한 논리 뷰 이름을 실제 물리 뷰 경로로 변경 하고 실제 물리 경로가 있는 MyView 객체를 반환함
• 즉, 컨트롤러가 반환한 논리 뷰 이름이 members 라면 뷰 리졸버를 통해 실제 물리 뷰 경로인 /WEB-INF/views/members.jsp가 반환됨
• view.render(mv.getModel(), ...)코드에서 컴파일 오류가 발생하므로 MyView객체에 필요한 메서드를 추가
• view.render()에 모델정보를 전달하면 JSP로 포워드 해서 JSP를 렌더링함

package hello.servlet.web.frontcontroller.v3;

@WebServlet(name = "frontControllerServletV3", urlPatterns = "/front-controller/v3/*")
public class FrontControllerServletV3 extends HttpServlet {

    private HashMap<String, ControllerV3> controllerMap = new HashMap<>();

    public FrontControllerServletV3() {
        controllerMap.put("/front-controller/v3/members/new-form", new MemberFormControllerV3());
        controllerMap.put("/front-controller/v3/members/save", new MemberSaveControllerV3());
        controllerMap.put("/front-controller/v3/members", new MemberListControllerV3());
    }

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String requestURI = request.getRequestURI();
        ControllerV3 controller = controllerMap.get(requestURI);
        if (controller == null) {
            response.setStatus(HttpServletResponse.SC_NOT_FOUND);
            return;
        }
        
        Map<String, String> paramMap = createParamMap(request);
        ModelView mv = controller.process(paramMap);

        String viewName = mv.getViewName();
        MyView view = viewResolver(viewName);
        view.render(mv.getModel(), request, response);
    }

    private Map<String, String> createParamMap(HttpServletRequest request) {
        Map<String, String> paramMap = new HashMap<>(); 
        
        request.getParameterNames().asIterator()
                .forEachRemaining(paramName -> paramMap.put(paramName, request.getParameter(paramName)));
        return paramMap;
    }

    private MyView viewResolver(String viewName) {
        return new MyView("/WEB-INF/views/" + viewName + ".jsp");
    }
}

 

(8) MyView 코드 추가

• 메서드 오버로딩으로 파라미터가 3개인 render()메서드를 생성
• modelToRequestAttribute(): JSP는 getAttribute를 통해서 데이터를 조회하기때문에 입력받은 model 정보를 setAttribute로 데이터를 저장하는 로직을 메서드로 추출, 만약 다른 템플릿 엔진을 사용할 경우 그에 맞게 변경하면 됨

package hello.servlet.web.frontcontroller;

public class MyView {

    // ... 기존 코드 동일

    public void render(Map<String, Object> model, HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        modelToRequestAttribute(model, request);
        RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);
        dispatcher.forward(request, response);
    }

    private void modelToRequestAttribute(Map<String, Object> model, HttpServletRequest request) {
        model.forEach((key, value) -> request.setAttribute(key, value));
    }
}