jsp로 만들었던 웹 페이지를 타임리프로 재구성 했을 때(회원가입 페이지) 타임리프에서 다르게 사용하는 태그들을 비교해본다.
🔻 메인 페이지
메인페이지에서 크게 달라진 부분은 없다.
메세지를 내보내는 자바스크립트에서 타임리프를 사용하는 방식만 다름!
💻 thymeleaf (home.html)
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<script th:inline="javascript">
$(function () {
let m = [[${msg}]];
if(m != null){
alert(m);
}
//bxSlider 설정용 스크립트
$(".slider").bxSlider({
auto: true,
slideWidth: 600,
})
});
</script>💻 jsp (home.jsp)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script>
$(function(){
let m = "${msg}";
if(m != ""){
alert(m);
}
//bxSlider 설정용 스크립트
$(".slider").bxSlider({
auto: true,
slideWidth: 600,
})
});
</script>
타임리프에서는 msg 변수를 [[${msg}]] 대괄호로 감싸서 태그하는데 jsp에서는 간단하게 EL로 표현한다. ${msg}
🔻 header
💻 thymeleaf
<ul>
<li class="suc" id="mname">테스트님</li>
<li class="suc"><a th:href="@{logout}">Logout</a></li>
<li class="bef"><a th:href="@{loginForm}">Login</a></li>
<li class="bef"><a th:href="@{joinForm}">Join</a></li>
</ul>💻 jsp
<ul>
<li class="suc" id="mname">테스트님</li>
<li class="suc"><a href="logout">Logout</a></li>
<li class="bef"><a href="loginForm">Login</a></li>
<li class="bef"><a href="joinForm">Join</a></li>
</ul>
</nav>타임리프에서는 링크를 연결할 때 @를 붙여서 연결해주기 때문에 th:href="@{logout}" 이런 형식으로 링크 태그를 만들어준다.
💻 thymeleaf
<script th:inline="javascript">
function goHome() {
//1차로 세션에서 mb(MemberDto)를 꺼내고
//2차로 mb에서 m_id를 꺼내는 방식으로 처리
let mb = [[${session.mb}]];
if(mb != null){
id = mb.m_id;
}
if(mb == null){//로그인 전
location.href = "/";
} else {
location.href = "list?pageNum=1";
}
}
</script>💻 jsp
<script>
function gohome() {
let id = "${mb.m_id}";
if(id == ""){ //로그인 전
location.href = "/";
} else { //로그인 후
location.href = "list?pageNum=1";
}
}
</script>세션으로 보낸 값을 받아올 때 타임리프에서는 session.을 붙여서 데이터를 꺼내올 수 있다. 이때 서비스에서 받아온 mb 변수의 id값을 한번에 session.mb.id 이런식으로 불러올 수는 없어서
let mb = [[${session.mb}]];
if(mb != null){
id = mb.m_id;
}mb 먼저 가져오고 id 변수로 다시 m_id값을 받아오게끔 처리하였다.
session.setAttribute("식별자", data); → th:text="${session.식별자}"
타임리프로 회원가입 페이지 만들기 완성!
📅 DATE
2023.05.31 작성
사람의 마음에 차 있는 너르고 크고 올바른 기운