Template Engine
- 서버에서 데이터를 보내 웹 서비스를 만드는 방법
- Single Page Application- Server Side Rendering
- HTML과 데이터를 결합해 만들 수 있도록 도와주는 도구
Thymeleaf
build.gradle에 dependency 추가
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'html 태그에 추가
<html lang="ko" xmlns:th="http://www.thymeleaf.org"-
xmlns:th
: 타임리프의 th 속성을 사용하기 위해 선언된 네임스페이스
: 순수 HTML로만 이루어진 페이지의 경우 선언하지 않아도 됨 -
th:text
: JSP의 EL 표현식인 ${}처럼 ${} 표현식을 사용해서 컨트롤러에서 전달받은 데이터에 접근
: 일반 텍스트 형식으로 출력됨 -
th:fragment
: < head> 태그에 해당 속성을 사용해 fragment의 이름 지정
: fragment는 다른 HTML에서 include 또는 replace 속성을 사용해 적용할 수 있음 -
th:href
: < a> 태그의 href 속성과 동일
: 웹 어플리케이션을 구분하는 context path를 포함 -
th:action
: < form> 태그 사용시 해당 경로로 요청 보내기 -
th:object
: < form> 태그에서 submit을 할 때 데이터가 th:object에 설정해둔 객체로 받아짐
: 컨트롤러와 뷰 사이의 dto 클래스 객체
<form class="form-horizontal" th:action="@{/board/register.do}" th:object="${board}" method="post">-
th:field
: th:object 속성을 이용하면 th:field를 이용해 HTML 태그에 멤버 변수를 매핑할 수 있음
: th:field를 이용한 사용자 입력 필드(input, textarea 등)는 id, name, value 속성 값 자동 매핑됨
: ${} 표현식이 아닌 *{} 표현식 사용
: th:object와 th:field는 컨트롤러에서 특정 클래스의 객체를 전달받은 경우에만 사용 가능 -
th:checked
: 체크박스, 조건이 true면 체크 -
th:inline="javascript"
: < script> 태그에 th:inline 속성을 javascript로 지정해야 javascript 사용 가능
===log town 팀 프로젝트===
HomeController.java
@GetMapping("/home/onepost/{postId}")
public String getOnePost(@PathVariable Long postId, Model model) {
model.addAttribute("postId", postId);
return "onepost";
}onepost.html
th:text="${postId}이번에는 postId만 넘겨줬지만 다음에는 더 효율적인 방법으로 구현할 수 있는지 알아봐야겠다.
