728x90
반응형

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

 

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

 

<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
728x90
반응형

 

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

 

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

 

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

 

alert에서 메시지가 출력되고 지정한 주소로 이동합니다.

 

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

 

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

 

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

 

 

추가내용(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
728x90
반응형

타임리프는 스프링 부트에서 공식적으로 지원하는 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
728x90
반응형

 

스프링부트 게시판 무작정 따라하기!

 

이 강의는 자바를 이용한 웹 개발 기초 지식, 프레임워크에 관한 지식이 없으신 분도 따라하기만 하면 게시판을 만들 수 있게 구성하였습니다. 물론 완벽하게 이해하시기는 힘드시겠지만 강의 통해 웹 개발에 흥미를 가지셨으면 좋겠습니다.

 

스프링 부트와 JPA, Thymeleaf를 이용한 게시판 개발

 

본 개발에서 프레임워크는 스프링 부트(Spring Boot)를 사용할 것이고, DB 접근 기술로는 Mybatis 가 아닌 JPA(Java Persistence API)를 사용할 것이며, View를 담당하는 View 템플릿은 타임리프(Thymeleaf)를 사용할 것입니다. 스프링 부트를 통해 MVC 구조를 파악할 수 있고, JPA를 통해 Mybatis와는 다른 DB 접근 방법을 익힐 수 있으며, 타임리프를 통해 사용자에게 데이터를 어떻게 보여줄 수 있는가 학습해 봅시다.

 

이 부분도 너무 어렵게 받아들이지 마시고 이런 것들이 쓰였구나 정도로 이해해주시면 됩니다.

 

개발환경

 

IDE(통합개발환경) : 인텔리제이 커뮤니티

 

개발 언어 : Java 1.8.0

 

프레임워크 : Spring Boot 2.5.3

 

빌드 : Gradle

 

DB(데이터베이스) : MariaDB 10.3.30

 

DB 접근 기술 : JPA

 

View 템플릿 : Thymeleaf

 

 

강의 영상

1) 강의 소개

 

 

2) 인텔리제이 설치

 

 

3) MariaDB 설치

 

 

4) MySQL Workbench 설치

 

 

5) 프로젝트 생성

 

 

6) DB에 테이블 생성

 

 

7) 게시글 작성폼 생성

 

 

8) 글 작성 처리

 

 

9) 게시글 리스트

 

 

10) 게시글 상세페이지

 

 

11) 게시글 삭제

 

 

12) 게시글 수정

 

 

13) 메시지 띄우기

 

 

14) 파일 업로드

 

 

강의자료

application.properties 설정

spring.datasource.driverClassName=org.mariadb.jdbc.Driver

spring.datasource.url=jdbc:mariadb://localhost:3306/board

spring.datasource.username=스키마계정

spring.datasource.password=비밀번호

 

테스트 데이터 프로시저 생성

DELIMITER $$

CREATE PROCEDURE testDataInsert()
BEGIN
    DECLARE i INT DEFAULT 1;

    WHILE i <= 120 DO
        INSERT INTO board(title, content)
          VALUES(concat('제목',i), concat('내용',i));
        SET i = i + 1;
    END WHILE;
END$$
DELIMITER $$
저작자표시 비영리 변경금지 (새창열림)

'Java Web > 웹 개발 강의' 카테고리의 다른 글

스프링 부트 + Gradle + React로 게시판 개발하기  (0) 2021.11.03

+ Recent posts

티스토리툴바