Spring MVC Sign Up Form - Maven

김진서·2024년 2월 22일
MVCSpringformmaven
1

Spring MVC

목록 보기
1/9
post-thumbnail

준비물: Intellij, Tomcat, Maven

파일구조

- src
  - main
    - java
      - org
        - example
          - config
            - MVCConfig.java
            - SpringMvcDispatcherServletInitializer.java
          - controller
            - SignUpController.java
          - model
            - SignUpForm.java
    - webapp
	  - resources
		- css
		  - bootstrap.min.css
		- js
		  - bootstrap.min.js
		  - jquery-1.11.1.min.js
      - WEB-INF
        - views
          - signup-form.jsp
		  - signup-success.jsp
	  - index.jsp
  - test
- .gitignore
- pom.xml

주의: Spring MVC에서는 /WEB-INF/views/ 안에 있는 JSP 파일들을 찾기를 기본으로 기대하기 때문에 src/main/webapp/WEB-INF/views/ 경로 만들어줘야 함

pom.xml 세팅 - 원문 예시에서 dependencies, build만 가져옴

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>Spring_Study_5</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

  <dependencies>
		<!-- org.springframework:spring-webmvc: Spring Framework의 Web MVC 모듈은 Spring 기반의 웹 애플리케이션을 구축하는 데 사용되며, -->
		<!-- 웹 애플리케이션의 컨트롤러, 뷰 및 모델을 지원. -->
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.1.0.RELEASE</version>
    </dependency>

		<!-- JSTL Dependency: JSP 페이지에서 사용할 수 있는 JSTL(JSP Standard Tag Library) API와 구현을 제공. -->
    <dependency>
      <groupId>javax.servlet.jsp.jstl</groupId>
      <artifactId>javax.servlet.jsp.jstl-api</artifactId>
      <version>1.2.1</version>
    </dependency>
    <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
    </dependency>

    <!-- Servlet Dependency: Java Servlet API는 웹 서버에서 동작하는 서블릿 및 JSP 페이지를 작성하기 위한 API를 제공. -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>

    <!-- JSP Dependency: JavaServer Pages (JSP)는 동적 웹 페이지를 생성하기 위한 표준화된 서버 측 스크립팅 언어 및 스팩을 제공. -->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>javax.servlet.jsp-api</artifactId>
      <version>2.3.1</version>
      <scope>provided</scope>
    </dependency>
  </dependencies>

  <!-- build: Maven 빌드 설정을 지정하는 섹션. -->
  <build>
	<!-- sourceDirectory: 소스 코드 디렉토리를 지정. -->
    <sourceDirectory>src/main/java</sourceDirectory>
	<!-- plugins: Maven 플러그인 설정을 지정하는 섹션 -->
    <plugins>
	  <!-- maven-compiler-plugin: Maven 컴파일러 플러그인을 설정. -->
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.5.1</version>
        <configuration>
		  <!-- source: 컴파일 소스 코드의 버전을 지정. -->
          <source>1.8</source>
		  <!-- target: 생성된 바이트 코드의 버전을 지정. -->
          <target>1.8</target>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

코드

MVCConfig.java

  • @Configuration 어노테이션은 이 클래스가 스프링 설정 클래스임을 나타낸다. 이 클래스 내의 메소드들은 스프링 컨테이너가 관리하는 빈(Bean) 객체를 정의하거나 설정 정보를 반환한다.
  • @EnableWebMvc 어노테이션은 Spring MVC를 활성화한다. 이것은 <mvc:annotation-driven />과 동일한 기능을 수행하여 DispatcherServlet과 같은 Spring MVC의 핵심 부분들을 활성화한다.
  • @ComponentScan 어노테이션은 스프링이 컴포넌트 스캔을 수행할 기본 패키지를 지정한다. 컴포넌트 스캔은 지정된 패키지와 그 하위 패키지에서 @Component, @Controller, @Service, @Repository 등이 붙은 클래스를 찾아 스프링 빈으로 등록한다.
  • @Bean 어노테이션은 메소드가 스프링 컨테이너에 의해 관리되는 빈 객체를 생성한다는 것을 나타낸다. 이 메소드가 반환하는 객체는 스프링의 빈으로 등록되며, 이후 이 빈을 필요로 하는 다른 컴포넌트에 주입될 수 있다.
package org.example.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import org.springframework.web.servlet.view.JstlView;

/**
 * @author Ramesh Fadatare
 */

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = { "org.example" })
public class MVCConfig {
    @Bean
    public InternalResourceViewResolver resolver() {
        // InternalResourceViewResolver 인스턴스를 생성한다.
        // 이 객체는 컨트롤러가 반환하는 뷰 이름(논리적이름)을 기반으로 실제 JSP 파일의 경로를 해석하는 역할을 한다.
        InternalResourceViewResolver resolver = new InternalResourceViewResolver();

        // resolver.setViewClass(JstlView.class); 라인은 JSP 파일에서 JSTL 태그를 사용할 수 있도록 설정한다.
        // JSTL 태그는 JSP 파일에서 자바 코드를 사용하지 않고도 반복문, 조건문 등을 사용할 수 있게 해준다.
        resolver.setViewClass(JstlView.class);

        // resolver.setPrefix("/WEB-INF/views/"); 라인은 모든 뷰 이름 앞에 자동으로 붙을 경로를 설정한다.
        // 예를 들어 컨트롤러가 "helloworld"라는 뷰 이름을 반환하면, "/WEB-INF/views/helloworld.jsp" 파일을 사용하게 된다.
        resolver.setPrefix("/WEB-INF/views/");

        // resolver.setSuffix(".jsp"); 라인은 모든 뷰 이름 뒤에 자동으로 붙을 확장자를 설정한다.
        // 이 설정에 의해 "hello" 라는 뷰 이름은 "hello.jsp"로 해석된다.
        resolver.setSuffix(".jsp");

        // 설정된 InternalResourceViewResolver 객체를 반환한다.
        // 이 객체는 이후 뷰를 해석할 때 사용된다.
        return resolver;
    }

	@Override
	// ResourceHandlerRegistry는 Spring MVC에서 정적 리소스를 처리하는 데 사용되는 클래스이다.
	// 이 클래스는 정적 리소스의 URL 패턴 및 실제 파일 시스템 경로를 매핑하고 관리한다.
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
		// .addResourceHandler("/resources/**")는 /resources/** 패턴의 URL 요청을 처리할 것임을 등록하는 부분이다.
		// /resources/ 디렉토리 안에 있는 정적 리소스에 대한 요청을 처리하기 위한 핸들러를 추가한다는 의미이다.
        registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
		// .addResourceLocations("/resources/")는 실제 리소스 파일이 위치한 경로를 지정하는 부분이다.
		// /resources/ 디렉토리에 정적 리소스 파일들이 있음을 나타낸다.

		// 따라서 이 코드는 /resources/** 패턴의 URL 요청이 발생하면
		// 실제로는 /resources/ 디렉토리 안에 있는 정적 리소스 파일들을 반환하도록 설정하는 것이다.
    }

}

SpringMvcDispatcherServletInitializer.java

이 클래스는 web.xml의 Java 기반 대안으로 사용되며, Spring MVC 애플리케이션의 DispatcherServlet을 초기화하기 위한 설정을 제공한다. AbstractAnnotationConfigDispatcherServletInitializer를 상속받아 사용한다.

package org.example.config;

// spring-webmvc 최신 버전에서는 지원하지 않는다.
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;

public class SpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {

    @Override
    protected Class<?>[] getRootConfigClasses() {
        // getRootConfigClasses() 메서드는 애플리케이션의 root-level(전역) 설정 클래스를 반환한다.
        // "root" 애플리케이션 컨텍스트는 애플리케이션의 모든 서블릿에 공유되는 빈을 포함한다.
        // 여기서는 특별한 root 설정이 없으므로 null을 반환한다.
        return null;
    }

    /*
    쇼핑몰을 운영하는 데 필요한 특정 부서의 관리자를 선정하는 것에 비유
    쇼핑몰에는 다양한 부서가 있다: 의류, 식료품, 가전제품 등등. 이 모든 부서들이 효율적으로 운영되기 위해서는 각각의 섹션을 관리하는 전문 관리자가 필요하다.
    getServletConfigClasses() 메서드는 쇼핑몰의 '웹 컴포넌트' 부서를 위한 관리자를 선정하는 것과 같다.
    여기서 '웹 컴포넌트' 부서라는 것은, 웹 애플리케이션에서 사용자의 요청을 처리하는 부분, 즉 이전에 DispatcherServlet에서 공부했던 컨트롤러, 뷰 리졸버, 핸들러 매핑 등을 의미한다.
    AppConfig.class는 이 '웹 컴포넌트' 부서의 관리자라고 할 수 있다.
    즉, 이 클래스에는 웹 애플리케이션을 운영하는 데 필요한 모든 설정과 규칙이 정의되어 있다.
    getServletConfigClasses()는 시스템에게 "이것이 우리 웹 애플리케이션의 관리자이다.
    이 관리자가 웹 애플리케이션을 어떻게 설정하고 운영할지를 알고 있으니, 사용자의 요청을 처리할 때는 이 관리자의 지시에 따라주세요."라고 말해주는 것과 같다.
    이 메서드가 반환하는 AppConfig.class는 웹 애플리케이션의 설정을 담당하는 클래스로,
    사용자의 요청을 어떻게 처리할지, 어떤 컨트롤러를 사용할지, 뷰는 어디에 있는지 등의 정보를 스프링 프레임워크에 제공한다.
		*/
    @Override
    protected Class<?>[] getServletConfigClasses() {
        // getServletConfigClasses() 메서드는 DispatcherServlet 애플리케이션 컨텍스트에 대한 설정 클래스를 반환한다.
        // 이 컨텍스트는 애플리케이션의 웹 컴포넌트에만 관련된 빈을 포함한다.
        // AppConfig.class는 웹 컨텍스트의 설정 정보를 포함하고 있다.
        return new Class[]{
                MVCConfig.class
        };
    }

    /*
    DispatcherServlet은 스프링 MVC에서의 프론트 컨트롤러 패턴을 구현하며, 모든 웹 요청을 받아 적절한 처리를 위해 다른 컴포넌트로 전달하는 역할을 한다.
    이 메서드에서 "/"를 반환함으로써, 웹 애플리케이션의 모든 요청(예: 홈페이지, 사용자 프로필 페이지, 검색 결과 페이지 등)이
    DispatcherServlet을 통과하여 적절한 핸들러로 라우팅되도록 설정한다.
    * */
    @Override
    protected String[] getServletMappings() {
        // getServletMappings() 메서드는 DispatcherServlet이 매핑될 경로를 정의한다.
        // 여기서 "/"는 애플리케이션의 기본 경로로 설정되며,
        // 이는 모든 요청이 DispatcherServlet으로 라우팅되도록 한다.
        return new String[]{
                "/"
        };
    }
}

SignUpController.java

package org.example.controller;

import org.example.model.SignUpForm;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class SignUpController {
    @ModelAttribute("signUpForm")
    public SignUpForm setSignUpForm() {
        return new SignUpForm();
    }

    @GetMapping("/showSignUpForm")
    public String showForm() {
        return "signup-form";
    }

    @PostMapping("/saveSignUpForm")
    public String saveUser(@ModelAttribute("signUpForm") SignUpForm signUpForm, Model model) {
        System.out.println("FirstName : " + signUpForm.getFirstName());
        System.out.println("LastName : " + signUpForm.getLastName());
        System.out.println("Username : " + signUpForm.getUserName());
        System.out.println("Password : " + signUpForm.getPassword());
        System.out.println("Email : " + signUpForm.getEmail());

        model.addAttribute("message", "User SignUp successfully.");
        model.addAttribute("user", signUpForm);

        return "signup-success";
    }
}

SignUpForm.java

package org.example.model;

public class SignUpForm {
    private String firstName;
    private String lastName;
    private String email;
    private String userName;
    private String password;

    public String getFirstName() {
        return firstName;
    }
    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }
    public String getLastName() {
        return lastName;
    }
    public void setLastName(String lastName) {
        this.lastName = lastName;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
}

signup-form.jsp

  • <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
  1. Spring Framework에서 제공하는 폼 태그 라이브러리를 사용하기 위한 선언.
  2. 이 태그 라이브러리는 Spring MVC에서 폼을 만들 때 사용되며, 폼 필드를 생성하고 유효성 검사를 수행하는 등의 기능을 제공.
  3. uri 속성은 태그 라이브러리의 위치를 지정하고,
  4. prefix 속성은 이 태그 라이브러리의 사용할 접두사를 정의.
  5. 이 경우, form이라는 접두사를 사용하여 해당 태그 라이브러리의 태그들을 호출할 수 있다.
  • <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  1. JSTL(Core 태그 라이브러리)을 사용하기 위한 선언.
  2. JSTL은 JSP 페이지에서 자바 코드 없이도 제어 구조(반복문, 조건문 등)를 사용할 수 있도록 도와주는 라이브러리. 이 태그 라이브러리를 사용하면 반복문과 조건문을 간단하게 작성할 수 있다.
  3. uri 속성은 태그 라이브러리의 위치를 지정하고,
  4. prefix 속성은 이 태그 라이브러리의 사용할 접두사를 정의.
  5. 이 경우, c라는 접두사를 사용하여 해당 태그 라이브러리의 태그들을 호출할 수 있다.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>Spring MVC 5 - form handling | Java Guides</title>
    <link href="<c:url value="/resources/css/bootstrap.min.css" />"
          rel="stylesheet">
    <script src="<c:url value="/resources/js/jquery-1.11.1.min.js" />"></script>
    <script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>

</head>
<body>
<div class="container">
    <div class="col-md-offset-2 col-md-7">
        <h2 class="text-center">Spring MVC 5 Form Handling Example -
            Sign up Form</h2>
        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="panel-title">Sign Up</div>
            </div>
            <div class="panel-body">
				// action: 폼이 제출될 때의 액션을 지정. 이 경우 "saveSignUpForm"이라는 URL로 폼이 제출.
				// cssClass: 생성된 폼에 적용될 CSS 클래스를 지정. 여기서는 "form-horizontal"이라는 클래스가 지정.
				// method: 폼이 제출될 때 사용되는 HTTP 메서드를 지정. 이 경우 POST 메서드가 사용.
				// modelAttribute: 폼에 바인딩될 모델 객체의 이름을 지정. 이 모델 객체는 컨트롤러에 의해 생성되어 뷰로 전달.
				// 여기서 "signUpForm"이라는 이름을 가진 모델 객체가 폼과 연결. 이 폼에서 입력한 데이터는 이 모델 객체에 바인딩되어 컨트롤러로 전달.
                <form:form action="saveSignUpForm" cssClass="form-horizontal"
                           method="post" modelAttribute="signUpForm">

                    <div class="form-group">
                        <label for="firstName" class="col-md-3 control-label">First
                            Name</label>
                        <div class="col-md-9">
							// path: 폼의 데이터가 바인딩될 모델 객체의 속성을 지정.
							// 여기서는 "firstName"이라는 속성이 지정되었으므로 모델 객체의 "firstName" 속성에 사용자가 입력한 데이터가 바인딩.
                            <form:input path="firstName" cssClass="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastName" class="col-md-3 control-label">Last
                            Name</label>
                        <div class="col-md-9">
                            <form:input path="lastName" cssClass="form-control" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="userName" class="col-md-3 control-label">User
                            Name </label>
                        <div class="col-md-9">
                            <form:input path="userName" cssClass="form-control" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="password" class="col-md-3 control-label">Password</label>
                        <div class="col-md-9">
                            <form:password path="password" cssClass="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-md-3 control-label">Email</label>
                        <div class="col-md-9">
                            <form:input path="email" cssClass="form-control" />
                        </div>
                    </div>

                    <div class="form-group">
                        <!-- Button -->
                        <div class="col-md-offset-3 col-md-9">
                            <form:button class="btn btn-primary">Submit</form:button>
                        </div>
                    </div>

                </form:form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

signup-success.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>javaguides.net</title>
    <link href="<c:url value="/resources/css/bootstrap.min.css" />"
          rel="stylesheet">
    <script src="<c:url value="/resources/js/jquery-1.11.1.min.js" />"></script>
    <script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
</head>
<body>
<div class="container">
    <div class="col-md-offset-2 col-md-7">
        <h1>${message}</h1>
        <hr />

        <table class="table table-striped table-bordered">
            <tr>
                <td><b>First Name </b>: ${user.firstName}</td>
            </tr>
            <tr>
                <td><b>Last Name </b> : ${user.lastName}</td>
            </tr>
            <tr>
                <td><b>UserName </b> : ${user.userName}</td>
            </tr>
            <tr>
                <td><b>Email </b>: ${user.email}</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

Static Resources - CSS and JS

  • bootstrap.min.css와 bootstrap.min.js 파일은 둘 다 Bootstrap 프레임워크의 핵심 파일로, 웹 애플리케이션의 디자인과 인터랙션을 향상시키는 데 사용된다. 웹 개발에서 매우 일반적으로 사용되며, Bootstrap 프레임워크를 사용하여 손쉽게 멋진 디자인과 사용자 경험을 구현할 수 있다.

  • jquery-1.11.1.min.js 파일은 jQuery 라이브러리의 압축된 버전 중 하나이다. jQuery는 JavaScript 라이브러리로, HTML 문서를 탐색하고 조작하는 데 도움을 주는 강력한 도구이다. jQuery 라이브러리의 버전 1.11.1의 압축된 버전이므로 파일 크기가 작고, 웹 페이지에서 사용할 때 빠른 로딩 속도를 제공한다. 이를 사용하여 JavaScript를 보다 효율적으로 작성하고 웹 애플리케이션을 개발할 수 있다.

결과 화면


Bootstrap Panel...
Bootstrap의 Panel은 Bootstrap 3 버전에서만 지원.
Bootstrap 3.3.7 버전의 bootstrap.min.css 파일을 다운로드 받았으나.. panel이 적용되지 않았음...
btn과 table은 잘 적용됨..
Choose a Bootstrap Version (3, 4 or 5)

  • 원인


    3.3.7 버전을 다운 받았으나, 브라우저에 이전에 다운 받았던 4.0.0 버전이 남아 있었음.

  • 해결

    크롬 캐시 삭제 후, tomcat 재구동. 해결

소스코드

https://github.com/eunoia-jason/Spring_Study_5.git

원문참고

Spring MVC Form Handling - Sign Up Form Example

profile
김진서
PAy IT forwaRD를 실천하는 프론트엔드 개발자. 근데 이제 백엔드를 곁들인..
다음 포스트

Spring MVC Form Tags - Maven

0개의 댓글