티스토리 뷰
안녕하세요!
이번 포스팅에서는 Spring Boot를 사용하여 간단하게 폼 값을 넘겨받아
Thymeleaf로 출력하는 예제를 작성해보겠습니다.
여담이지만, 저는 프로젝트를 하다가 막히거나 모르는게 있으면
구글링 해서 예제 프로젝트 작성 후 블로그에 정리하는 편입니다.
예제를 만들어보기 전에 먼저 Intellij에서 프로젝트를 생성하겠습니다.
좌측 Gradle 누르고 우측 Java 체크하고 생성하면 되겠습니다.
저는 spring-example로 생성했습니다.
본인이 원하는 이름으로 생성하시면 되겠습니다.
프로젝트 생성하면 Gradle 빌드툴이 초반에 작업을 하는데요.
여기서 조금만 기다려주면 세팅이 끝납니다!
(네트워크 작업이 이루어지므로 이더넷 연결은 필수입니다.)
그 다음, build.gradle 파일을 열어서 스프링 부트 의존성 셋팅을 해줍니다.
참고로 저는 gradle 버전 7.1로 되어 있습니다.
gradle 버전 확인하는 방법은 좌측 메뉴에 있는 gradle 폴더에서 gradle-wrapper.properties 파일 열어보면
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-7.1-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/distsdistributionUrl에서 확인 할 수 있습니다.
plugins 부분에 다음과 같이 입력해줍니다.
plugins {
id 'java'
id 'io.spring.dependency-management' version '1.0.10.RELEASE'
id 'org.springframework.boot' version '2.4.1'
}그 다음, dependencies 부분에도 다음과 같이 입력합니다.
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.webjars:bootstrap:4.6.1'
}단축키 ctrl + shift + O를 누르면 빌드 작업과 함께 설정을 완료합니다. (맥 단축키 : command + shift + i)
스프링 부트 의존성 설정을 마쳤으면 자바 패키지를 만들고 서버를 실행해보겠습니다.
저는 패키지를 com.gf.spring으로 했습니다.
그 다음, Application 클래스를 만들어줍니다.
package com.gf.spring;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
자바를 공부하셨다면 코드 어렵지 않죠?
SpringBootApplication 어노테이션 선언하고 main 메소드에서 톰캣 서버 구동한다는 코드입니다.
톰캣 서버가 잘 돌아가는 모습을 확인했으면 잠시 끄고 다시 코드를 작성하겠습니다.
좌측 메뉴에서 src/main/resources 폴더 아래에 templates 폴더를 만들어줍니다.
그 다음, index.html 파일을 생성하겠습니다.
index.html에 아래와 같이 작성해주세요.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.6.1/css/bootstrap.min.css}">
<style>
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html, body {
font-family: 'Noto Sans KR';
}
.container {
padding: 5% 0;
}
.form-group {
margin: 32px 0;
}
.card {
margin: 10% 0;
}
h1 {
margin: 10% 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Parameter Test</h1>
<form action="/" method="post">
<div class="form-group">
<label for="name">이름</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<button type="submit" class="btn btn-success float-right">제출</button>
</form>
<div class="card">
<div class="card-header">결과</div>
<div class="card-body">
<p th:text="${name}"></p>
</div>
</div>
</div>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.6.1/js/bootstrap.min.js}"></script>
</body>
</html>부트스트랩과 타임리프로 만든 간단한 예제입니다.
코드 내용은 대충 봐도 어렵지 않습니다.
우선 헤더 부분에 있는 코드부터 설명하겠습니다.
타임리프를 사용하기전에 타임리프 문법을 사용한다는 선언을 해줘야 합니다.
그 부분이 html 태그에 명시되어 있습니다.
xmlns:th="http://www.thymeleaf.org"
그 다음, link 태그에 th:href 속성으로 방금 전에 의존성 설정한 webjars 라이브러리로 불러온 부트스트랩 경로를 지정하였습니다.
body 부분은 간단한 폼 태그로 name 값을 컨트롤러에 넘기고 결과값을 화면에 보여주는 코드입니다.
화면을 만들었으니 컨트롤러를 만들어보겠습니다.
먼저 자바 패키지를 생성합니다.
저는 com.gf.spring으로 생성했습니다.
그 다음 IndexController를 생성합니다.
생성이 되었으면, @Controller 어노테이션을 선언합니다.
@Controller
public class IndexController {그 다음, index.html로 맵핑하는 메소드를 작성하겠습니다.
@GetMapping("/")
public String index() {
return "index";
}간단하게 설명하면 http://localhost:8080/ 로 접속하면 thymeleaf가 index.html를 찾아서 화면을 보여주는 코드입니다.
그 다음 서버를 실행시켜 화면이 제대로 나오는지 확인해보겠습니다.
실행하면 다음과 같은 화면이 나옵니다.
이름 입력칸에 입력받고 제출 버튼을 누르면 컨트롤러가 값을 받아 다시 결과창에 보여주는 화면입니다.
그 다음에는 폼 값을 넘겨받을 메소드를 작성해봅시다.
@PostMapping("/")
public String test(@RequestParam("name") String name, Model model) {
model.addAttribute("name", name);
return "index";
}RequestParam으로 값을 넘겨 받으면 Model 객체에 name 속성을 설정하고 다시 index로 넘기는 코드입니다.
package com.gf.spring;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class IndexController {
@GetMapping("/")
public String index() {
return "index";
}
@PostMapping("/")
public String test(@RequestParam("name") String name, Model model) {
model.addAttribute("name", name);
return "index";
}
}
IndexController 전체 코드입니다.
자 이제 코드는 완성되었습니다.
제대로 값이 넘어가는지 확인해볼까요?
aaa를 입력하고 제출버튼 누르면 결과창에 출력하면 성공입니다.
정상적으로 결과창에 출력되었습니다.
이렇게 해서 폼 값을 서버에서 넘겨 받아 출력하는 예제 코드를 작성하고 테스트까지 확인했습니다.
사실 원래는 이렇게 테스트를 하는게 아니라 JUnit을 이용해서 테스트하는게 더 정확하지만
화면으로 확인하는게 눈에 보기 편하지요 ㅎㅎ
긴 글 읽어주셔서 감사합니다 ^^
'Programming > Spring Boot' 카테고리의 다른 글
| 스프링 form으로 thymeleaf 활용해서 객체 주고 받기 (0) | 2023.11.10 |
|---|---|
| 예제 프로젝트 하면서 생긴 트러블슈팅 정리 (0) | 2023.03.23 |
| [Thymeleaf] 컨트롤러에서 model, session으로 값을 뷰로 넘길 때 th:text 사용시 주의점 (0) | 2022.11.25 |
| [Spring Boot] Hikari JDBC 설정 시 발생하는 에러 해결법 (0) | 2022.03.17 |
| [Spring] Spring MVC Project 생성 시 발생하는 오류 해결방법 (0) | 2022.02.11 |