상똥이의 Back-End 공부방

[Board Project] 15. 게시판 페이지 만들기(2) (Thymeleaf) 본문

프로젝트/게시판 만들기

[Board Project] 15. 게시판 페이지 만들기(2) (Thymeleaf)

상똥백 2023. 10. 25. 14:26

[1. 인덱스 기반 연결로 코드 간결히 하기]

1. resource.templetes.에 index.html, footer.html, header.html 생성

2. 타임리프 문법으로 코드 단순화

- index.html 안의 header와 footer에 각각 경로 설정해서 연결

- th:replace"~(header :: header1)"

(1) index.html

    <header th:replace="~{header :: header1}"></header>
(생략)
    <footer th:replace="~{footer :: footer}"></footer>

(2) header.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Header templete</title>
</head>
<body>
    <header th:fragment="header1">
        header여기에 연결했어요
        <hr>
    </header>
</body>
</html>

(3) footer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Footer templete</title>
</head>
<body>
    <footer th:fragment="footer">
        <hr>
        footer 여기서 연결했어요
    </footer>
</body>A
</html>

(4) 결과 (localhost:8080/articles)

[2. 타임리프 기능을 활용해 코드 단순화하기]

1. decoupled 기능을 사용할 것

-build.gradle에 의존성 붙이기

annotationProcessor 'org.springframework.boot:spring-boot-configuration-processor'

- index.html 의 header와 footer부분에 각각 <header></header> <footer></footer>만 남기기

- root.config경로에 ThymeleafConfig.class생성

- 코드(접은 글) 붙여넣기

더보기 
package com.fastcampus.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 coupled Logic */
        private final boolean decoupledLogic;
    }
}

- 메인 클래스(FastCampusProjectBoardApplication)에 스캔을 위해 @ConfigurationPropertiesScan 삽입

코드 (접은 글)

더보기 
package com.fastcampus.projectboard;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.context.properties.ConfigurationPropertiesScan;

@ConfigurationPropertiesScan
@SpringBootApplication
public class FastCampusProjectBoardApplication {
	public static void main(String[] args) {
		SpringApplication.run(FastCampusProjectBoardApplication.class, args);
	}
}

- application.yml 에 spring.thymeleaf3.decoupled-logic: true 붙이기

- resources.templated.articles 경로에 index.th.xml 파일 생성 (그냥  파일로 생성)-

- 파일 안에 아래 코드 붙여넣기 (접은 글)

더보기 
<?xml version="1.0"?>
<thlogic>
    <attr sel="header" th:replace="header :: header1" />
    <attr sel="footer" th:replace="footer :: footer" />
</thlogic>

웹 실행 (게시판 페이지)

- 별도의 파일에 저장함으로써 기본 마크업 파일은 타임리프 문법이 보이지 않음

한국 컨테이너 팔레트
산업대상 수상

'프로젝트 > 게시판 만들기' 카테고리의 다른 글

[Board Project] 19. 게시판 서비스 뷰에 기능 구현하기  (0) 2023.11.05
[Board Project] 17. 로그인 페이지 만들기  (0) 2023.11.02
[Board Project] 14. 게시판 페이지 만들기(1) (Thymleaf)  (0) 2023.10.24
[Board Project] 13. 뷰 엔드포인트 테스트 정의  (0) 2023.10.23
[Board Project] 12. API 구현 (Query DSL, Spring data, JPA)  (0) 2023.10.21
'프로젝트/게시판 만들기' Related Articles more