Spring - [intelliJ,Thymeleaf] 버튼 누르면 Hello,World! 출력

._.sori 2024. 10. 31. 13:46

2024. 10. 31. 13:46

[ Hello,World 출력하기 ]

Spring - [IntelliJ] Hello World 출력하기

[ Spring MVC에 대하여 ] Spring - Spring MVC를 알아야 시작이 가능하다.처음엔 대충 프로젝트를 시작해보려했지만,이럴수가! 아는 것이 미약하니 시작할 수 없었다.그래서 가장 기초적으로 알아야하는

post-this.tistory.com

버튼 누르면 Hello,World!
🌧️

1. 동작화면과 코드

버튼을 누르면

↓

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>간단한 버튼 예제</title>
</head>

<body>
<h2 th:text="${message}">message</h2>

<form th:action="@{/hello}" method="get">
    <button type="submit">버튼</button>
</form>

</body>

</html>

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@Controller
public class HelloController {


    @GetMapping("/")
    public String empty() {
        return "button";
    }

    @GetMapping("/hello")
    public String helloWorld(Model model) {
        model.addAttribute("message", "Hello, World!");
        return "button";
    }

}

2. 타임리프 dependencies 추가하기.

타임리프(Thymeleaf)에 대해서 설명을 간략하게 해보자면, 순수한 HTML을 화면에 출력하기 위해 사용하는 프로그램이라고 생각하면 될 것 같다. 서버를 통해 뷰 탬플릿을 거치면 동적으로 변경된 결과를 확일할 수 있는데, 순수한 HTML을 유지하여 보여주기 때문에 네츄럴 템플릿(natural templates) 특징을 가지고 있음을 알 수 있다. 보통 Spring MVC에서 많이 사용한다.

□ build.gradle를 찾아 누른다.

□ 코드를 복사한다.

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

□ dependencies에 붙여넣는다.

□ 새롭게 세팅할 수 있도록 이 코끼리(?)를 눌러준다.

□ 제대로 생성되었는지 확인한다.

3. HTML을 통해 버튼 만들기.

□ 전체 코드

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>간단한 버튼 예제</title>
</head>

<body>
<h2 th:text="${message}">message</h2>

<form th:action="@{/hello}" method="get">
    <button type="submit">버튼</button>
</form>

</body>

</html>

□ resources 밑에 있는 templates에 button.html을 만들어준다.

• 만일 없다면 templates를 directory로 먼저 만들어준 후 하위에 button.html을 만들면 된다.

□ HTML을 타임리프 통해서 작동되도록 해준다.

<html lang="en" xmlns:th="http://www.thymeleaf.org">

뒤에 xmlns:th="htttp://www/thymeleaf.org" 추가하면 된다.

□ 타이틀 작성하기.

<title>간단한 버튼 예제</title>

□ <body> 작성하기.

작성하기 전에 알아야 할 부분이 있다. 바로 th라는 것인데, th는 타임리프로 동적으로 작용해야하는 부분에 붙여서 사용해야한다. 즉 타임리프를 사용하는 방법은 xmlns:th="htttp://www/thymeleaf.org"을 정의하고, 동적으로 작용해야할 부분에 th를 적어주는 것이다. 그러면 그 부분은 순수한 HTML을 유지하며 동적으로 변화해줄 것이다.

<h2 th:text="${message}">message</h2>

첫 화면엔 버튼만 있고 텍스트가 없었다. 두번째 화면에서 버튼을 누른 후 메세지가 나타났다. 그러면 이 부분은 동적으로 움직인 것이니 th를 붙여 코드를 작성해준다.

HTML은 ${message}를 통해 Controller와 연결할 것이다. ${ }는 변수 표현식이며 Controller에서 전달된 message라는 변수라는 의미이다. 그러면 Controller에서 데이터를 message로 전달하여 h2 부분에 원하는 텍스트가 보이게 된다.

□ <form> 작성하기.

form은 주로 사용자의 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는데 사용한다. form은 입력된 데이터를 한 번에 서버로 전송한다. 그렇게 보내진 데이터는 웹 서버가 처리하고, 결과에 따른 웹페이지를 보여주게 된다.

<form th:action="@{/hello}" method="get">
    <button type="submit">버튼</button>
</form>

form에서 th를 사용했다. 그 이유를 살펴보면 action=@{/hello}에 대해서 알아야한다. 아까 변수 표현식인 $와 다르게 @로 모양이 다르다. @{ }는 URL 표현식으로 주로 링크나 form에서 action과 함께 쓰인다. 그러면 action은 무엇일까? action은 form을 전송할 서버쪽 스크립트 파일을 지정하는 것이다. 좀 더 직관적이게 말해보자면 Controller에서 GetMapping(들어온 경로에 맞춰 반환할 페이지를 전송)에 사용할 '들어온 경로'에 해당하는 부분이다.

다시 정리해보자. action은 Controller의 메서드 중 어느 것과 연결할지, 즉 이 form이 action 속성을 통해 어느 페이지를 반환하는 컨트롤러와 연결할지 결정하는 것이다. 그러면 action에 적은 경로를 통해 form이 서버에 전송하는 동적인 움직임을 가지기에 th를 붙여 타임리프를 사용하도록 연결한 것이다.

그러면 이때 이 정보를 전송할 때 어떤 방식을 선택할지 고를 수 있다. get 방식과 post 방식이 있는데, 이에 대한 부분은 블로그에 따로 정리해놨으니 간략하게만 설명하고 넘어가겠다. get은 URL에 데이터를 담아 전송하는 것으로 주소창을 보면 어떤 데이터를 담았는지 알 수 있다.

[ GET과 POST ]

SpringBoot - GET과 POST 그리고 @GetMapping

[ @Controller와 @RestController ] Spring - @Controller와 @RestController 그리고 상태코드[ SpringMVC에 대하여 ] Spring - Spring MVC를 알아야 시작이 가능하다.처음엔 대충 프로젝트를 시작해보려했지만,이럴수가!

post-this.tistory.com

이제 버튼을 알아보겠다.

<form th:action="@{/hello}" method="get">
    <button type="submit">버튼</button>
</form>

버튼을 만드는데 type을 정할 수 있다. type은 3개로 구성되어있는데 submit , button , reset 이다. 우리는 현재 순수한 HTML을 가지고 간단한 예제를 만들고 있다. 그렇기에 클릭(onclick)이라는 동작이 포함되어있는 구조로 만들어야 더 효율적이다. 그래서 submit를 사용했다. 자바스크립트의 onclick이 없어도 submit으로 결정하면 form 데이터를 그냥 전송시킨다.(만약 자바스크립트와 함께 예제를 만든다면 button type으로 선택하면 된다.)

4. HelloController

□ 전체 코드

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@Controller
public class HelloController {


    @GetMapping("/")
    public String empty() {
        return "button";
    }

    @GetMapping("/hello")
    public String helloWorld(Model model) {
        model.addAttribute("message", "Hello, World!");
        return "button";
    }

}

□ 처음 들어갔을 때 화면 만들기.

@GetMapping("/")
public String empty() {
    return "button";
}

GetMapping("/")에서 "/"는 루트 경로라는 의미이다. 사용자가 루트 경로로 들어오면 button 화면으로 반환할 것이다. 그러면 아까 위에 있던 HTML을 다시 살펴보자. 버튼이 눌려야 메세지가 호출되도록 만들었다. 경로를 보면 루트 경로로 사용자가 페이지에 들어왔을 경우(아무것도 하지 않은)에 해당한다. 그러면 아직 버튼을 누르기 전이니, 동적인 th로 작성한 부분을 제외하면 submit 타입으로 설정해둔 버튼만 띄워줘야 할 것이다.

□ 버튼이 눌렸을 경우, 메세지를 넣어 화면 반환하기.

@GetMapping("/hello")
public String helloWorld(Model model) {
	model.addAttribute("message", "Hello, World!");
	return "button";
}

HTML에서 submit 방식을 통해, 누르면 바로 form이 전송되는 button을 만들었다. 그렇게 /hello 경로를 가진 action을 Get 요청으로 전송되면, 여기 @GetMapping("/hello")에서 받아 요청을 처리하게 된다.

Model이 있다. Model은 SpringMVC에서 뷰로 데이터를 전달하기 위해 사용되는 객체이다. 즉 컨트롤러에서 뷰로 데이터를 전달할 때 사용된다고 생각하면 된다. Model은 타임리프, JSP와 같은 템플릿 엔진과 관계없이 작동된다. model은 Model 타입으로 전달되며 addAtrribute를 통해 속성을 정할 수 있다. 해당 코드에서 키는 message, 실제 데이터 값은 Hello, World!라고 정했다.

이제 이 속성은 다시 button이라는 이름을 가진 HTML로 전달될 것이다. HTML 코드를 다시 살펴보면 ${message}이 부분에 Hello, World!가 오는 것을 알 수 있다.

🪽

"틀린 내용이 있을 수 있습니다."

[ 블로그에 쓴 내용들의 출처는 아래에 적어둘테니

들어가서 읽어보시면 더욱 도움이 되실 듯 합니다 ]

- 타임리프 출처

Thymeleaf(타임리프)란 ? 타임리프의 기본 기능알아보기

Thymeleaf(타임리프)란 ? 타임리프는 JSP, Freemarker와 같은 템플릿 엔진의 일종으로 다음과 같은 특징을 갖고 있습니다. 서버 사이드 HTML 렌더링 (SSR) 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용

hstory0208.tistory.com

- 타임리프 출처

스프링 타임리프(Thymleaf) 한눈에 정리하기

타임리프를 사용하기전에 확인해야할 정보 1.타임리프 의존성이 제대로 주입되고 있는지 확인한다. 타임리프를 '제대로' 쓰려면 시작하기전에 타임리프가 제대로 설치되어있는지 확인하자. 2. M

taehoung0102.tistory.com

- form 출처

HTML : 폼(form) 이해

폼은 알게 모르게 웹에서 많이 사용합니다. 사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용되기 때문입니다. 폼은 입력된 데이터를 한 번에 서버로 전송합니다. 전송한 데이

www.nextree.co.kr

-form과 GET 출처

[Html] form 태그와 input 요소들, GET / POST 방식

⚡️ form html의 요소 중 하나인 form은 데이터를 주고 받음에 있어서 많이 사용하는 요소 중 하나입니다. form 태그 안에 삽입한 submit 이벤트가 발동되면, 정의된 method 속성 type으로 action을 통해 목

lasbe.tistory.com

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기 (2)	2024.12.01
Spring - [HTML,CSS,Thymeleaf] 이미지 넣기, 눈누 글씨체 사용하기 (2)	2024.11.14
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(2) (2)	2024.11.12
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(1) (4)	2024.11.06
Spring - [IntelliJ] Hello World 출력하기 (0)	2024.10.12

🌊 ._.sori🪽

Spring - [intelliJ,Thymeleaf] 버튼 누르면 Hello,World! 출력

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

+ Recent posts

티스토리툴바