본문 바로가기
Back-End/Spring Boot

Spring Boot - Thymeleaf

by 코젼 2022. 7. 21.
728x90
반응형

2022-07-21(24일차)

💡 Thymeleaf

▪️ Thymeleaf의 확장자명은 .html이다.
▪️ Thymeeleaf의 문법은 html 태그 안쪽에 속성으로 사용된다.
▪️ Thymeleaf의 장점은 코드의 길이가 짧아진다는 것이다. 
▪️ 타임리프 태그는 서버와 별개로 동작한다.
🔸th:text
▪️ 텍스트 문자 출력
▪️ " " 큰 따옴표 꼭 적을 것
데이터를 주고받을 때 Entitiy 클래스 자체를 반환하면 안되고 데이터 전달용 객체를 생성해서 사용해야한다?
요청과 응답 객체가 항상 엔티티와 같지 않기 때문이다.​

<span th:text="${itemDto.itemNm}"></span>​​


🔸th:each
▪️ 반복문
▪️ 여러 개의 데이터를 가지고 있는 컬렉션 데이터를 화면에 출력한다.
▪️ 반복함으로서 코드를 줄일 수 있다.
▪️ "itemDto" 객체는 임의로 정하고, ${itemDtoList}는 서버에서 지정한대로 받는다.
▪️ status는 여러개의 메서드를 가진다. 하단에서는 status.index가 사용되었다. 인덱스를 반환한다.
▪️ status.even은 짝수면 true 아니면 false를 반환한다.

🔸th:if, th:unless
▪️ 조건문

🔸th:switch, th:case
▪️ default는 따로 없다.
🔸th:fragment
▪️ 페이지 레이아웃
▪️  공통영역처리
▪️ 웹 페이지의 공통으로 반복되는 영역
<div th:fragment="footer">​
<div th:fragment = "header">

▪️ footer, header 영역입니다.

<th:block layout:fragment="script"></th:block>
<th:block layout:fragment="css"></th:block>​

▪️ 공통 fragment를 만들고 header는 th태그를 사용한다.
▪️ 불러와서 사용할 때 replace로 사용

▪️ layout:fragment로 content가 들어갈 자리라고 정의한다.

<div layout:fragment="content">
▪️ 태그화
<th:block layout:fragment="script"><th:block>
<th:block layout:fragment="css"><th:block>​

 

▪️ 교체
<div th:replace="fragments/header::header"></div>​

⭐ 태그화와 교체의 차이점 : 태그화는 현재 있는 html에 th를 속성으로 집어 넣었고, 교체는 th블록을 태그 안에서 내용을 바꿔치기 해서 넣었다.
🔸th:object
 
th:object="${itemFormDto}"

◾ 사용할 때마다 itemFormDto.~ 를 계속 호출해야하기 때문에 th:object를 이용해 이 밑에서는 모두 itemFormDto를 사용할 것이라고 한다.
th:field="*{itemNm}"​

◾ id와 차이점은 중괄호 앞에 *표시가 붙어있다. id라고 적었지만 이전의 th:object를 붙였기 때문에 그 밑에 있는 것이다.
 --> 한꺼번에 지정하고 그 밑에 *중괄호해서 이름을 적으면 object밑에 있는 멤버변수임을 알 수 있다.
◾ th:object를 통해 .을 사용할 필요가 없어진다.

🔸th:field
◾ html태그에 id와 name, value를 변수 이름 값으로 대신 만들어준다.
◾ id = itemNm, name = itemNm, value = itemNm 다 자동으로 만들어진다.

💁‍♀️Open Resource

▪️ ctrl + shift + R : 이름으로 검색하기

▪️ 서버에서 접근해서 값을 집어넣을 거기 때문에 열려있는 html이 아니다. 따라서 webapp 디렉터리에 존재하지 않는다.
▪️ 환경설정파일과 헷갈리고 자바파일도 아니기 때문에 main에 넣지 않았다.

▪️  템플릿 html이다.

💡Thymeleaf

📃 thymeleafEx01.html

▪️ data라는 값을 서버에서 주지 않으면 html만 출력되고 ( 값이 없으면 없는대로 html 출력 )
값을 주면 "Hello Thymeleaf!!" 문자열을 덮어씌운다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <p th:text="${data}">Hello Thymeleaf!!</p>
</body>
</html>
▪️ 이 파일을 return 시켜주는 java파일이 어디있는지 찾는다.
▪️ Controller에 있을 가능성이 가장 높다.

▪️ return에 html이 붙지 않고 경로만 표시되어있다.

▪️ 신규로 글을 게시한다 - post ( insert와 연관이 있다. )
▪️ 글을 추가적인 내용을 저장한다. - push (put과 연관있기 때문에 update)

▪️ 주소를 보냈는데 요청 타입을 보내면서 push, post를 잘못보내면 저장이 되지 않는다.
 --> insert, update가 되지 않는다.

▪️ put방식으로 보낸 건 put으로 받아주어야 한다.
▪️ Controller 자체에서 이미 타임리프를 걸어두었고 함수별로 매핑을 걸어두었기 때문에 차례대로 매핑된다.

💡크롬 캐시 지우기

▪️ Ctrl + Shift + Delete

💡Build Automatically

▪️ 애플리케이션 실행 후 자바 소스코드를 수정하면 자동으로 애플리케이션이 재시작되는 것을 확인할 수 있다.

▪️ itemDto -> item이나 다른 이름으로 바꿔도 상관없다.

 

728x90
반응형

'Back-End > Spring Boot' 카테고리의 다른 글

Spring Boot - Repository 설계하기  (0) 2022.07.22
Spring Boot - 엔티티 매핑 관련 어노테이션  (0) 2022.07.22
Spring Boot - JPA  (0) 2022.07.21
Spring Boot - 어노테이션 종류  (0) 2022.07.20
Spring Boot - jsp 파일 생성, web 확인  (0) 2022.07.20

관련글

댓글

티스토리툴바