0614 - Thymeleaf 시작하기

Thymeleaf

장점....머가잇을가
jsp를 대신해서..
html에 영향을 끼치지 않으면서 서버를 구축할수 있다. html을 망가트리지 않으면서 서버코드를 얹을 수 있음.
jsp는 기존의 html(퍼블리싱된)를 수정하면서 서버코드를 넣었음.
-> 퍼블리셔가 html을 수정하려고 하면,,???헐..

thymeleaf 설정하기

add Starters -> template Engines -> thymeleaf추가

타일즈 config 설정 해제 (어노테이션 주석처리)

뷰페이지찾는순서
1.타일즈 리졸버
2.리소스 리졸버
3.타임리프 리졸버

tymeleaf 시작하기 (텍스트 출력)

모델전달

컨트롤러에서 모델전달

뷰단에 꽂아넣기

기존의 퍼블리싱을 건드리지 않고 값을 꽂아넣을 수 있음. 퍼블리싱 수정이 쉽다.

th:utext vs th:text

• th:utext : html 태그 포함
• th:text : 단순 텍스트 출력
  모델에 html 태그가 포함되었을 때
  ->->
  th:text를 쓰면
  
  헐랭...이건아니지..

이때 th:utext를 쓰면?

타임리프 Expression Syntax

${} :variable
*{} : selection
#{} : message
@{}
~{}

${} : controller에서 받은 모델에서 꺼냄

#{} : properties확장자를 갖는 외부파일에서 가져옴(message)

(properties 파일 : 키,값으로 이루어진 파일...읽고 쓰기 가능)
1. properties파일을 만들어준다

2. application.properties에서 설정
   

3. html에서 각각 $와 #으로 title을 가져와봄..
   

4.${}은 모델에서, #{}은 properties에서 가져와짐다

th:each

layout 분리시키기

1. header.html, footer.html을 분리시켜 준비
   분리시킨 파일에도 html과 head설정이 필요하다.

2.header 붙이기
(~다음에 나오는 경로는 루트) ~{}생략가능

th:insert / th:replace / th:include 차이

insert : div안에 들어감
replace : div위에 덮어쓰기, 바꿔치기(div없어짐)
include : footer태그 안쪽에 있는 것만 가져옴(footer없어짐)

3. 설정하는 코드는 안가져오고 싶다..
   css selector를 통해 가져오자
   여기만 가져와졌다!!

fragment 이름으로도 가져올 수 있음.

이렇게 이름을 주고가져오기

parameter replace(layout에 main 끼워넣기)

layout.html의 body fragment에 매개변수 x를 만들고 x를 main에 replace.

list.html에 layout을 replace할 때 나의 main을 주면 됨..

외부라이브러리

내일이어서..