06/14 Thymeleaf 타임리프
타임리프
타임리프는
디자인하는 영역의 작업에 영향을 주지 않으면서 데이터를 꽂아 넣어줌
jsp는 기존의 것을 지우고 코드블럭이나 jstl을 이용해서 써왔는데
-> 기존의 퍼블리셔가 사용했던 문서가 파괴 (협업할때 영향을 줄 수 있어)
static있는 쪽은 그냥 css나 이미지 같은거 넣고
메인의 web-inf가 메인 홈디렉토리
타일즈 설정 없앴다 -> 타임리프만 일단 쓸거임
기존에 있었던 'test 텍스트' 라는 거 지울 필요 없이 앞에다가
th:text="${data}"만 써주면 됨
원래 있던 컨텐츠는 손대지 않았고,,
타임리프만 넣어줬을 뿐인데 기존의 내용을 덮어쓰기 하는 식으로 잘 구현되고 있다
-jsp보다도 빠르다고 함
태그를 한번 출력해보자
태그 안먹었당 -> 컨텐츠로서 화면에 출력되는게 정상
-> 명령어로 인식되게 하고 싶다면?
text앞에 u 만 붙였다
h1 태그에 볼드포함이니까 언더라인으로 나오게 태그도 바꿈
$ -> 서버쪽에서 모델로 심은 것을 뽑아낼때 쓰는 거
Message - #
properties 라는 클래스의 부모는 Hashtable - 맵을 구현하는 클래스 중 하나
-> map과 똑같은 기능 구현하는 것
Map 컬렉션에 추가적으로 파일과 연관해서 읽어들일 수 있는 컬렉션
#을 쓰게 되면 외부파일에서 뽑아오게 된다 properties -> 이걸 특별하게 메시지라고 한다
$는 모델을 꺼내 쓰는 것
파일명과 폴더명 맘대로 해서 properties만들었는데 , 이걸 사용하려면 어디있는지 알려줘야 함
-> 설정하는 방법 (너무쉽다)
-> #보다는 $를 많이 쓰긴 할거임
$ - Variables
방식은 el을 쓸 때랑 동일하게 사용된다는 거
기본적인 표현식부터 속성값다루는거 레이아웃... 등등
주석처리 하고 나서 admin/notice/list 치고 들어가면 아래처럼 나옴
이부분 주석해주면 500오류 나오는게 정상
이거 복사해서 붙여넣기 하고 구조 바꿨다
다른것도 다 꽂아 넣어주니까
이렇게 바꼇당
-> 작성일 왜이러지?
이제 헤더 푸터 나누기
파일 통째로 갖다 붙이기
list 에 헤더푸터부분 붙여주기
절대표기 법임 루트에서 시작해서 ㄱ
/ 이거 안써주고 루트부터
타임리프에서는 ~ 물결표시를 꼭 써줘야 함 -> 경로라는 의미이다
@{ } - 일반적인 url , 링크
~{ } - fragment 가 포함될 때 사용
-> 한글 깨짐
헤더 푸터 다 이렇게 넣어줌
페이지 전체 긁어오는건 좀 문제가 생길 수 있으니까..(한글깨짐 / 해결한다고 해도 구도가 깨져버림)
selector나 fragment이름 지정해서 넣어주기
list 파일에 헤드부분이랑 메인남겨놈
레이아웃html 만들어서 원래 있던것들 넣어주고...
list.html 의 저 div 태그 부분을 layout의 바디로 대체한것
지금 현재 상태
메인이 사라져버리는 것
-> 우리가 원하는것은 메인영역을 살려서 헤더 푸터 붙이고 싶당
=> parameter로 넘기기 pragment를 줄 수 있다 / 매개변수를 이용한 pragment (남의걸가져오면서 내껄 꽂아주기)
-> main이라는 이름의 인자 하나 넘겨라! (이름 상관없음)
-> 그리고 아래에 메인부분에 꽂아 넣어줌 / 그 메인은 list에서 받아오자
여기에 layout 의 바디부분을 가져올 건데 지금 이 페이지에 있는 main을 넘겨줄게~
그러면 레이아웃에 메인이 들어가게 됨
-> 다른 페이지에서도 메인 이렇게 받아와서 레이아웃에 꽂아주면 되는 것 (외부라이브러리 쓸 필요없음)
* 다른 방법도 있음! - 더 직관적인 방법 (별도의 라이브러리 또 필요함)
-> 내일~