STS 로 Spring Boot 프로젝트 만들기. 4) Thymeleaf 조금 더 활용해보기
참고서적 : [길벗] 스프링부트 프로그래밍 입문 - 쇼다 츠야노
Thymeleaf를 조금 더 활용해 보겠습니다.
1. parameter 사용하기
쿼리스트링으로 들어온 파라미터를 Controller에서 Model을 통해서 템플릿쪽으로 전달을 해 보았는데요,
이번에는 Controller를 통하지 않고 템플릿 내에서 직접 매개변수를 이용 해 보도록 하겠습니다.
package com.shane.boot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class ParamTest {
@GetMapping("/")
public ModelAndView index() {
return new ModelAndView("paramTest");
}
}
일단 컨트롤러 입니다. 특별할건 없고요, 특정 template의 파일명을 그대로 리턴 해 주는데,
원래는 Return type을 String으로 하고, return "paramTest" 했겠지만, 그냥 ModelAndView를 바로 생성해서 해당 뷰 네임을 리턴하도록 작성 해 보았습니다. 결국에 똑같은 거긴 한데 이런것도 된다 정도로만 이해하면 될 듯 합니다. 저도 혹시 될까 궁금해서 그냥 해본 건데 잘 되네요.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<h1>Hello world</h1>
<p th:text="'from parameter id=' + ${param.id[0] + ', name=' +param.name[0]}"></p>
</body>
</html>
이번에는 paramTest.html 파일입니다. 특별할 건 없지만 p 태그 쪽에서 parameter를 직접 사용하도록 작성 했습니다.
id와 name이라는 param이 필수기 떄문에 이대로 서버를 켰을때
url을 그냥 이렇게 보내면 500 에러가 터집니다.
query String으로 id와 name 데이터를 넘겼더니, 이렇게 바로 문제없이 parameter를 사용해서 화면을 출력 해 주는 것을 확인 할 수 있습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<h1>Hello world</h1>
<p th:text="'from parameter id=' + ${param.id + ', name=' +param.name}"></p>
</body>
</html>배열형태가 아닌 .id로 바로 접근하도록 코드를 바꿔 보아도 똑같이 작동하는 것도 확인 해 보았습니다.
같은 parameter로 두개의 값을 넣었을때는
이렇게 배열 형태로 모든 값이 출력 되는 것도 확인 할 수 있습니다.
2. 메시지식 사용하기
${} 처럼 변수식 외에도 타임 리프에서는 메시지식을 사용 할 수 있습니다.
메시지식은 #{}로 작성하며, 중괄호 안에는 추출할 값을 지정 합니다.
일단 properties 파일을 작성 해 보도록 하겠습니다.
파일을 생성한 뒤
위와 같이 데이터를 입력 해 보았습니다.
이제 위 데이터를 template에서 사용 해 보도록 하겠습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<h1 th:text="#{message.title}"></h1>
<p th:text="#{message.data}"></p>
</body>
</html>html 파일을 위와 같이 작성했습니다.
서버를 켜서 , 해당 template이 맵핑된 url을 입력 하면,
properties 파일에 입력 해 둔 데이터를 잘 받아 와서 출력 해 주는 것을 확인 할 수 있습니다.
messages_kr.properties , message_en.properties 이런 식으로 여러가지 로케일을 지원하는데 사용 한다고 합니다.
3. 객체 property 사용하기
package com.shane.boot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class ObjectTest {
@GetMapping("objectTest")
public ModelAndView index(ModelAndView mav) {
mav.setViewName("objectTest");
DataObj obj = new DataObj(1,"shane","shane@value");
mav.addObject("object", obj);
return mav;
}
}
class DataObj{
public DataObj(int id, String name, String value) {
super();
this.id = id;
this.name = name;
this.value = value;
}
private int id;
private String name;
private String value;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}위와 같이 DataObj 라는 객체를 생성해 view단으로 해당 객체를 넘깁니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<h1>Hello world</h1>
<p th:object="${object}">
<span th:text="*{id}"></span>
<span th:text="*{name}"></span>
<span th:text="*{value}"></span>
</p>
</body>
</html>그러고 view 단에서는 해당 객체에 있는 property들을 사용 하려고 하는데요,
모든 span을 감싸고 있는 p 태그 에서 object를 설정 해 주면, 그 하위에 있는 span 태그들 에서는 해당 object 내에 있는 프로퍼티들을 바로 사용 할 수 있습니다. 대신 *{} 형태로만 참조 해 주면 됩니다.
출력도 문제없이 잘 해주는 것을 확인 할 수 있습니다.
이번에는 리터럴 치환을 이용해 작성 해 보겠습니다. 크게 다를 건 없지만 텍스트 앞 뒤에 " | " 기호를 넣어서 작성 하는 방식 입니다. 리터럴 치환을 이용할 경우에는 안에서 변수식을 바로 사용할 수 있습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<h1>Hello world</h1>
<p th:object="${object}">
<span th:text="|my id is *{id}. name is *{name} and value is *{value}.|"></span>
</p>
</body>
</html>이렇게만 변경해고 그대로 서버를 실행 해 보면.
간단하게 원하는 object의 property 들을 사용 할 수 있음을 확인 할 수 있습니다.
굳이 텍스트를 concat 시키지 않고도 쉽게 한번에 사용 할 수 있어 편리합니다.
4. Thymeleaf 에서 HTML 코드 출력하기
일단 다짜고짜 html 데이터를 template으로 보내보도록 하겠습니다.
package com.shane.boot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class HtmlTest {
@GetMapping("htmlTest")
public ModelAndView index(ModelAndView mav) {
mav.setViewName("htmlTest");
mav.addObject("message", "<h2>Hello</h2><p>world!</p>");
return mav;
}
}컨트롤러에서 message에 각종 HTML 태그를 담은 문자를 담아 보냅니다,
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div th:text="${message}"></div>
</body>
</html>template에서는 div에 해당 텍스트를 바로 출력하도록 작성 해 보았는데요
서버를 켜서 요청을 해보면, 모든 태그가 그냥 text로 출력 되는 것을 확인 할 수 있습니다.
타임리프는 보안을 위해 HTML 태그는 모두 이스케이프 시킨다고 합니다.
이럴때는 th:text 부분을 th:utext로 변경하면 해결 됩니다.
u 하나 딱 찍고 다시 돌아왔을 뿐인데,
바로 태그들이 적용되는 것을 확인 할 수 있습니다. 하지만 크로스 사이트 스크립팅에 약점이 생기니 utext를 사용할 때에는 꼭 그 점을 인지하고 사용 해야 합니다.
이상입니다.
https://github.com/Shane-Park/springBootStudy
Shane-Park/springBootStudy
this repository was made for 2 days sprint of Spring boot for naver coding test - Shane-Park/springBootStudy
github.com
해당 포스팅의 모든 코드는 위 URL에서 확인 하실 수 있습니다.
'Programming > JPA ⁄ Spring' 카테고리의 다른 글
| STS 로 Spring Boot 프로젝트 만들기. 5) 데이터 베이스 사용하기. CRUD 예제 (0) | 2021.07.09 |
|---|---|
| Visual Studio Code에 Spring Boot 필요한 Plugin들 설치하기 (2) | 2021.07.09 |
| STS 로 Spring Boot 프로젝트 만들기. 3) Thymeleaf 를 이용한 웹 페이지 만들기 (0) | 2021.07.09 |
| STS 로 Spring Boot 프로젝트 만들기. 2) RestController 활용해 API 컨트롤러 만들기 (0) | 2021.07.09 |
| STS 로 Spring Boot 프로젝트 만들기. 1) STS설치 및 프로젝트 생성 (0) | 2021.07.09 |