STUDY AND LESSON

JSTL 라이브러리 import

<%@ prefix="c" taglib uri="http://java.sun.com/jsp/jstl/core" %>
<%@ prefix="fn" taglib uri="http://java.sun.com/jsp/jstl/functions" %>

예제

${fn:contains(문자열, 찾을 문자열)}

<c:set var="text" value="Hello World"/>

<c:if test="${fn:contains(text, 'Hello')}">
	<div>Hello가 포함된 문자열입니다.</div>
</c:if>

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

타임리프에서 자바스크립트 사용 시 반복문을 사용하는 방법입니다.

<script th:inline="javascript">
      
        let articleArray = new Array();
        let article = new Object();
 
        /*[# th:each="article : ${articleList}"]*/
        article.id =  /*[[${article.id}]]*/;
        article.title =  /*[[${article.title}]]*/;
        article.content =  /*[[${article.content}]]*/;
        articleArray.push(article);
        /*[/]*/
 
 </script>

DB에 저장된 날짜를 가져올 때 웬만하면 날짜 포맷을 바꿔서 출력해야 합니다.

날짜 형식을 바꾸는 방법은 날짜의 타입에 따라 다른데 이때 사용하는 JSTL 태그는 아래 코드와 같습니다.

날짜(Date, LocalDateTime 등) 타입인 경우

(1) <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

(2) <fmt:formatDate value="${regDate}" pattern="yyyy-MM-dd HH:mm:ss"/>

JSTL 중 fmt 태그를 사용하기 위한 스크립틀릿(1)을 추가하고 아래 있는 태그 형식(2)으로 작성하면 됩니다.

별도로 <c:out value=""/>에 넣을 필요 없이 바로 출력됩니다.

주의할 부분은 fmt:formatDate의 value 값으로 들어갈 수 있는 타입은 날짜 타입만 허용되기 때문에 문자열로 저장된 날짜를 value에 넣을 경우 에러가 발생합니다.

문자열(String) 타입인 경우

(1) <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

(2) <c:out value="${fn:substring(regDate, 0, 16)}"/>

JSTL 메소드를 사용하기 위한 스크립틀릿(1)을 추가하고 아래 있는 태그 형식(2)으로 작성하면 됩니다.

JSTL의 메소드 처리는 value="" 안에서 이뤄지기 때문에 (2)처럼 <c:out/> 태그의 value="" 안에 작성해야 화면에 출력됩니다.

${fn:substring(데이터, 시작 인덱스, 마지막 인덱스 + 1)} 이렇게 작성하면 첫번째 매개변수로 들어온 데이터를 자를 수 있습니다.

예를 들어, ${fn:substring('2021-10-15 12:10:15)', 0, 16)}

이렇게 작성하면 '2021-10-15 12:10:15의 0번 인덱스에서 16번 바로 전 인덱스(15번 인덱스)까지 출력하여 결과는 2021-10-15 12:10가 출력됩니다.

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

변수를 넘길 예제 컨트롤러를 하나 생성합니다.

그리고 'message' 라는 이름으로 '정상적으로 처리되었습니다.' 이라는 문자열을 담아 model에 넘깁니다.

@Controller
public class HomeController {

    @GetMapping("/test")
    public String test(Model model) {

        model.addAttribute("message", "정상적으로 처리되었습니다.");
        model.addAttribute("searchUrl", "https://www.google.com");
        return "test";
    }
}

아래 적힌 방법으로 작성하면 컨트롤러에서 받아온 데이터를 자바스크립트에 적용할 수 있습니다.

<script th:inline="javascript">

/*<![CDATA[*/

이 사이에 자바스크립트 코드를 적어주고 컨트롤러에서 넘어온 변수는 [[ ${   } ]] 로 감싸줍니다.

/*]]>*/

</scrirpt>

아래의 View 생성 예제를 참고해주세요.

<script th:inline="javascript">
    
    /*<![CDATA[*/
    
    var message = [[${message}]];
    alert(message);
    
    location.replace([[${searchUrl}]]);
    
    /*]]>*/
    
</script>

위 코드를 실행하면 메시지를 띄운 후 구글로 이동하게 됩니다.

이를 이용하여 컨트롤러에서 특정 로직을 처리하고 알림을 띄운 후 원하는 페이지로 이동할 수 있습니다.

간단한 예시로 글 작성이 완료되었을 때 바로 리스트로 보내주는 것이 아닌 '글 작성이 완료되었습니다' 라는 문구를 출력한 이후에 리스트로 보낼 때 사용합니다.

추가내용(2021.10.18)

타임리프 3.0 버전부터는 스크립트 사용 시 CDATA 구문을 작성하지 않아도 됩니다. 구체적인 내용은 첨부한 PDF 파일이나 공식 문서 링크에서 확인해주세요.

타임리프 메뉴얼 PDF 파일

타임리프 공식 문서