Project/오늘의 코딩 서비스 프로그램

[오늘의코딩] Step4. 프론트엔드 - Thymeleaf Layout 설정하기

Rosie_dev 2023. 3. 7. 15:47

JAVA 17, Spring Boot 3.0.2, Gradle, MySQL, Redis로 만드는
'오늘의코딩' 메일링 서비스

 

오늘은 Layout 기능을 이용한 뷰단 만들기 부분을 소개보려고 한다.

뷰단을 만들기 전에 내가 가장 먼저 하는 부분이다. 프론트 앤드 전문이 아니라서 다들 어떤 순서로 개발을 진행하시는지 모르겠지만, 나는 Layout을 Fragment를 만들어서 설정하고 각각의 뷰를 만드는 과정을 이어서 하는 편이다.

 

 

오늘의 결과물.. 두둔!

먼저 layout 설정을 설명하기 앞서 이해를 돕기 위해 오늘의 결과물과 프로젝트 구조를 먼저 살펴보자. layout을 설정하고, header, footer를 간단하게 만들어봤다.

 

1. 제목과 로그인 여부를 확인하는 부분이 header 부분이고,

2. index라고 조그맣게 표시만 되어 있는 부분이 body container,

3. 아래 서비스 설명과 sns 부분에 대해서 쓰여져 있는 것이 footer이다.

(정확한 menu 구성이 아니라 이상하지만 본 내용과 무관하니 이렇게 섹션을 구분했다는 것만 확인해주세요~)

 
 

그럼 어떻게 만들지에 대해 아래에서 살펴보고자 한다.

 

 

프로젝트 뷰단의 중심! Layout 적용하기

Layout 설정과 관련된 내용을 설명하고 있지만, 모든 코드를 담고 있지는 않으므로 구체적인 내용들은 하면서 커즈텀하면 된다.

 

의존성 추가

build.gradle에 필요한 의존성을 추가해주는데 layout 설정에 thymeleaf를 사용할 예정이기 때문에 다음 코드를 추가해주었다.

 

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.2.0'

 

application.yml 설정

application.yml에 thymeleaf와 관련된 설정을 했는데, 이 부분은 만들면서 필요에 따라 변경을 하면 될 것 같고 기본적인 설정만 해두었다.

 

spring:
    thymeleaf:
        encoding: UTF-8
        prefix: classpath:/templates/
        cache: 'false'
        suffix: .html
        template-mode: LEGACYHTML5
        mode: HTML
        dialects: thymeleaf.extras.fragments.dialect.FragmentLayoutDialect

 

fragments 만들기

layout에 고정적으로 들어갈 요소들을 만들어준다. 여기서 head, footer, header 을 기준으로 만들었는데, head 에는 공통적으로 들어갈 title, favicon 요소와 css, js link를 연결해두었다. header 에는 결과물 사진처럼 페이지 제목과 로그인 메뉴 같은 페이지 변동여부와 상관없이 고정적으로 표시될 요소를 담았다. footer 에는 페이지를 소개하는 글과 각종 웹사이트 하단부에서 볼 수 있는 내용들 중 필요한 부분을 담았다.

 

각각의 fragments 에 필요한 코드는 thymeleaf fragment 라는 명시인데, 다음 코드와 같다. 

fragment 명칭은 자유인데, 나는 이 프로젝트에서 뷰단의 네이밍 컨벤션을 _ 로 구분해서 사용할 예정이라서 header_fragment와 같이 명명했다.

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <header th:fragment="header_fragment">
        // header 내용
    </header>
</html>

 

layout 만들기

필요한 fragments 를 다 만들었다면 이걸 재료로 사용할 layout 을 아래와 같이 만들 수 있다. head, header, footer는 미리 만들어 둔 fragment의 명칭들을 사용해서 연결해준 것을 볼 수 있다. th:replace 는 말 그대로 그 코드 자리에 연결된 fragment로 대체한다는 의미이다. layout:fragment 은 이 layout을 사용할 html에서 "content" 라는 layout:fragment 코드를 연결시켜주는 역할을 한다.

 

<!DOCTYPE html>
<html lan="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head th:replace="fragments/head :: head_fragment"></head>
    <body>
        <header th:replace="fragments/header :: header_fragment"></header>
        <div layout:fragment="content"></div>
        <footer th:replace="fragments/footer :: footer_fragment"></footer>
    </body>
</html>

 

content 를 갖는 index.html

위에서 설명한 layout:fragment 즉, 본문 내용을 넣기 위해서 아래와 같이 코드를 작성했다. layout을 사용하기 위해서는 html 태그에 layout:decorate 를 사용해서 layout html 파일의 위치를 연결해준다.

 

📢 여기서 thymeleaf의 layout:decorator 로 알고 있는 사람들도 있을텐데, 나도 이전까지 그랬지만 github에서 찾아보니 해당 명칭이 layout:decorate 로 변경됨을 알 수 있었다. th:replace, th:insert 와 같이 thymeleaf에서 명명을 동사형으로 하는게 적합하다고 생각되어 내린 결론인 것 같다.

Rename layout:decorator to layout:decorate · Issue #95 · ultraq/thymeleaf-layout-dialect

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">
    <head>
        <link rel="stylesheet" th:href="@{css/index.css}" >
        <script th:src="@{js/index.js}"></script>
    </head>
    <div layout:fragment="content" class="body_container">
        <div id="container">
            // 본문내용
        </div>
    </div>
</html>

 

이렇게 하면 thymeleaf 를 이용한 layout 설정이 완성된다. To be continue.. 🎉

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

'Project > 오늘의 코딩 서비스 프로그램' 카테고리의 다른 글

[오늘의코딩] Step6. 백엔드 - Swagger 적용 및 ERD 수정  (0) 2023.03.08
[오늘의코딩] Step5. 프론트엔드 - 메인페이지 Carousel 만들기  (0) 2023.03.08
[오늘의코딩] Step3. 백엔드 - 데이터베이스 연결  (0) 2023.02.26
[오늘의코딩] Step2. 기획 - 프로젝트 설계와 구상  (0) 2023.02.24
[오늘의코딩] Step1. 프로젝트의 시작  (0) 2023.02.02
댓글