[0614] 자바 웹 개발 과정🌞

Let's TECH🧐·2021년 6월 14일

Thymeleaf

자바 웹 개발 과정

목록 보기

28/31

그동안 배운 내용

뷰단을 JSP 대신 Thymeleaf를 사용하기 시작

Thymeleaf

템플릿 엔진, th:xx 형식으로 속성을 html 태그에 추가하여 값이나 처리 등을 페이지에 심을 수 있다.

HTML 코드에 영향을 주지 않으면서 데이터를 꽂아넣을 수 있다.

설정

확인

templates/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	타임리프 인덱스 페이지입니다.
</body>
</html>

HomeController

@Controller
public class HomeController {

	@RequestMapping("/index")
	public String index() {
		
		return "index"; // 타임리프 설정했으므로 index.html을 찾을 것임
	}
}

결과 화면

Message Expression - #{...}

#를 쓰면 외부 파일에서 데이터를 뽑아오게 된다
외부 파일 위치
message.properties

title=메시지입니다.

application.properties

spring.messages.basename=messages/message // resources 아래에 설정한 폴더명/파일명 적어주기
spring.messages.encoding=UTF-8

index.html

<h1 th:utext="#{title}">타임리프 인덱스 페이지입니다.</h1>

Variables

반복문

list.html

<tbody>
	<tr th:each="n:${list}"> <!-- list 하나하나를 n이라는 이름으로 쓰겠다 -->
		<td >8</td>
		<td class="title indent text-align-left">
			<a href="detail.html" th:text="${n.title}">스프링 8강까지의 예제 코드</a></td>
		<td th:text="${n.writerId}">newlec</td>
		<td th:text="${n.regDate}">
			2019-08-18
		</td>
		<td th:text="${n.hit}">146</td>
		<td><input type="checkbox" name="open"></td>
		<td><input type="checkbox" name="del"></td>
	</tr>
</tbody>

결과 화면

#calendars

list.html

<td th:text="${#calendars.format(n.regDate,'yyyy.MM.dd')}">
	2019-08-18
</td>

🐥 마무리

오늘은 타임리프에 대해 배워보는 시간을 가졌다.
타임리프는 JSP와 다르게 HTML 코드를 변형시키지 않고도 동적으로 데이터를 보여줄 수 있는 템플릿 엔진이다. 기존 HTML 코드에 타임리프의 문법을 적용시켜 사용해봤는데 빠르고 문법도 어렵지 않아서 꽤 괜찮다는 생각이 들었다.

지금은 2차 프로젝트를 열심히 진행 중이다.
우리 팀은 독립서점 관련 서비스를 모바일 웹앱으로 보여줄 생각이고, 나는 그 중에서 리뷰 시스템을 맡아 Controller, Service, Dao를 구현하고 있다. 1차 프로젝트에서는 단순히 CRUD를 구현해봤다면 이번 프로젝트에서는 CRUD 뿐만 아니라 지도를 화면에 보여주기 위해 지도 api를 사용하려고 한다. 예전에 산책 관련 어플을 만들 때 한 번 사용해봤던 것이기 때문에 이번에는 훨씬 수월하게 구현할 수 있지 않을까 생각한다. 이제 학원도 1달 밖에 안 남았으니 막판 스퍼트를 내보자 화이팅!