1. 참고: https://catsbi.oopy.io/32a9458e-f452-4733-b87c-caba75f98e2d

  2. 타임리프 특징

    1. 서버 사이드 HTML 랜더링(SSR)
      1. 백앤드에서 HTML을 동적으로 렌더링하는 용도로 사용
      2. 페이지가 어느정도 정적이고 백앤드 개발자가 개발하는 경우 좋은 선택
    2. 네츄럴 템플릿
      1. HTML을 최대한 유지하려고 함
      2. JSP와 달리 확장자의 변경도 없으며 JSP의 경우 확인하기 위해서는 서버가 가동되어야 함
    3. 스프링 공식 지원

  3. 사용법

    1. 간단한 표현
      1. ${…}: 변수 표현식
      2. *{…}: 선택 변수 표현식
      3. #{…}: 메세지 표현식
      4. @{…}: 링크 URL 표현식
      5. ~{…}: 조각 표현식
    2. 리터럴(타임리프 태그 내에서 사용)
      1. 텍스트: ‘one text’, ‘Another one!’ → 만약 공백이 없이 이어지는 문자에 대해서는 홑따옴표로 감싸지 않아도 됨
      2. 숫자: 0, 34, 3.0
      3. 불린: true, false
      4. 널: null
      5. 리터럴 토큰: one, sometext, main 등
    3. 문자 연산
      1. +: 문자 합치기
      2. | : 리터럴 대체
    4. 산술 연산
      1. +, -, *, /, %: 이진 연산
      2. -: 찾아보기!@@@@
    5. 불린 연산
      1. and, or: 이진 불린 연산
      2. |, &
    6. 비교와 동등
      1. >, <, >=, <= (gt, lt, ge, le): 비교
      2. ==, != (eq, ne): 동등 연산
    7. 조건 연산
      1. (if) ? (then): if - then 문법
      2. (if) ? (then) : (else): if - then - else 문법
      3. (value) ?: (defaultValue): 기본값 설정
    8. 특별한 토큰
      1. _: No-Operation

  4. 텍스트

    1. th:text 활용

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

    2. th:utext

      // name 애트리뷰트에 html 태그가 포함된 경우 태그가 text로 나오지 않고 적용됨
// name = '<b>chobolevel</b>' 인 경우 bold서체 적용됨
<p th:utext="${name}"></p>

    3. [[…]] 활용

      <p>hello [[${name}]]</p>

    4. [(…)] 활용

      // th:inline은 태그안의 내용을 타임리프가 해석하지 않도록 함
// th:utext처럼 사용하기 위해 적용
<p th:inline="none">[(${name})]></p>

  5. 지역 변수 선언

    1. th:with 를 통해 해당 페이지에서만 접근 가능한 변수 만들 수 있음
    <div th:with="item = ${list[0]}">
	<p th:text="${item.name}"></p>
	<p th:text="${item.age}"></p>
</div>

  6. 기본 객체

    1. 타임리프는 기본 객체 몇가지를 제공
      1. ${#request}
      2. ${#session}
      3. ${#response}
      4. ${#servletContext}
      5. ${#locale}

  7. javascript에서 타임리프 변수 사용방법

    1. 1번째 방법

      // th:inline="javascript"를 script 태그에 사용하면 별도 주석없이 타임리프 변수 사용
<script th:inline="javascript">
	const name = [[${name}]]
	
	console.log(name)
</script>

// 주석을 사용해서 타임리프 변수 사용
<script>
	/*<![CDATA[*/
	const name = /*[[${name}]]*/

	console.log(name)
	/*]]>*/
</script>
      1. script 태그에 th:inlnie=javascript 명시
      2. 스크립트 코드는 /*<![CDATA[*/ /*]]>*/로 감싸야함(th:inline=”javascript” 사용하지 않은 경우)
      3. 사용할 타임리프 변수는 /*[[${…}]]*/에 감싸서 사용

    2. 2번째 방법

      <input id="clientId" type="hidden"
	th:value="${@environment.social.app.kakao.client-id}"/>

<script>
	const clientId = document.querySelector('#clientId').value;
</script>
      1. 먼저 hidden 타입의 인풋에 타임리프 문법으로 환경변수의 값을 가져옴
      2. js에서 dom을 통해 값을 가져옴
      3. form안에 hidden input을 사용해서 submit 방식으로 사용 가능

    3. 3번째 방법

      Untitled

      1. model방식으로 페이지로 넘겨서 사용하는 방법
      2. 외부 설정을 사용하는 페이지마다 작성해야하는 번거로움이 있음

  8. 레이아웃

    1. 사용하는 이유

      1. 보통 header, footer가 공통적으로 사용됨
      2. 각 html파일마다 작성하는 것은 효율적이지 못하기 때문에 반복되는 코드 줄이고자 사용

    2. dependency

      implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

    3. 사용

      1. fragment 생성

        // header.html

<html lang="ko">
<div th:fragment="headerFragment">
	<h1>Header Fragment</h1>
</div>
</html>

      2. fragment layout 작성

        // default_layout.html

<!DOCTYPE html>
<html lang="ko" xmlns:layout="<http://www.ultraq.net.nz/thymeleaf/layout>">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
// th:replace="(templates 이후 경로) :: th:fragment로 작성한 이름"

<th:block th:replace="fragments/header :: headerFragment"></th:block>

// html파일별로 아래 부분만 바뀌게 됨
<section layout:fragment="content"></section>

<th:block th:replace="fragments/footer :: footerFragment"></th:block>

</body>
</html>

      3. layout 활용

        // index.html

<!DOCTYPE html>
<html lang="ko"
  xmlns:layout="<http://www.ultraq.net.nz/thymeleaf/layout>"
	layout:decorate="~{layout/default_layout.html}">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>

<section layout:fragment="content">
	// 작성한 내용이 default_layout.html의 layout:fragment="content" 영역에 작성됨
</section>

</body>
</html>