728x90
반응형
💡 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 |
댓글