21일차

오늘은 Part2. 게시판 서비스 강의의 `게시글 페이지 만들기` 부분을 학습하였다.

타임리프

타임리프는 뷰 템플릿 엔진으로 JSP, Freemarker와 같이 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 한다.

타임리프 문법

th:
태그 안의 값을 서버에서 전달 받은 값에 따라서 표현하고자 할 때 사용
th:text
태그 안에 text 할당
th:utext
태그 안에 text 할당, html태그가 있다면 태그 값을 반영해서 표시
th:value
엘리먼트들의 value 값을 지정
th:with
변수 값을 지정해서 사용
th:case
Switch-case 문이 필요할 때 사용
*로 else를 처리
${...}
컨트롤러에서 전달받은 변수에 접근할 수 있으며 th:속성 내에서만 사용 가능
@{...}
@{...}안에 적힌 URL은 앞에 contextPath/ + URL을 의미함
*{...}
th:object로 정의된 변수의 변수 값을 의미한다.
*{name} == ${member.name}
 

타임리프 decopled template logic

html문서에서 타임리프 구문을 따로 분리시켜서 작성하고, html 문서를 순수 마크업 상태로 유지시키는 방법이다.
 

사용방법

ThymeleafConfig.java

package com.project.projectboard.config;

import lombok.Getter;
import lombok.RequiredArgsConstructor;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.boot.context.properties.ConstructorBinding;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver;

@Configuration
public class ThymeleafConfig {

    @Bean
    public SpringResourceTemplateResolver thymeleafTemplateResolver(
            SpringResourceTemplateResolver defaultTemplateResolver,
            Thymeleaf3Properties thymeleaf3Properties
    ) {
        defaultTemplateResolver.setUseDecoupledLogic(thymeleaf3Properties.isDecoupledLogic());

        return defaultTemplateResolver;
    }


    @RequiredArgsConstructor
    @Getter
    @ConstructorBinding
    @ConfigurationProperties("spring.thymeleaf3")
    public static class Thymeleaf3Properties {
        /**
         * Use Thymeleaf 3 Decoupled Logic
         */
        private final boolean decoupledLogic;
    }

}

하지만 여기서 @ConfigurationProperties에 빨간줄이 나타날 수도 있는데, 이는 만약에 유저가 ConfigurationProperties를 직접 만든 경우에는 스캔을 진행해줘야 하기 때문에 생기는 것이다. 따라서 main 애플리케이션 파일에 @ConfigurationPropertiesScan을 추가해주면 된다.
 
다음으로 application.yaml 파일에 옵션을 추가해주면 된다.

  thymeleaf3:
    decoupled-logic: true