[Spring] 스프링 MVC 1 - Servlet

💡Refferecne [외부 링크]스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

1. Spring MVC 1 - Servlet

1. 개요

스프링 프레임워크가 없던 시절로 돌아가서 어떻게 사용자가 요청한 페이지를 찾아내고 필요한 데이터(Payload) 를 가공하여 처리, 응답하였는지 알아보자. 또한 스프링 프레임워크의 핵심적인 역할을 파악하기 위해 프론트 컨트롤러 형태의 나만의 프레임워크를 직접 제작해보자.

2. Servlet

우선 다음 두 가지 용어를 정리하고 넘어가자.

• Web Server
  • 정적 리소스 파일을 제공
  • 잘 다운되지 않고 비용이 적음
  • Nginx, Apache 등
• WAS (Web Application Server)
  • 애플리케이션 로직을 이용하여 동적인 데이터 반환 (정적 리소스도 제공할 수 있음)
  • 프로그램 코드를 실행 (JAVA의 경우 Servlet)
  • 다운 빈도가 높고 비용이 비쌈
  • Tomcat, Jetty 등

[Servlet 이란?]

원래대로라면 개발자는 HTTP 통신을 위해 다음과 같은 작업들을 해야 한다.

• 소켓 연결
• 전문 파싱
• 헤더 확인
• 자원 위치 확인
• 비지니스 로직 실행
• 응답 전문 생성
• 소켓 종료

하지만 다음과 같은 과정들을 모든 통신마다 지엽적으로 관리/반복 해주는 것은 생산성이 매우 떨어지는 작업이 될 것이다. 이를 위해 Servlet 에서는 요청과 응답을 Request 와 Response 로 추상화 하여 개발자가 비지니스 로직 자체에 집중하도록 도와준다.

앞서 WAS가 애플리케이션을 이용하여 사용자의 요청에 대해 동적으로 응답을 반환한다고 하였다. 이 때 JAVA 를 이용하여 사용자의 요청에 응답하기 위한 컴포넌트가 바로 Servlet 이다.

하나의 웹 애플리케이션은 여러개의 요청을 받을 수 있으므로 (회원가입 요청, 게시글 조회 요청 등) 복수 개의 서블릿을 WAS 에 등록하고 관리할 필요가 있다. 이처럼 복수의 서블릿을 수용하며 지원하는 톰캣과 같은 WAS 를 서블릿 컨테이너라고 한다.

톰캣 서블릿 컨테이너

서블릿 컨테이너가 하는 자세한 역할들은 다음과 같다.

• 각 요청에 대한 쓰레드 생성 및 생명주기 관리
• 요청받은 자원 위치와 서블릿 매핑 (URL 매핑)
• 서블릿 생명주기 관리 (싱글톤으로 관리 됨)

여기서 서블릿의 생명주기 관리에 대해 조금 더 자세히 알아보자면, 클라이언트로부터 특정 서블릿의 로직을 수행해달라는 요청을 받고 난 뒤 해당 서블릿이 초기화(인스턴스 생성) 되어있지 않다면 init() 메소드를 실행하여 인스턴스를 생성하여 관리하고, 이미 생성 된 인스턴스가 존재한다면 서블릿의 service() 메소드를 호출하여 비지니스 로직을 수행한다.

이 때 서블릿 내에서 어떤 HTTP 메소드를 처리할지 분기할 수 있다. 생성 된 서블릿은 임의로 종료하지 않으면 톰캣이 종료될 때 destroy() 메소드를 호출하여 종료한다.

[Servlet 생명주기]

Servlet Lifecycle

서블릿에 대한 요청이 발생하면 서블릿 컨테이너는 우선 해당 서블릿이 생성(인스턴스 화) 되었는지 확인한다.

생성 된 서블릿이 존재하지 않는다면 init() 메소드를 실행하여 인스턴스를 생성한다. 서블릿은 싱글톤으로 관리되기 때문에 기존에 만들어진 서블릿이 존재한다면 service() 메소드로 비지니스 로직만을 수행한다.

만들어진 서블릿들은 톰캣 종료 시 destroy() 를 호출하여 종료한다.

[Servlet 직접 사용하기]

이제부터 서블릿을 직접 사용하여 요청에 응답하는 애플리케이션을 만들어보자. 우선 start.spring.io Spring Web 및 Lombok 정도 추가하여 프로젝트를 세팅한다. (gradle, Java 11, Spring 2.7.x, war)

SpringBoot 에서는 메인 실행 지점의 @SpringBootApplication 애노테이션 위에 @ServletComponentScan 애노테이션을 추가해주는 것으로 서블릿 컴포넌트를 추가할 수 있도록 설정한다.

@ServletComponentScan
@SpringBootApplication
public class FrameworkApplication {
	public static void main(String[] args) {
		SpringApplication.run(FrameworkApplication.class, args);
	}
}

첫번째 서블릿 컴포넌트를 추가하기 위해 @WebServlet 애노테이션을 추가해주고 HttpServlet 추상 클래스를 상속받는다. 그리고 서블릿의 비지니스 로직 실행부인 service() 메소드를 오버라이드 하여 로직을 구현한다.

우선 간단하게 요청과 응답 정보, 쿼리스트링 파라미터 정도를 출력해보자. 서블릿에 응답을 전달할때에는 response 객체에 직접 응답 내용을 작성하면 된다.

@Slf4j
@WebServlet(name = "hello", urlPatterns = "/hello")
public class HelloServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        log.info("HelloServlet.service");
        log.info("request : {}", request);
        log.info("response: {}", response);

        String parameter = request.getParameter("parameter");
        log.info("parameter : {}", parameter);

        response.setContentType("text/plain");
        response.setCharacterEncoding("utf-8");
        response.getWriter().write("response :" + parameter);
    }
}

2023-10-19 14:43:07.538  INFO 7851 --- [nio-8080-exec-3] me.jwjung.framework.basic.HelloServlet   : HelloServlet.service
2023-10-19 14:43:07.538  INFO 7851 --- [nio-8080-exec-3] me.jwjung.framework.basic.HelloServlet   : request : org.apache.catalina.connector.RequestFacade@7d506757
2023-10-19 14:43:07.538  INFO 7851 --- [nio-8080-exec-3] me.jwjung.framework.basic.HelloServlet   : response: org.apache.catalina.connector.ResponseFacade@17537908
2023-10-19 14:43:07.539  INFO 7851 --- [nio-8080-exec-3] me.jwjung.framework.basic.HelloServlet   : parameter : hello

3. Servlet 활용

이제부터 본격적으로 서블릿을 사용하여 간단한 회원가입 애플리케이션을 만들어 볼 예정이다. 서블릿은 MVC 패턴에서 컨트롤러 역할에 속하기 때문에 도메인을 담당할 회원과 회원객체에 대한 저장소를 먼저 구현해보자.

• 회원 객체

@Getter
@EqualsAndHashCode
public class Member {

    private long id;
    private String name;
    private int age;

    private Member() {};

    public Member(String name, int age) {
        this.name = name;
        this.age = age;
    }
}

아이디, 이름, 나이를 가진 간단한 회원 객체를 생성 했다. 다음으로 저장, 조회정도를 지원하는 저장소 객체를 생성해보자.

public class MemberRepository {

    private static Map<Long, Member> store = new ConcurrentHashMap<>();
    private static AtomicLong sequence = new AtomicLong(0L);

    @Getter
    private static MemberRepository instance = new MemberRepository();

    public void save(Member member) {
        setIdWithReflection(member);
        store.put(member.getId(), member);
    }

    private void setIdWithReflection(Member member) {
        
        try {
            Class<Member> memberClass = Member.class;
            Field id = memberClass.getDeclaredField("id");
            id.setAccessible(true);
            id.set(member, sequence.incrementAndGet());
        } catch (NoSuchFieldException | IllegalAccessException e) {
            throw new IllegalStateException("Reflection Exception", e);
        }
    }

    public Member findById(Long id) {
        return store.get(id);
    }

    public List<Member> findAll() {
        return new ArrayList<>(store.values());
    }

    public void clearStore() {
        store.clear();
    }
}

뒷단의 비지니스 로직이 완성되었으므로 이제 클라이언트가 직접 호출 할 view 를 제공해야 한다.

우선은 HTML 을 이용하여 간단한 폼을 통해 가입을 처리 할 예정이므로 HTML Form 을 제공하는 서블릿을 작성한다.

@Slf4j
@WebServlet(name = "memberFormServlet", urlPatterns = "/servlet/members/new-form")
public class MemberFormServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");

        PrintWriter w = response.getWriter();
        StringBuilder htmlBuilder = new StringBuilder();
        String html = htmlBuilder
                .append("<!DOCTYPE html>\n")
                .append("<html>\n")
                .append("<head>\n")
                .append("    <meta charset=\"UTF-8\">\n")
                .append("    <title>Title</title>\n")
                .append("</head>\n")
                .append("<body>\n")
                .append("<form action=\"/servlet/members/save\" method=\"post\">\n")
                .append("    username: <input type=\"text\" name=\"username\" />\n")
                .append("    age:      <input type=\"text\" name=\"age\" />\n")
                .append(" <button type=\"submit\">전송</button>\n")
                .append("</form>\n")
                .append("</body>\n")
                .append("</html>\n").toString();
        w.write(html);
    }
}

먼저 작성해 본 서블릿과 동일하게 html 내용을 문자열로 작성하여 response 객체에 반환해주면 된다.

다음으로 form 의 post 요청을 처리해 줄 서블릿도 하나 작성하자.

@WebServlet(name = "memberSaveServlet", urlPatterns = "/servlet/members/save")
public class MemberSaveServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        String username = request.getParameter("username");
        int age = Integer.parseInt(request.getParameter("age"));

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

        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        PrintWriter w = response.getWriter();

        StringBuilder htmlBuilder = new StringBuilder();
        String html = htmlBuilder
                .append("<!DOCTYPE html>\n")
                .append("<html>\n")
                .append("<body>\n")
                .append("성공\n")
                .append("<ul>")
                .append("    <li>id=" + member.getId() + "</li>\n")
                .append("    <li>username=" + member.getName() + "</li>\n")
                .append(" <li>age=" + member.getAge() +  "</li>\n")
                .append("</ul>\n")
                .append("</body>\n")
                .append("</html>").toString();
        w.write(html);
    }
}

memberFormServlet 응답

memberSaveServlet 응답

이로써 Servlet 을 활용한 우리의 첫번째 복잡한(?) 비지니스 로직이 완성되었다. 🎉

[문제점들]

서블릿을 통해 비지니스 로직을 구현하면서 HTTP 스펙을 추상화 하여 편리하게 사용할수는 있게 되었지만, 서블릿 하나에 화면과 비지니스 로직이 통합되어 있으므로 지속적인 개발에 불편한 점들이 몇가지 존재한다.

1. Java 문자열 타입으로 HTML 을 관리하므로 동적인 HTML 을 그리기가 힘들다.
2. 화면을 변경하는데 서비스 로직이 새로 빌드되거나, 서비스 로직을 변경하는데 화면도 같이 빌드가 되어야 한다.
3. 코드가 너무 길어진다.

결국 이는 화면(View)과 서비스(Service)의 책임이 분리되지 않아서 발생하는 일로, 이를 분리하기 위해 템플릿 엔진 을 사용한다. 최근에는 스프링 진영에서 대표적인 템플릿 엔진으로 타임리프를 사용하지만, 당시에는 JSP 를 많이 사용하였으므로 이번 프로젝트에서도 JSP 를 이용해보자.

4. JSP

우선 Spring Boot 프로젝트에서 JSP 를 사용하기 위해서는 build.gradle 에 다음 의존성들을 추가해야 한다.

implementation 'org.apache.tomcat.embed:tomcat-embed-jasper' 
implementation 'javax.servlet:jstl'

그리고는 위에서 문자열로 관리했던 HTML 소스를 JSP 파일로 옮겨보자.

• 회원가입 양식

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="/jsp/members/save.jsp" method="post">
    username: <input type="text" name="username"/>
    age: <input type="text" name="age"/>
    <button type="submit">전송</button>
</form>
</body>
</html>

• 회원가입 완료

<%@ page import="me.jwjung.framework.basic.domain.member.MemberRepository" %>
<%@ page import="me.jwjung.framework.basic.domain.member.Member" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //request, response 사용 가능
    MemberRepository memberRepository = MemberRepository.getInstance();
    String username = request.getParameter("username");
    int age = Integer.parseInt(request.getParameter("age"));
    Member member = new Member(username, age);
    System.out.println("member = " + member);
    memberRepository.save(member);
%>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
성공
<ul>
    <li>id=<%=member.getId()%></li>
    <li>username=<%=member.getName()%></li>
    <li>age=<%=member.getAge()%></li>
</ul>
</body>
</html>

해당 jsp 파일들을 main/webapp/ 하위 경로에 위치시키고 확장자를 포함하여 호출할 수 있다.

예) localhost:8080/jsp/members/new-form.jsp

5. MVC 패턴

[등장 배경]

jsp 파일에 HTML 코드 및 몇가지 비지니스 로직을 이관한 결과 동적으로 HTML 을 그리는 문제는 해결되었다. 하지만 대상이 servlet 코드에서 jsp 로 옮겨왔을 뿐 HTML 코드와 비지니스 로직, 특히 저장소를 오고가는 로직까지 너무 많은 역할을 한쪽(JSP) 에서 담당하고 있으므로 다음과 같은 문제들은 여전히 해결되지 않았다.

1. 여전히 한 쪽의 코드가 너무 길어질 수 있을 뿐더러, 연관 없는 레이어의 코드들이 혼재해있다.
2. View 와 비지니스 로직의 변경의 라이프사이클 이 서로 다르다는 점이다. 바꿔 말하자면 비지니스 로직를 수정하는 주기와 화면을 변경해야 하는 주기가 완전히 일치하지 않는다는 것이다.
3. 데이터를 동적으로 출력하는 데에 특화되어 있는 것이 템플릿 엔진이지만 때문에 각자 잘하는 기능만 맡아서 할 수가 없다.

이런 문제들을 해결하기 위해 구조적 개선 방안으로 MVC 패턴이 등장하게 된다.

[MVC 패턴 구조]

MVC 패턴에는 다음과 같은 요소들이 필요하다.

Controller
HTTP 통신의 창구가 되며, 화면에 전달할 데이터를 가공한다. 이때 데이터를 처리하거나 조회하는 등의 복잡한 비지니스 로직은 역할을 다시 분산하기 위해 서비스 레이어에 위임하는 것이 일반적이다. 컨트롤러는 Model 에 응답 할 데이터를 가공하여 전달하는 역할만을 수행한다.

View
앞서 JSP 와 같이 Model 을 통해 전달받은 데이터를 출력한다. 이 때, 동적으로 화면을 렌더링 할 수 있도록 템플릿 엔진에서 여러 기능을 지원한다.

Model
Controller 와 View 사이의 데이터를 주고받기 위한 매개체 역할을 한다.

MVC 패턴 이전의 호출 구조

MVC 패턴 적용 후 호출구조

[MVC 패턴 적용]

앞서 작성한 코드들을 MVC 패턴에 맞춰 변경해보자. 우선 MemberFormServlet 을 MVC 역할에 맞게 뷰와 연결해준다. 이때, 새로 만들 jsp 템플릿은 WEB-INF 하위 경로에 위치시켜준다. WEB-INF 하위 자원들은 기존처럼 경로만 입력하여 사용자가 접근하는 것을 막을 수 있다. 즉, 무조건 컨트롤러를 통해 반환되어야 한다.

@WebServlet(name = "mvcMemberFormServlet", urlPatterns = "/servlet-mvc/members/new-form")
public class MvcMemberFormServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

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

서블릿은 이제 view 의 경로만 dispatcher 를 통해 넘겨준다. dispatcher.forward() 메소드는 redirect 와 다르게 서버 내에서 재호출이 일어나므로 클라이언트가 호출이 변경된 것을 인지하지 못한다.

다음으로 기존의 /members/new-form.jsp 파일을 복사해서 WEB-INF 하위의 적당한 경로로 옮겨주고, Form 태그 내의 action 속성 경로를 절대경로로 변경해준다. 이렇게 상대 경로로 변경하면 현재 url 경로에서 계층 경로를 유지한채 마지막 자원 위치만 변경된다.

• 기존 Url: /servlet-mvc/members/new-form
• 이동 Url: /servlet-mvc/members/save

<form action="save" method="post">
    username: <input type="text" name="username"/>
    age: <input type="text" name="age"/>
    <button type="submit">전송</button>
</form>

다음으로 저장을 실제로 실행하는 서블릿도 MVC 패턴을 적용해보자.

@WebServlet(name = "mvcMemberSaveServlet", urlPatterns = "/servlet-mvc/members/save")
public class MvcMemberSaveServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String username = request.getParameter("username");
        int age = Integer.parseInt(request.getParameter("age"));

        Member member = new Member(username, age);
        System.out.println("member = " + member);
        memberRepository.save(member);

        //Model 에 저장된 데이터 저장
        request.setAttribute("member", member);

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

서블릿이 비지니스 로직만을 들고가고 처리 결과를 Model 을 통해 view 로 넘기는 것을 확인할 수 있다.

이제 view 에서는 넘어온 model 의 데이터를 단순히 렌더링 하는 역할만을 수행하면 된다. 다음 코드를 보자

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body> 성공
<ul>
    <li>id=${member.id}</li>
    <li>username=${member.username}</li>
    <li>age=${member.age}</li>
</ul>
<a href="/index.html">메인</a>
</body>
</html>

model 의 값을 el 표현식으로 가져와 렌더링 해주는 정도 이외의 로직은 전부 제거된 것을 확인할 수 있다.

[한계]

MVC 패턴을 적용함으로써 초기 문제였던 역할이 분산되지 못하는 문제를 어느정도 해결한 것으로 보인다. 하지만 아직 몇 가지 문제점들이 남아있다.

1. 중복되는 코드들
   • dispatcher.forward() 호출이나, viewPath 선언 등, 컨트롤러별로 중복되는 코드들이 여전히 많이 남아있다.
2. viewPath 를 다루는 방식
   • 전체경로와 확장자를 문자열로 다루기 때문에 jsp 파일을 이동시키거나, 템플릿 확장자를 html 이나 다른 파일로 변경하면 코드를 수정해야 한다.
3. request 객체와 response 객체 선언이 강제
   • request, response 객체를 상시 사용하는것이 아닌데 선언이 되어야 한다. 이로 인해 테스트코드 작성등도 어려워진다.
4. 공통처리의 어려움
   • 각 컨트롤러들이 공통으로 처리해야 하는 부분이 많아져도 각각의 서블릿(컨트롤러)에 처리해주어야 하므로 공통기능을 묶기가 어렵다.

다음 시간에는 이러한 문제들을 프론트 컨트롤러 패턴을 적용한 나만의 프레임워크를 제작해보면서 해결해보고, 스프링이 이러한 문제들을 어떻게 해결하였는지 알아보도록 하겠다.