'Java Web/Thymeleaf' 카테고리의 글 목록

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

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

<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>

저작자표시 비영리 변경금지

'Java Web > Thymeleaf' 카테고리의 다른 글

[Thymeleaf] 타임리프 자바스크립트에 데이터 입력 (2)	2021.10.15
[Thymeleaf] 타임리프 a태그 링크 작성 방법 (0)	2021.10.15
[Thymeleaf] 타임리프 사용법 및 문법 (0)	2021.08.11

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

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

그리고 '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";
    }
}

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

/*<![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 파일

usingthymeleaf.pdf

0.65MB

타임리프 공식 문서

Tutorial: Using Thymeleaf

1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a

www.thymeleaf.org

저작자표시 비영리 변경금지

'Java Web > Thymeleaf' 카테고리의 다른 글

[Thymeleaf] 타임리프 자바스크립트에서 반복문 사용 (0)	2021.10.18
[Thymeleaf] 타임리프 a태그 링크 작성 방법 (0)	2021.10.15
[Thymeleaf] 타임리프 사용법 및 문법 (0)	2021.08.11

타임리프에서 a태그를 작성할 때는 th:href="@{}" 을 이용하여 작성합니다.

<!-- 특정 url로 이동 -->
<a th:href="@{https://developer-rooney.tistory.com}">글 상세보기</a>


<!-- 현재 서버 내에서 이동 -->
<a th:href="@{/board/list}">게시글 리스트</a>


<!-- 파라미터를 넘길 시 -->
<a th:href="@{/board/view(id = ${board.id})}">글 상세보기</a>


<!-- 파라미터를 여러 개 넘길 시 -->
<a th:href="@{/board/view(id = ${board.id}, writer = ${board.writer}})}">글 상세보기</a>


<!-- PathVariable 사용 시 -->
<a th:href="@{/board/view/{id}(id = ${board.id})}">글 상세보기</a>

저작자표시 비영리 변경금지

'Java Web > Thymeleaf' 카테고리의 다른 글

[Thymeleaf] 타임리프 자바스크립트에서 반복문 사용 (0)	2021.10.18
[Thymeleaf] 타임리프 자바스크립트에 데이터 입력 (2)	2021.10.15
[Thymeleaf] 타임리프 사용법 및 문법 (0)	2021.08.11

타임리프는 스프링 부트에서 공식적으로 지원하는 View 템플릿입니다. JSP와 달리 Thymeleaf 문서는 html 확장자를 갖고 있어 JSP처럼 Servlet이 문서를 표현하는 방식이 아니기 때문에 서버 없이도 동작 가능합니다.

Spring Boot 타임리프 기본 설정

1. Spring Boot에서 타임리프를 사용하기 위해서는 라이브러리를 추가해야 합니다.

MVNRepository Spring Boot Starter Thymeleaf

2. 타임리프를 적용할 HTML 문서를 작성하고 상단 <html> 태그 내부에 다음과 같이 작성합니다.

<!DOCTYPE html>


<html xmlns:th="http://www.thymeleaf.org">


<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

타임리프 사용법

타임리프에서는 JSP처럼 서버에서 받아온 데이터를 ${ } 을 이용하여 표기합니다.

컨트롤러 부분

컨트롤러에서 Model을 통해 'name'이란 이름에 'Rooney'를 넣어 View 부분으로 보냅니다.

@RequestMapping("/article")
public class ArticleController {
    
    
    @GetMapping("/list")
    public String articleList(Model model) {
    
        model.addAttribute("name", "Rooney");
        
        return "article/list";
    }
}

View(타임리프) 부분

타임리프 문법 중 글씨를 출력하는 th:text=""에 넘긴 데이터 ${name}을 넣어주면 위에 컨트롤러에서 매핑한 /article/list로 접속했을 때 화면에 Rooney가 출력됩니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div th:text="${name}"></div>

</body>
</html>

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

타임리프 문법

타임리프 문법은 공식 홈페이지를 참고해주세요.

Tutorial: Using Thymeleaf

1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a

www.thymeleaf.org

타임리프 자주 사용하는 문법

문법	역할	예제
th:text	문자열 생성	th:text=" ${data} "
th:each	반복문	th:each="article : ${articleList}"
th:if	if 조건문	th:if=${data != null}
th:href	이동 경로	th:href=" @{/article/list(id= ${data} )} "

저작자표시 비영리 변경금지

'Java Web > Thymeleaf' 카테고리의 다른 글

[Thymeleaf] 타임리프 자바스크립트에서 반복문 사용 (0)	2021.10.18
[Thymeleaf] 타임리프 자바스크립트에 데이터 입력 (2)	2021.10.15
[Thymeleaf] 타임리프 a태그 링크 작성 방법 (0)	2021.10.15

STUDY AND LESSON