Spring 생성
- spring web, lombok, thymeleaf
- group : hello / artifact : thymeleaf-basic
시작
- resources > static > index.html 을 생성하면, spring은 해당 파일을 진입 html로 설정한다.
index.html
타임리프
타임리프 선언
<html xmlns:th="http://www.thymeleaf.org">
text, utext
📦 예제1
- 태그 안에서 출력하기
- th:text = "${data}"
- 그냥 출력하기
- [[${data}]]
Escape - Unescape
- 강조하려고 <b> tag를 넣었는데, 문자 그대로 출력이 된다.
- html에서 < --> < 로 바꿔줬기 때문. 위와 같은 현상을 이스케이프라고 한다.
Spring EL
- userA, userB를 선언해주고 list,map에 담아서 넘겨줬다.
일반 userA의 경우
- .username
- user['username']
- user.getUsername()
3가지 방법으로 가져올 수 있다.
list의 경우 배열의 index만 붙는 것이 다르다.
map의 경우 userMap['userA'] 와 같이 가져오면 된다.
지역변수 - th : with
- 위와 같이 지역변수를 선언할 수 있다. 단, 해당 지역변수는 선언한 태그 ( scope ) 안에서만 사용 가능하다.
기본 객체들
편의객체
- RequestFacade -> 톰캣이 넣어준다.
- Controller에서 HttpServletRequest request 식으로 넣어줘도 되지만, 스프링에서 ${#request} 식으로 제공을 해주는 것이다.
편의 객체
parameter의 경우 자주 접근이 된다.
그래서 ${param.파라미터} 로 접근할 수 있다.
위의 예제에서는 파라미터 = paramData 이므로, ${param.paramData} 로 접근할 수 있는 것이다.
session도 가져올 수 있고, Bean에 직접 접근해서 데이터를 가져올 수도 있다.
유틸리티와 날짜
${#temporals.format(localDatetime,'yyyy-MM-dd HH:mm:ss') 가 가장 많이 사용된다.
URL 링크
<a th:href = "@{/URL}"> 로 경로를 표시할 수 있다.
리터럴
소스 코드상에서 고장된 값을 지칭한다.
리터럴 대체
"|문자 ${data} |"
많이 사용된다.
연산
Elvis
이항연산자 처럼 출력을 한다.
th:text= "${data}?:'데이터 없음'"
No-Operation
말 그대로 아무것도 하지 않는다. 그냥 기본 tag 안에 있는 값을 출력한다.
속성 값 설정
th: 속성 우선
th:속성이 우선권을 갖는다.
만약 값이 위와 같다면 해당 input tag의 name은 userA로 치환된다.
당연하게도, 만약 spring - thymeleaf로 렌더링을 거치지 않고 html파일을 그냥 열어버리면 위와 같이 치환되는게 아니라 그냥 속성값을 갖고 있고, name값은 원래의 name이 적용된다.
코드 실행
- attrappend
- 클래스 뒤에 붙여준다.
- text로 붙여주기 때문에, 띄어쓰기 필수
- attrprepend
- 앞에 붙여준다
- 역시 띄어쓰기 필수
- classappend
- 편의기능
- 띄어쓰기 할 필요 없이 알아서 뒤에 붙여준다.
- th:checked="false"
- 위와 같이 체크드 표시를 쉽게 할 수 있다.
반복문
th:each=" user : ${users} " 와 같이 가져올 수 있다.
해당 each는 each가 걸리는 태그 내에서 반복된다.
<tr th ~>
</tr>
- userStat
<tr th:each="user : ${users}">위처럼 생략해도, 알아서 userStat 변수가 생성돼서 userStat을 그대로 사용할 수 있다.
조건문
<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>위와같이 th:if 문을 사용해서 조건문을 사용할 수 있다.
이 때, 조건에 맞지 않으면 아예 tag 자체가 사라진다.
주석
- 표준 HTML 주석
- HTML 코드에 보인다.
- 해당 주석은 렌더링 하지 않는다.
- 타임리프 파서 주석
- 보통 사용하는 주석
- 해당 주석 사이의 코드를 렌더링 하지 않는다.
- 타임리프 프로토타입 주석
- 거의 사용하지 않는다.
- 헷갈릴까봐 소개
- 렌더링할 때는 보여주는데, HTML파일을 그냥 열 때는 보여주지 않는다.
블록
위와 같이 tag를 N개 따로 돌리고 싶을 때 사용할 수 있다.
렌더링을 하면 제거된다.
자바스크립트 인라인
- 자바 스크립트 인라인 사용 전
- [[${user.username}]] -> 에러난다.
- " " 따옴표 처리를 해줘야 한다.
- 객체도 toString으로 들어간다.
- 사용 후
- 알아서 따옴표 처리를 해준다.
- 내추럴 탬플릿 지원
- 주석이 돼 있는 경우, 쌩 html을 열면 기존 text가 열리나, 렌더링이 되면 주석이 된 코드의 값이 들어간다.
- 객체의 경우 객체 자체가 들어가게 된다.
- 이스케이프
- html element 처럼 처리를 해준다.
인라인 each
템플릿 조각
th:fragment = "이름" 으로 컴포넌트 설정하듯 설정할 수 있다.
참조하는 쪽에서는 th:insert="~{경로 :: 이름}" 으로 참조할 수 있다.
( replace 로 하면 교체해버린다 )
괄호는 생략할 수 있으나, 간단한 경우에만 가능하다.
또, parameter를 넘길 수 있다.
받는 쪽에서는 함수 이름 뒤에 () 설정, 넘기는 쪽에서는 함수 이름 뒤에 () 를 설정해주면 된다.
템플릿 레이아웃
교체
<head> 부분 전체를 base.html로 replace한다.
이 때, common_header의 title,links라는 변수로 넘겨준다.
Html전체 교체
fragment를 써도 되는데, fragment를 쓰면 중복이 많아진다.
사이트가 커지면 layout을 사용하는 것이 좋다.
'스프링 & Jpa > 📌김영한 Spring 강좌' 카테고리의 다른 글
| 스프링 MVC 1편 - (9) MVC 실습 (0) | 2021.08.01 |
|---|---|
| 스프링 MVC 1편 - (8) annotation 기반 MVC 구조 (2) (0) | 2021.07.31 |
| 스프링 MVC 1편 - (7) annotation 기반 MVC 구조 (1) (0) | 2021.07.30 |
| 스프링 MVC 1편 - (6) MVC 구조 이해 (0) | 2021.07.11 |
| 스프링 MVC 1편 - (5) MVC framework 만들기 - 2) (0) | 2021.05.09 |
댓글