백엔드 MVC 패턴

Web Application Architecture

• JSP를 이용하여 구성할 수 있는 웹 어플리케이션 아키텍쳐는 크게 model1과 model2로 나뉜다

1. JSP가 클라이언트의 요청에 대한 logic 처리와 response page(view)에 대한 처리를 모두 하는지.
2. response page(view)에 대한 처리만 하는지

JSP란?

• javaServer Pages의 약자
• HTMl 코드에 java코드를 넣어 동적웹페이지를 생성하는 웹 어플리케이션 도구

JSP가 실행되면 자바 서블릿(Servlet)으로 변환 되어 웹 어플리케이션 서버에서 동작되면서 필요한 기능을 수행 하고 그렇게 생성된 데이터를 웹페이지와 함꼐 클라이언트로 응답한다.

용어를 공부 좀 해보자

웹(Web)

• 인터넷 기반의 정보기술 → World Wide Web의 줄임말로 쓰이며 www라고도 함.
• 전세계에 거대한 네트워크 망을 통해 정보를 공유하며 정보의 흐름은 양방향성을 가짐

웹 어플리케이션(Web Application)

• 웹에서 실행되는 응용 프로그램을 뜻하며 인터넷을 통한 은행업무, 인터넷쇼핑, 등등 인터넷에서 하는 서비스를 총칭
• 사용자가 필요한 요청을 하고 서버에서는 이에 해당하는 요청을 수행 그리고 요청한 데이터를 응답한다.

웹 어플리케이션을 구동하기 위한 몇 가지 구성요소

1. 웹 브라우저 → 클라이언트에서 요청을 하고 전달받은 페이지를 볼 수 있는 환경(크롬, firefox, Safari)
2. 웹 서버 → 클라이언트로부터 요청 받아 서버에 저장된 리소스를 클라이언트에게 전달 → 주로 정적 컨텐츠 담당
3. 웹 어플리케이션 서버 → 줄여서 was라고도 부르며 서버단에서 필요한 기능을 수행하고 그 결과를 웹서버에게 전달함
4. 데이터베이스 → 서비스에 필요한 데이터를 보관, 갱신 등을 관리

에를 통해 설명해보자 → 쇼핑몰 웹 사이트

• 웹 브라우저 (예: Chrome, Firefox, Safari)
  • 사용자가 쇼핑몰 웹사이트 접속 → 웹 브라우저 사용
  • 사용자가 입력한 url을 통해 쇼핑몰의 웹 페이지를 요청하고, 그 요청에 따라 서버로부터 받은 페이지 화면 표시
  • 사용자가 Chrome 브라우저를 통해 "www.example-shop.com"을 입력하면, 해당 웹사이트의 페이지를 불러와 보여줌
• 웹 서버(예: Apache, Nginx)
  • 웹 서버는 클라이언트(웹 브라우저)로부터 HTTP 요청을 받고, 요청에 따라 서버에 저장된 정적 리소스(HTML, CSS 이미지 등)를 클라이언트에게 전달
  • 웹 서버는 주로 정적인 콘텐츠를 처리하며 복잡한 로직이나 데이터 처리 요청은 웹 애플리케이션 서버에 전달한다
  • 사용자가 "www.example-shop.com/home"을 요청하면, 웹 서버는 "home.html"이라는 파일을 찾아 브라우저에 전달
• 웹 애플리케이션 서버 (WAS) (예: Tomcat, Node.js)
  • 웹 애플리케이션 서버는 동적인 콘텐츠와 서버 로직을 처리하는 역할.
  • 사용자가 특정 상품을 검색할 때, 웹 애플리케이션 서버는 데이터베이스에서 상품 정보를 가져와 사용자가 요청한 페이지에 동적으로 반영
• 데이터베이스(MySQL)
  • 데이터베이스는 웹 애플리케이션에서 사용되는 모든 데이터를 저장하고 관리하는 역할을 합니다. 여기에는 사용자 정보, 상품 정보, 주문 내역 등이 포함

JSP와 서블릿

• JSP와 서블릿의 차이점은 결과적으로 하는 일은 동일함
• JSP
  • HTML 내부에 Java 소스코드가 들어감으로 인해 HTMl 코드를 작성하기 간편하다는 장점
• 서블릿
  • 자바 코드 내에 HTMl 코드가 있어서 읽고 쓰기가 굉장히 불편하기 때문에 작업의 효율성이 떨어짐

웹에서는 이 2개를 다 공부하게 됨

JSP로 작성된 프로그램은 서버로 요청시 서블릿 파일로 변환 되어 JSP 태그를 분해하고 추출하여 다시 순수한 HTML을 변환

밑 그림을 살펴보자

1. 클라이언트가 어떤 동작을 함으로써 hello.jsp 를 요청하였다.
2. JSP 컨테이너가 JSP 파일을 읽는다.
3. JSP 컨테이너가 Generete (변환) 작업을 통해 Servlet ( .java )  파일을 생성한다.
4. .java 파일은 다시 .class 파일로 컴파일된다.
5. Execute (실행) 을통해 HTML 파일을 생성하여 JSP 컨테이너 에게 전달한다.
6. JSP 는 HTTP 프로토콜을 통해 HTML 페이지를 클라이언트 에게 전달한다.

 

 

• 소프트웨어 디자인 패턴 중 하나이며, 애플리케이션을 세 가지 주요 구성 요소로 분리하여 구조화하는 방식
• Model-VIew-Controller의 약자이며, 각각의 구성 요소는 특정한 역할을 담당하여 애플리케이션의 유연성, 확장성, 유지보수성을 향상 시킴.

각 구성 요소의 역할

1. Model(모델)

• 애플리케이션의 핵심 데이터 및 비즈니스 로직을 관리.
• 데이터베이스와의 상호작용, 비즈니스 규칙 적용, 데이터 처리 등의 역할 수행
• ex) 사용자 정보, 상품 정보와 같은 데이터 구조를 정의하고, 이러한 데이터를 생성, 읽기, 수정, 삭제(CRUD)하는 로직을 포함
• 책임: 데이터의 상태를 관리하며, 상태 변경 시 이를 알리거나(Observer 패턴 등), 컨트롤러에서 요청된 데이터를 제공하는 역할

1. View (뷰)

• 역할: 뷰는 사용자에게 데이터를 시각적으로 표현하는 역할. 뷰는 모델에서 데이터를 받아와서 화면에 표시하며, 사용자 인터페이스(UI)를 담당.
• ex) 웹 애플리케이션의 HTML 페이지, 데스크톱 애플리케이션의 GUI 요소 등이 뷰에 해당
• 책임: 모델로부터 전달받은 데이터를 사용자에게 적절한 형태로 출력하며, 뷰 자체는 데이터에 대한 직접적인 변경 작업을 하지 않는다.

1. Controller (컨트롤러)

• 역할: 컨트롤러는 사용자의 입력을 받아 모델을 업데이트하거나 뷰를 선택하여 사용자에게 보여줄 데이터를 결정
• 사용자의 요청을 해석하고, 그 요청에 따라 적절한 모델과 뷰를 제어하는 역할
• 책임: 사용자의 행동(예: 클릭, 폼 제출 등)에 반응하고, 비즈니스 로직을 처리한 후, 그 결과를 뷰에 전달

MVC 패턴의 흐름

1. 사용자 요청: 사용자가 애플리케이션에 접근하여 특정 작업(예: 버튼 클릭)을 요청합니다.
2. 컨트롤러 처리: 컨트롤러는 사용자의 요청을 수신하고, 해당 요청을 처리하기 위해 필요한 모델을 호출
3. 모델 업데이트: 모델은 비즈니스 로직을 처리하고, 데이터를 업데이트하거나 가져온다
4. 뷰 업데이트: 컨트롤러는 처리된 데이터를 뷰에 전달하고, 뷰는 데이터를 사용자에게 표시

MVC 패턴의 예시

• 웹 애플리케이션: 웹 애플리케이션에서 MVC 패턴은 주로 사용됨
• ex) Spring MVC, Ruby on Rails, Django 등이 MVC 패턴을 기반으로 설계되어있다사용자가 웹 페이지에서 폼을 제출하면, 컨트롤러가 이 요청을 받아 처리하고, 모델을 통해 데이터를 가져오거나 업데이트한 후, 결과를 뷰에 전달하여 화면에 표시

Web Application Architecture

JSP 를 이용하여 구성할 수 있는 웹 어플리케이션 아키텍트는 크게 model1과 model2로 나뉜다.

1. JSP 가 클라이언트의 요청에 대한 logic처리와 response page(view) 에 대한 처리를 모두 하는지,
2. response page(view) 에 대한 처리만 하는지가 가장 큰 차이점이다.

Model1 구조

model 1은 view와 logic을 JSP 페이지 하나에서 처리하는 구조를 말한다.

이러한 모양을 가지고 있으며, JSP파일이 뷰와 컨트롤러 역할을 모두 담당한다.

 

 

예제 → JSP 파일이 직접 사용자의 요청을 처리하고, 필요한 로직을 포함하여 결과를 생성하는 방식

1. 프로젝트 설정

<dependencies>
    <!-- Spring Boot Web Starter -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- JSTL for JSP -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
    </dependency>

    <!-- Tomcat Jasper (JSP support) -->
    <dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
    </dependency>

    <!-- JSP 지원을 위한 추가 의존성 -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <scope>provided</scope>
    </dependency>
</dependencies>

1. JSP 페이지 작성

• Model1 구조에서는 JSP 파일이 클라이언트의 요청을 직접 처리하고, 로직과 뷰를 모두 담당
• ex) 사용자의 이름을 입력받고, 이를 처리하여 환영 메시지를 출력하는 간단한 JSP를 작성

src/main/webapp/WEB-INF/views/hello.jsp

JSP 파일은 다음과 같은 기능을 수행

• 클라이언트의 요청에서 name 파라미터를 가져
• 간단한 비즈니스 로직(현재 날짜와 시간 조회)을 처리
• name 값에 따라 환영 메시지를 출력
• 또한, HTML 폼을 사용하여 사용자가 이름을 입력할 수 있는 인터페이스를 제공

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Date" %>
<html>
<head>
    <title>Welcome Page</title>
</head>
<body>
    <%
        // 요청 파라미터로부터 이름을 가져옴
        String name = request.getParameter("name");

        // 비즈니스 로직 처리 (예: 현재 날짜 및 시간 가져오기)
        Date now = new Date();

        // 응답 콘텐츠 생성
        if (name == null || name.isEmpty()) {
            out.println("<h2>Please enter your name.</h2>");
        } else {
            out.println("<h2>Welcome, " + name + "!</h2>");
            out.println("<p>Current date and time: " + now + "</p>");
        }
    %>
    <form action="hello.jsp" method="get">
        <input type="text" name="name" placeholder="Enter your name">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

1. 애플리케이션 실행

이 구조에서는 별도의 컨트롤러나 서비스 계층 없이 JSP 파일이 직접 요청을 처리하므로, 특별한 Java 클래스 파일이 필요하지 않다. 프로젝트를 실행하고 브라우저에서 http://localhost:8080/hello.jsp로 접속하면 JSP 페이지가 로드되고, 사용자의 이름을 입력받아 환영 메시지를 출력하게됨.

Model2 구조

model2는 MVC 패턴을 웹개발에 도입한 구조이다.

모든 처리를 JSP 페이지에서 하는 것이 아니라, client에 요청에 대한 처리는 servlet이, logic에 대한 처리는 java class가, client에게 출력하는 response page를 JSP가 담당하는 구조를 가지고 있다.

 

MVC 패턴에서

M은 model으로, 데이터를 처리하는 것을 맡고 있다

• 흐름도 상에서 Entity 값 객체는 dto를 뜻한다. 우리가 알고 있는 자료형 같은 느낌으로, 주로 필요한 데이터를 저장해 놓는 클래스를 맡는다.
• dao(data access object)는 DB와의 상호작용에만 관심을 갖고, 컨트롤러의 수많은 기능은 서비스에 맡기고 DB에서 넣고 빼는 것들만 처리한다.
• service는 dto를 받아서 처리해주는 곳으로, 수많은 로직들을 수행하는 곳이다. 우리가 알고 있는 회원가입, 게시글 조회 등의 서비스를 처리하는 곳이다.

V는 view로, 우리에게 보여지는 곳들을 처리하는 곳이다.

주로 jsp로 만들어져 있고, jsp가 html이랑 가까울 수록 잘 짜여진 코드라고 판단한다.

로직은 java단에서 실행하고 jstl등을 이용해 제어문이나 반복문 수행등만 사용해서 결과물을 출력한다.

C는 controller로, 중간에서 제어하는 역할을 한다.

A에서 들어온 요청을 B로 보내는 등, 파라미터를 받아서 결과를 싣고 포워드/리다이렉트 형태로 명령을 전달하는 역할을 한다.

예제

프로젝트 설정

<dependencies>
    <!-- Spring Boot Web Starter -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- JSTL for JSP -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
    </dependency>

    <!-- Tomcat Jasper (JSP support) -->
    <dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
    </dependency>

    <!-- JSP 지원을 위한 추가 의존성 -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <scope>provided</scope>
    </dependency>
</dependencies>

 

Model(데이터) 정의

User라는 클래스를 정의

src/main/java/com/example/demo/model/User.java

package com.example.demo.model;

public class User {
    private String name;
    private int age;

    // 생성자
    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }

    // 게터와 세터
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

Controller (컨트롤러) 구현

컨트롤러는 클라이언트의 요청을 받아 모델을 사용하여 로직을 처리하고, 적절한 뷰로 데이터를 전달

src/main/java/com/example/demo/controller/UserController.java

package com.example.demo.controller;

import com.example.demo.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class UserController {

    @GetMapping("/user")
    public String getUser(@RequestParam(name = "name", required = false, defaultValue = "Guest") String name,
                          @RequestParam(name = "age", required = false, defaultValue = "25") int age,
                          Model model) {

        // 모델 객체 생성
        User user = new User(name, age);

        // 모델 객체를 뷰에 전달
        model.addAttribute("user", user);

        // "user.jsp"라는 뷰를 반환
        return "user";
    }
}

 

View (뷰) 구현

뷰는 컨트롤러에서 전달된 데이터를 표시하는 역할 여기서는 JSP를 사용하여 사용자 정보를 표시

src/main/webapp/WEB-INF/views/user.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>User Information</title>
</head>
<body>
    <h2>User Information</h2>
    <p>Name: ${user.name}</p>
    <p>Age: ${user.age}</p>
</body>
</html>

 

 

5. 애플리케이션 실행

Spring Boot 애플리케이션을 실행하고 브라우저에서 http://localhost:8080/user?name=John&age=30으로 접속합니다. 그러면 JSP 페이지가 로드되고, UserController에서 처리된 데이터가 뷰에 표시

 

 

도움을 받은 글

[Backend] MVC 패턴

[Backend] MVC 패턴

 

[JSP] JSP (JavaServer Pages ) 란 무엇인가?

[JSP] JSP (JavaServer Pages ) 란 무엇인가?