Spring Boot 4. Thyme의 레이아웃

 Spring Boot 4. Thyme의 레이아웃



1.  include 방식의 처리

th:insert 나 th:replace 를 이용해서 특정한 부분을 다른 내용으로 변경

replace 는 내용을 완전히 대체하고 insert 는 기존 내용의 바깥쪽 태그는 유지하면서 내용만 추가되는 방식



- 불러올 내용 작성

불러올 태그의 th:fragment 속성에 프래그먼트 이름 지정(불러올 때 사용)


- 내용 불러오기

불러올 위치의 태그의 th:replace나 th:insert 속성에 ~{ } 안에 불러올 내용이 있는 패이지의 위치의 경로와 파일명 작성 (resources 폴더 안의 tamplates 폴더가 시작 위치)

경로 다음에 한 칸 띄고 :: 다음에 불러올 프래그먼트의 이름 작성

이름을 지정하지 않으면 해당 패이지 전체를 불러옴


* 예시

불러올 페이지 (templates 폴더 안의 fragments 폴더 안의 fragment1.html 파일)

<div th:fragment="part1">
  <h2>Part 1</h2>
</div>

<div th:fragment="part2">
  <h2>Part 2</h2>
</div>

<div th:fragment="part3">
  <h2>Part 3</h2>
</div>


불러오는 페이지

<h1>Layout 1</h1>
<div th:replace="~{/fragments/fragment1 :: part1}"></div>

<h1>Layout 2</h1>
<div th:insert="~{/fragments/fragment1 :: part2}"></div>

<h1>Layout 3</h1>
<th:block th:replace="~{/fragments/fragment1 :: part3}"></th:block>

<실행결과>











 replace를 이용한 Layout1과 Layout3은 기존의 <div>태그와 <th:block>태그 대신에 불러온 조각들이 사용됨. 

insert를 이용한 Layout2는 기존의 <div> 태그 안에 불러온 <div> 태그가 추가됨



* 예시 - 전체 내용 불러오기

불러올 페이지

<div>

  <h2>Fragment 2</h2>
  <h2>Fragment 2</h2>
  <h2>Fragment 2</h2>

</div>

불러오는 페이지

<h1>Layout Test</h1>
<h2>전체 페이지 불러오기</h2>

<div style="border: 1px solid black">

    <th:block th:replace="~{/fragments/fragment2}"></th:block>

</div>

<실행결과>









-> ':: [프래그먼트 이름]' 을 작성하지 않았기 때문에 코드를 보면 전체 페이지의 내용이 추가된 것을 볼 수 있음




2. 파라미터 방식의 처리

불러오는 페이지에서 불러올 페이지를 부르면서 파라미터를 넘겨줄 수 있음

특정한 태그를 파라미터처럼 전달해서 다른 th:fragment 에서 사용가능 (css 의 id 선택자(#) 등 이용)

파라미터로 받은 태그는 th:replace나 th:insert를 이용해서 적용


- 불러올 페이지 : th:fragment 속성의 이름을 지정하고 그 뒤에 ( ) 안에 파라미터를 받아올 변수의 이름 작성

- 불러오는 페이지 : th:replace나 th:insert를 이용해서 다른 내용을 불러올 때 불러올 프래그먼트 이름 다음에 ( ) 안에 전달할 파라미터 값 작성 



* 예시 

불러올 페이지 (fragment3.html)

<div th:fragment="target(first, second)">

  <style>
    .c1 {
      background-color: blue;
    }
    .c2{
      background-color: red;
    }
  </style>

  <div class="c1">
    <th:block th:replace = "${first}"></th:block>
  </div>

  <div class="c2">
    <th:block th:replace = "${second}"></th:block>
  </div>

</div>

프래그먼트 이름 다음에 파라미터를 받을 변수 작성

태그가 파라미터로 전달되면 페이지 내에서 th:replace를 이용해서 적용


불러오는 페이지

<th:block th:replace="~{/fragments/fragment3 :: 
                                 target(~{this:: #ulFirst}, ~{this :: #ulSecond})}">

    <ul id="ulFirst">
        <li>AA</li>
        <li>BB</li>
        <li>CC</li>
    </ul>

    <ul id="ulSecond">
        <li>DD</li>
        <li>EE</li>
        <li>FF</li>
    </ul>

</th:block>

불러올 페이지에 파라미터로 자신의 태그의 아이디(#~~)를 전달


<실행결과>








-> 자신의 태그를 파라미터로 전달해서 적용된 프래그먼트를 불러옴




3. 레이아웃 템플릿


레이아웃 전체를 하나의 페이지로 구성

필요한 부분을 파라미터로 전달

페이지의 header나 footer과 같이 공통적인 부분을 레이아웃으로 만드로 body에 해당하는 부분은 파라미터로 받아와서 화면에 표시



* 예시

layout1.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<th:block th:fragment="setContent(content)">
<head>
    <meta charset="UTF-8">
    <title>Layout</title>
</head>

<body>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .header {
    width: 100vw;
    height: 20vh;
    background-color: aquamarine;
  }
  .content {
    width: 100vw;
    height: 70vh;
    background-color: beige;
  }
  .footer {
    width: 100vw;
    height: 10vh;
    background-color: cadetblue;
  }
</style>

<div class="header">
  <h1>HEADER</h1>
</div>

<div class="content">
  <th:block th:replace="${content}"></th:block>
</div>

<div class="footer">
  <h1>FOOTER</h1>
</div>
</body>

</th:block>
</html>

-> 간단한 레이아웃 구현. 

<th:block> 태그로 <head> <body> 태그를 감쌈.  

fragment로 지정해서 다름 파일에서 불러올 수 있도록 하고 fragment 이름을 setContent로 지정하고 content로 파라미터를 맏음

class가 content인 <div> 태그는 th:replace 속성을 지정해서 content라는 이름으로 전달되는 파라미터로 대체됨


testLayout.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<th:block th:replace="~{/layout/layout1 :: setContent(~{this :: content})}">

 <th:block th:fragment="content">
     <h1>layout 테스트</h1>
 </th:block>

</th:block>
</html>

가장 바깥의 <th:block 태그는  setContent로 대체됨. 이때 content라는 이름으로 내부의 class가 content인 태그를 전달


<실행결과>









-> testLayout.html의 내용이 layout1.html의 내용으로 대체되었고 layout1.html에서 content 부분만 testLayout.html에서 파라미터로 넘겨준 내용으로 표시됨





4. 외부에서 레이아웃을 다운받아서 적용


스타트부스트랩등의 사이트에서 무료나 유료로 레이아웃을 다운받아서 적용할 수 있음

다운받은 파일을 프로젝트 내의 reosurses -> static 폴더로 압축을 풀어서 옮김


* static폴더

정적 파일들(HTML, CSS, Javascript, 이미지 등)을 저장하는 폴더

클래스패스의 루트 경로에 위치

static 폴더에 저장된 파일들은 웹 어플리케이션의 컨텍스트 경로에 상관없이 접근 가능

8080/ 뒤에 바로 해당 파일의 이름을 작성해서 접근 가능







index.html 파일의 내용을 그대로 레이아웃으로 사용할 layout.html 파일에 붙여넣기

Thymeleaf 관련 설정을 해줘야 함


<th:block th:fragment="setContent(content)">

<head>

<head> 태그 위에 <th:block> 태그를 추가해서 파일의 <head> 와 <body>를 모두 감싸고 fragment 속성을 지정해서 해당 패이지의 내용을 다른 패이지에서 불러올 수 있도록 하고 그 과정에서 content라는 이름으로 파라미터를 받아오도록 설정


<head> 안의 CSS 파일의 링크를 불러오는 부분의 href 속성의 앞에 th:를 붙여주고 내용을 @{/   } 으로 감싸줌

파일 아래에 있는 <script> 태그도 <head> 태그 안으로 옮겨주고 마찬가지로 src 속성의 앞에 th:를 붙여주고 내용를 @{/   }감싸줌 (외부 url의 경우에는 해주지 않아도 됨)

<link th:href="@{/css/styles.css}" rel="stylesheet" />

<script th:src="@{/js/scripts.js}"></script>

레이아웃 파일에서 컨텐트가 표시되는 부분의 내용을 지주고 파라미터로 전달받는 content가 표시되도록 설정
<!-- Page content-->
<div class="container-fluid">
  <th:block th:replace = "${content}"></th:block>
</div>



해당 레이아웃을 적용할 페이지에서 th:replace 속성을 이용해서 layout.html 파일에서 <th:block th:fragment>로 감쌌던 내용을 불러오고 그러면서 파라미터로 content를 넘겨줌

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<th:block th:replace="~{/layout/layout :: setContent(~{this :: content})}">

 <th:block th:fragment="content">
     <h1>layout 테스트</h1>
 </th:block>

</th:block>
</html>


<실행결과>










-> 다운 받은 레이아웃 파일에서 content 부분에 원하는 내용 출력








댓글

댓글 쓰기

이 블로그의 인기 게시물

Spring Boot 6. 계시판 프로젝트

이미지
 Spring Boot 6. 계시판 프로젝트 1. 프로젝트 구조 1:N 관계 하나의 유저는 여러개의 글을 작성할 수 있음 하나의 글에는 여러 댓글이 달릴 수 있음 3개의 테이블이 서로 참조함(user, board, reply) 2. 프로젝트 생성 - 추가 라이브러리 Spring Boot DevTools, Lombok, Spring Web, Thymeleaf, Spring Data JPA - DB 및 Thymeleaf 설정 build.gradle dependencies 안에 mariadb 드라이버 추가 dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' annotationProcessor 'org.projectlombok:lombok' providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat' testImplementation 'org.springframework.boot:spring-boot-starter-test' // 추가 implementation group : 'org.mariadb.jdbc' , name : 'mariadb-java-client' , ...
자세한 내용 보기

Spring Boot 2. Maria 데이터베이스 & Spring Data JPA

이미지
 Spring Boot 2. Maria 데이터베이스 & Spring Data JPA 1. Maria DB 설치와 데이터베이스 생성 1) Maria DB 설치 맥에서는 홈브류를 이용해서 설치 brew install mariadb 2) DB 생성 워크벤치를 이용해서 DB 생성 - 새로운 연결 생성 username : root pw : 1234 - DB 생성 Schemas ->우클릭 create schema.. -> 이름 :bootex, Character set : utf8 -> apply - 사용자 생성 Administration -> Users and Privileges -> Add Account  -> Login Name : bootuser, Limit to Hosts Matching : %(모든 곳에서 접근 가능), pw : bootuser -> Schema Privileges -> Add Entry -> Selected schema -> bootex 선택 -> Select All -> Apply   2. Spring Data JPA 를 이용하는 프로젝트 생성 1) 프로젝트 생성 기존 프로젝트 생성방식과 동일. 단 Dependencies를 선택하는 부분에서 기존에 선택한 라이브러리에서 추가로 SQL 탭의 Spring Data JPA 선택 2) DB를 위한 Spring Boot 설정 Spring Boot에서는 특정한 라이브러리가 있다면 관련된 설정들을 자동으로 추가해줌 그러나 지금 상태에서 실행을 하면 에러가 발생하는데 이는 Spring Data JPA 라이브러리가 추가되면서 자동으로 이에 관련된 설정도 추가되었지만 구체적인 값이 지정되지 않았기 때문 -> 두 가지 설정 필요 - Maria DB를 위한 JDBC 드라이버 https://mvnrepository.com/artifact/org.mariadb.jdbc  접속 -> 1. MariaDB J...
자세한 내용 보기

Django 10. DB 연동

이미지
 Django 10. DB 연동 1. 테이블 생성 settings.py 파일의 DATABASE 딕셔너리에 DB 관련 정보 작성 기본적으로 SQLite로 되어있고 다른 DB를 사용할 수도 있음 models.py 파일에 클래스를 이용해서 모델 생성 models.Model 을 상속받아서 작성 클래스 명은 테이블 명으로 작성 멤버 변수로 테이블의 컬럼 지정 models.[데이터 타입](옵션) * 데이터 타입  integer, char, boolean, date, decimal(float), text, file 등 * 옵션 null, blank, choice, default, primary_key, unique 등 PK 컬럼은 따로 지정하지 않으면 자동으로 생성됨 * 예시 class Question ( models . Model ): question_text = models.CharField( max_length = 200 ) pub_date = models.DateField( "date published" ) class Choice ( models . Model ): question = models.ForeignKey(Question, on_delete = models. CASCADE ) choice_text = models.CharField( max_length = 200 ) votes = models.IntegerField( default = 0 ) python3 manage.py makemigrations : magrations 폴더 안에 마이그래이션 파일(py) 생성 python3 manage.py migrate : 마이그래이션 파일을 DB에 적용해서 테이블 생성 * 데이터 표시 테이블의 해당 컬럼에 대한 정보를 지정하려면 모델 클래스에 __str__ 맴버함수를 정의해소 표시할 문자열을 반환 * 예시 class Question ( models . Model ): question_text...
자세한 내용 보기