Spring (5) MVC 패턴

destro·2025년 4월 29일

2. Spring

목록 보기
5/17
post-thumbnail

1. MVC 패턴

Ⅰ. Template Engine

📚 동적 웹 페이지 생성 도구. 템플릿을 기반으로 정적인 부분과 동적인 데이터 결합으로 HTML, XML 등 문서생성 역할 → UI(User Interface)를 만들며, SSR(Server Side Rendering)에 사용

  • 등장이유 : 자바 코드로 HTML을 생성하지 않고 HTML에 동적인 변경점만 자바 코드를 넣으면 편리함
  • 대표적인 템플릿 엔진
    1. Thymeleaf
      • Spring과 통합이 잘 되어있다.
      • 다양한 기능을 포함하고 있다.
    2. JSP(Java Server Pages)
      • 예전엔 많이 사용했으나, 현재 안 쓰는 추세
    3. FreeMarker
    4. Velocity
    5. Mustache

Ⅱ. MVC 패턴 개요

Servlet이나 JSP만으로 비지니스 로직과 View Rendering 까지 모두 처리하면 너무 많은 역할을 하게 되고 유지보수가 굉장히 어려워져서(책임이 너무 많음) 고안된 패턴이다. Web Application은 일반적으로 MVC(Model View Controller) 패턴을 사용한다.

→ 백엔드 웹 기술의 역사 첫 번째

  1. Servlet 예시
@WebServlet("/hello-world")
public class HelloWorldServlet extends HttpServlet {
		
		// User 저장소
    private UserRepository repository = new UserRepository();
    
    public HelloWorldServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
        throws ServletException, IOException {
        
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        
        try {
            // 비지니스 로직을 처리하는 코드
            // 파라미터 조회 
            String userIdParam = request.getParameter("userId");
            Long userId = null;
            if (userIdParam != null) {
                userId = Long.parseLong(userIdParam);
            }
            
            // 회원 조회 
            String userInfo = repository.findById(userId);
            
            // 화면을 그리는 코드 START
            out.println("<h1>Hello World!</h1>");
            out.println("<div>조회한 회원의 정보: " + userInfo + "</div>");
            // 화면을 그리는 코드 END
            
           
        } catch (NumberFormatException e) {
	        // parsing 에러가 발생한 경우
            out.println("<div>Invalid user ID format</div>");
        } finally {
            out.close();
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
        throws ServletException, IOException {        
        doGet(request, response);
    }
}

  • Servlet 문제점

    • 화면을 그리는 View 영역과 비지니스 로직이 Servlet 하나에 모두 섞여있다.
    • 책임을 너무 많이 가지고 있다.

  • Servlet 동작 순서

    1. 사용자가 Client(브라우저)를 통해 서버에 HTTP Request 즉, API 요청을 한다.

    2. 요청을 받은 Servlet 컨테이너는 HttpServletRequest, HttpServletResponse객체를 생성한다.

    3. 설정된 정보(URL, HTTP Method)를 통해 어떠한 Servlet에 대한 요청인지 찾는다.

    4. 해당 Servlet에서 service 메서드를 호출한 뒤 브라우저의 요청 Method에 따라 doGet() 혹은doPost() 등의 메서드를 호출한다.

    5. 서버에서 응답을 생성한 뒤 HttpServletResponse객체에 응답을 담아 Client(브라우저)에 반환한다.

    6. 응답이 완료되면 생성한 HttpServletRequest, HttpServletResponse객체를 소멸한다.

  1. JSP 예시
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
		<!-- HTML 코드... -->
		<!-- <%...%> 영역에는 Java 코드를 사용할 수 있다. -->
    <%
		    // 게시글 저장소 싱글톤으로 인스턴스 생성
		    BoardRepository boardRepository = BoardRepository.getInstance();
		    
		    // 게시글 제목, 내용 
        String title = request.getParameter("title");
        String content = request.getParameter("content");
        
        // 게시글 객체 생성
        Board board = new Baord(title, content);
        
        // 게시글 객체 저장
        repository.save(board);
        
    %>
    <div>
        ID : <input type ="text" name = "id" value="<%=id %>">
    </div>
		<!-- JSP 코드... -->
		<!-- HTML 코드... -->
    <jsp:forward page="<%=url %>" />
</body>
</html>

  • Servlet 코드에서 HTML을 만드는 부분인 View가 분리되었다.

  • Servlet과 JSP 구조

  • Servlet, JSP 방식의 문제점
    1. Servlet만을 사용한 경우 View를 위한 코드와 비지니스 로직을 처리하는 코드가 Servlet에 모두 존재하여 유지보수가 어려워진다.
    2. JSP를 사용하여 View를 분리하였지만 비지니스 로직의 일부가 JSP 파일안에 존재한다. 여전히 책임이 많아 유지보수가 어렵다.

Ⅲ. MVC 패턴

📚 하나의 Servlet이나 JSP로 처리하던 것들을 Model, View, Controller 영역으로 나눈것이다.

→ 백엔드 웹 기술의 역사 두번째

  • 핵심 내용
    • View가 분리된 이유의 핵심은 변경이다.
    • 기획이 변하지 않는 이상 비지니스 로직과 View의 수정 원인은 별개로 발생한다.
      • 화면 구성에 수정이 발생하면 View만 변경
      • 요구사항에 수정이 발생하는 경우 비지니스 로직 변경
    • 즉, 서로 연관이 없는 코드끼리 함께 존재할 필요가 없다. 완전히 분리하자
  • MVC 패턴 구조

  • Controller

    • 예시 코드에서 Servlet에 해당하는 영역이다.
    1. HTTP Request를 전달받아 파라미터를 검증한다.
    2. 비지니스 로직을 실행한다.
      • 비지니스 로직을 Controller에 포함하게되면 Controller가 너무 많은 역할을 담당하게 되어 일반적으로 Service Layer를 별도로 만들어서 처리한다.
      • Database와 상호작용 하는 Layer를 따로 구분하여 Repository Layer를 추가로 구성한다.
      • 위와 관련된 자세한 내용인 Layered Architecture는 다음 강의에서 알아보자.
      • Controller도 비지니스 로직을 포함할 수 있지만 일반적으로 Service Layer를 호출하는 역할을 담당한다.
    3. View에 전달할 결과를 조회하여 Model 객체에 임시로 저장한다.

  • Model

    1. View에 출력할 Data를 저장하는 객체이다.
    2. View는 비지니스 로직이나 Data 접근을 몰라도 되고 View Rendering에만 집중하면 된다.(책임 분리)

  • View

    • 예시 코드에서 JSP에 해당하는 영역이다.
    1. Model 객체에 담겨져 있는 Data를 사용하여 화면을 Rendering 한다.

Ⅳ. MVC 패턴의 문제점

MVC 패턴을 적용 후 View의 역할은 필요한 데이터를 Model 에서 참조하여 화면을 그리는 역할만 수행하면 된다. 하지만 Controller에 해당하는 부분은 여전히 문제를 가지고 있다.

  • MVC 패턴 적용

  • 문제점

    1. dispatcher.forward(request, response) View로 이동하는 forward가 항상 중복 호출된다.
    2. String path= “/WEB-INF/views/new-form.jsp” View의 path를 입력(중복 작업)한다.
      1. jsp 파일의 경로 혹은 이름이 바뀌면 해당 코드가 변경되어야 한다.
      2. JSP 이외의 확장자를 사용하려면 전체가 변경되어야 한다.
    3. HttpServletResponse 객체를 사용하는 경우가 적다. (JSP에서 모두 해결하기 때문)
      1. HttpServletRequest와 HttpServletResponse는 Test 코드를 작성하기도 매우 힘들다.
    4. 공통 기능이 추가될수록 Controller에서 처리해야 하는 부분들이 많아진다.

  • 공통 기능 처리

    • 모든 컨트롤러에서 공통으로 적용되는 기능을 뜻한다.

      ex) Log 출력, 인증, 인가 등

공통 기능을 Method로 분리하여 각각의 컨트롤러에서 사용하면 되는것 아닌가요?

공통 기능으로 만들어놓은 Method 또한 항상 중복적으로 호출이 필요합니다. 또한, 사람인 개발자가 작업하다보면 Method를 호출하는 일을 깜빡 할수도 있고 Method가 많아지면 많아질수록 Controller의 책임이 점점 커지겠죠? Method를 분리하여도 여전히 해결하지 못하는 문제점으로 남습니다. 과연 어떻게 이런 문제점들을 해결할 수 있을까요? 프론트 컨트롤러 패턴에 대해 알아봅시다.

Ⅴ. 프론트 컨트롤러 패턴

Servlet(Controller)이 호출되기 전에 공통 기능을 하나의 Servlet에서 처리해주는 패턴이다. 프론트 컨트롤러(Servlet) 하나에 모든 클라이언트측 요청이 들어온다.

→ 입구가 오직 하나, 프론트 컨트롤러(Servlet)에서 공통 기능을 처리하면 된다.

  • 프론트 컨트롤러 패턴 구조

  • 프론트 컨트롤러의 역할

    1. 모든 요청을 하나의 프론트 컨트롤러가 받는다.
    2. 공통 기능을 처리한다.
    3. 요청을 처리할 수 있는 Controller를 찾아서 호출한다.(Controller Mapping)
    4. 프론트 컨트롤러를 제외한 나머지 컨트롤러는 Servlet을 사용하지 않아도 된다.
      • 일반 Controller들은 HttpServlet을 상속받거나, @WebServlet을 사용하지 않아도 된다.

  • 프론트 컨트롤러 의문점

    • 프론트 컨트롤러를 사용하면 모든 컨트롤러에서 같은 형태의 응답을 해야하는가?

  • 위 그림처럼 공통 처리 로직에 모든 컨트롤러가 연결되기 위해서는 모든 컨트롤러가 return 하는 결과의 형태가 동일해야 한다.
  • 하지만, Controller 마다 로직이나 응답해야하는 결과는 당연히 다를테고 응답을 동일하게 맞추려고 한다면 해당 애플리케이션은 확장성, 유지보수성을 잃는다.
  • 공통 로직에서 응답별로 퍼즐을 다시 하나하나 처리할 수 있으나 공통 부분의 책임이 너무 커지게된다. 또한, 컨트롤러에서 반환되는 결과가 달라지면 공통처리 부분의 변경또한 불가피하다.
  • 바로 여기서 고안된것이 ooo oo이다!

Ⅵ. 어댑터 패턴

다양한 컨트롤러(Handler)를 유연하게 만들기위해 어댑터 패턴을 도입하게 되었다. 컨트롤러들은 동일한 인터페이스를 구현하도록 하고 해당 인터페이스와 공통 로직 사이에 어댑터를 두어 유연하게 만든다. 서로 다른 인터페이스를 갖는 두 클래스를 연결해주는 패턴이다.

어댑터란?
다른 전기나 기계 장치를 서로 연결해서 작동할 수 있도록 만들어 주는 결합 도구다.

  • 어댑터 패턴 구조

1. 컨트롤러(Handler)는 비지니스 로직을 처리하고 알맞은 결과를 반환한다.
2. 어댑터는 공통 로직과 컨트롤러(Handler)가 자연스럽게 연결되도록 한다.
3. 프론트 컨트롤러는 공통으로 처리되는 로직을 수행한다.

  • 어댑터 패턴 장점

    • 프론트 컨트롤러, 어댑터, 핸들러 모두 각자의 역할만 수행한다. (책임 분리)
    • 새로운 컨트롤러(Handler)가 추가되어도 컨트롤러와 어댑터만 추가한다면 공통 로직의 변경이 발생하지 않는다.

  • 요약

    1. Servlet 사용
      • 비지니스 로직을 처리하는 코드와 화면을 그리는 View 코드가 함께 존재하는 문제
    2. JSP 사용
      • View 에 해당하는 코드를 분리하였지만, 여전히 비지니스 로직을 JSP에 포함하는 문제
    3. MVC 패턴 사용
      • 공통 로직을 처리하는것에 코드가 중복되는 문제
    4. 프론트 컨트롤러 패턴 사용
      • 공통 로직을 하나의 입구에서 처리하기 위해서 프론트 컨트롤러 패턴 적용
      • 각각의 핸들러 호출 후 응답을 프론트 컨트롤러에 맞게 변형시켜야 하는 문제
    5. Spring MVC 사용
      • 프론트 컨트롤러 패턴, 어댑터 패턴이 모두 적용된 현재
      • 우리가 사용하는 Spring을 이용한 Web Application 개발 방식에 사용됨
      • Spring은 MVC 패턴에 프론트 컨트롤러 패턴, 어댑터 패턴이 적용되어 있다.

2. 실습 : MVC 패턴이 적용된 Servlet, JSP

📚 MVC 패턴을 적용한 JSP를 사용하게되면 화면을 그려내는 View 부분과 비지니스 로직을 실행하는 부분의 역할이 구분된다.

→ 백엔드 웹 기술의 역사 세번째

  • 디렉토리 구조

  • src/main/java

    • 해당 디렉토리 내부 .java 파일만 Compile한다.

  • webApp/WEB-INF/views

    • JSP, HTML 존재

  • build.gradle 의존성 추가

    • 프로젝트 생성시 반드시 jar가 아닌 war를 선택해야 한다.
// Spring Boot 3.0 미만
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
implementation 'javax.servlet:jstl'
providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'

// Spring Boot 3.0 이상
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
implementation 'jakarta.servlet:jakarta.servlet-api'
implementation 'jakarta.servlet.jsp.jstl:jakarta.servlet.jsp.jstl-api'
implementation 'org.glassfish.web:jakarta.servlet.jsp.jstl'
providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
  • Servlet 등록 설정
    • 작성한 Servlet을 Servlet Container에 등록한다. 
package com.example.springbasicjsp;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;

@SpringBootApplication
@ServletComponentScan
public class SpringBasicJspApplication {

	public static void main(String[] args) {
		SpringApplication.run(SpringBasicJspApplication.class, args);
	}

}
  • Servlet Container
  1. 블로그 작성 기능
    • Post 객체
      • 블로그 글 객체
package com.example.springbasicjsp;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class Post {

    private Long id;
    private String title;
    private String content;

    public Post(String title, String content) {
        this.title = title;
        this.content = content;
    }

}
  • PostRepository
    • 블로그 글을 저장하는 저장소
public class PostRepository {
	private static Map<Long, Post> database = new HashMap<>();
	
	private static long incrementId = 0L;
	private static final PostRepository instance = new PostRepository();
  
	public static PostRepository getInstance() {
	  return instance;
	}
  
	private PostRepository() {}

	// Post 저장			
	public Post save(Post post) {
	  post.setId(++incrementId);
    database.put(post.getId(), post);
    return post;
	}
	
	// Post 전체 조회
	public List<Post> findAll() {
	  return new ArrayList<>(database.values());
	}

}
  • 블로그 작성 폼 Servlet
    • 블로그 작성 화면을 호출할 때 동작하는 Servlet
    • Model 객체를 사용하지 않는다.
package com.example.springbasicjsp;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(
        name = "mvcPostFormServlet",
        urlPatterns = "/mvc/posts"
)
public class MvcPostFormServlet extends HttpServlet {

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

        // webapp/WEB-INF/views -> WEB-INF 내부의 파일은 외부에서 호출할 수 없다.
        String path = "/WEB-INF/views/post-form.jsp";
        // 이때 Controller에서 View로 이동
        RequestDispatcher dispatcher = request.getRequestDispatcher(path);
        // forward : Servlet에서 다른 Servlet이나 jsp 호출
        dispatcher.forward(request, response);

    }
}
  • Redirect 와 Forward 차이점
    • Redirect
      • 클라이언트에 Response(redirect URL)가 전달 되었다가 클라이언트 측에서 redirect 경로로 다시 요청한다. URL이 실제로 변한다.
    • Forward
      • 서버 내부에서 발생하는 호출로 클라이언트가 인지하지 못한다.
  • 블로그 작성 Form(post-form.jsp) JSP
    • webapp/WEB-INF/views/post-form.jsp
    • 블로그 작성 폼 Servlet 호출시 반환되는 View
    • Model 객체를 사용하지 않는다.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="UTF-8">
  <title>블로그 포스트 작성 페이지</title>
</head>
<body>
<h1>블로그 글쓰기</h1>
<form action="posts/save" method="post">
  title: <input type="text" name="title" placeholder="제목" />
  content: <input type="text" name="content" placeholder="내용" />
  <button type="submit">저장</button>
</form>

</body>
</html>
  • 블로그 작성 Form Servlet 호출
    - http://localhost:8080/mvc/posts
  1. 블로그 저장 기능
    • 블로그 글 저장 Servlet
      • 블로그 작성 폼 제출(Submit)시 동작할 Servlet
package com.example.springbasicjsp;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

@WebServlet(
        name = "mvcPostSaveServlet",
        urlPatterns = "/mvc/posts/save"
)
public class MvcPostSaveServlet extends HttpServlet {

    // Singleton
    private PostRepository postRepository = PostRepository.getInstance();

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

        String title = request.getParameter("title");
        String content = request.getParameter("content");

        Post post = new Post(title, content);
        postRepository.save(post);

        // Model에 Data를 보관한다.
        // request 내부 임시 저장소에 post저장
        request.setAttribute("post", post); // MODEL

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

    }
}
  • 저장결과(save-result.jsp) JSP
    • webapp/WEB-INF/views/save-result.jsp
    • 저장 Servlet 호출후 반환되는 View
    • Model에 저장되어 있는 post 객체에 접근하여 화면을 그려낸다.
<!-- request 객체 안에 setAttribute로 post를 임시 저장했음 -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<h1>글작성 성공!!!</h1>
<ul>
    <li>id=${post.getId()}</li>
    <li>title=${post.getTitle()}</li>
    <li>content=${post.getContent()}</li>
</ul>
</body>
</html>
  • 블로그 글 저장 Servlet 호출
    - 데이터 입력 후 저장버튼 클릭

    글 작성 성공

  1. 블로그 글 목록 조회 기능
    • 블로그 글 목록 조회 Servlet
      • 블로그 글 목록 조회시 동작하는 Servlet
package com.example.springbasicjsp;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.util.List;

@WebServlet(
        name = "mvcPostListServlet",
        urlPatterns = "/mvc/posts/list"
)
public class MvcPostListServlet extends HttpServlet {

    private PostRepository postRepository = PostRepository.getInstance();

    @Override
    protected void service(
            HttpServletRequest request,
            HttpServletResponse response
    ) throws ServletException, IOException {
        // 회원 목록 조회
        List<Post> posts = postRepository.findAll();

        // request 객체의 임시저장소 Model에 posts를 저장
        request.setAttribute("posts", posts);

        String path = "/WEB-INF/views/posts.jsp";
        RequestDispatcher dispatcher = request.getRequestDispatcher(path);
        dispatcher.forward(request, response);
    }
}
  • 블로그 글 목록 조회(posts.jsp) JSP
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <meta charset="UTF-8">
    <title>글 목록 조회</title>
</head>
<body>
<table>
    <thead>
    <th>id</th>
    <th>title</th>
    <th>content</th>
    </thead>
    <tbody>
    <c:forEach var="post" items="${posts}">
        <tr>
            <td>${post.id}</td>
            <td>${post.title}</td>
            <td>${post.content}</td>
        </tr>
    </c:forEach>
    </tbody>
</table>
</body>
</html>

  • 블로그 글 목록 조회 Servlet 호출

    • 글 추가

      		- 추가성공

      		- 글목록조회

      업로드중..

  • 결과

    • MVC 패턴이 적용되며 Controller와 View가 분리되었다.
    • 화면에 수정이 발생하면 화면(View)만 수정하고 로직에 수정이 발생하면 로직만 수정하면 된다.
profile
destro
<포르투갈어> 솜씨 있는. 재간 있는. 능란한. 기민한. (재주가) 비상한.
이전 포스트

Spring (4) Annotation, Lombok, Gradle

다음 포스트

Spring (6) Spring MVC

0개의 댓글