타임리프(Thymeleaf)
1. 설정
- thymeleaf-spring6
- implementation 'org.thymeleaf:thymeleaf:3.1.2.RELEASE'
- thymeleaf - java8time // JDK8 Date & TIME API -> #temporals : 형식화
- implementation 'org.thymeleaf.extras:thymeleaf-extras-java8time:3.0.4.RELEASE'
- thymeleaf layout :레이아웃 기능
- implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.3.0'
예시)
ㄴ 여기 이미 있어서 인에이블 안해도 됨
ㄴ 설정클래스 정의
예시) 조인
ㄴ 이 파일 그대로 열어도
ㄴ 내추럴하다 = 원본 파일 유지하면서 번역해주는 기술
ㄴ 기존 디자인 파일 그대로 유지하면서 번역해줌
ㄴ jsp 방식
ㄴ 내추럴 하지 않음
ㄴ 서버쪽은 번역되겠지만
ㄴ 원래있던 템플릿 유지 되지 않음
ㄴ 번역할 때 교체
ㄴ 앞에th속성 인것은 번역 = 원 데이터를 바구지 않고 속성적용
ㄴ 서버가 준게 아니라 디자이너가 준거
ㄴ 디자이너가 준 파일
ㄴ 내추럴 템플릿 : 디자이너가 준 파일 그대로 유지하면서 (=출력결과물을 유지하면서) 번역해주는 기술
ㄴ 기존 틀 유지 안됨
이메일 문구 안보임
ㄴ jsp는 기존꺼를 지워야함
ㄴ 기존꺼
ㄴ 기존틀을 바꾸게 됨 jsp는
ㄴ 애는 이메일 문구 유지
ㄴ 속성은 출력되는게 아니라 번역할 때 문구 교체
ㄴ 속성 교체 시점 = 서버가 번역할 때 = 서버가 템플릿 로딩할 때
ㄴ 속성을 사용하는 이유가 기존틀을 유지하기 위해
예시)
예시)
ㄴ jsp : 서블릿으로 번역
ㄴ 내츄럴템플릿 : 출력버퍼에 담기는 방식으로 템플릿으로 번역
참고)
2. 특징
- Natural Template
- 원래 HTML과 서버사이드 렌더링 결과 거의 동일하게 보이는 효과
- 번역 기술
- 캐시 기능 제공
타임리프 기본문법
1. 타임리프의 주요 식(expression)
1) 변수 식 : ${식...}
- ${변수, 연산...}
참고) 네임스페이스에 지정한게 번역의 기준
ㄴ th없으면 번역 안해줌
2) 메세지 식 : #{메세지 코드}
- #{메세지코드}
참고)
fmt:setBundle
<fmt:message key="메세지 코드">
예시) 메세지 식 : #{메세지 코드}
ㄴ 애내들 메세지 코드로 변경할거임
3) 링크 식 : @{링크}
- 컨텍스트 경로 추가
- URL 변수 식, 요청 파라미터 쉽게 추가
- @{주소}
참고)
<c:url value="...." />
예시)
ㄴ 이렇게 같은 속성이면 교체
ㄴ 없는 속성이면 앞에 th빼고 속성이 추가됨
ㄴ 추가되어 있는 모습
ㄴ thblock 안에 있어야 th 오브젝트가 반영이 됨
ㄴ 밖에 있으니 값이 없는 모습
ㄴ 이런식으로 th block안이 아니면 속성명 풀로 써주기
ㄴ 교체가 되어 있는 모습
ㄴ 한글도 인코딩 되어있는 모습
예시)
ㄴ {} : 치환될 수 있는 부분
ㄴ () 안에 항목명 명시해주면 됨
ㄴ ()는 쿼리스트링 값
ㄴ ㅁ안에 있는 이름을 가지고 명칭을 찾은 다음 *{email}로 값을 넣어줌(교체)
ㄴ 교체가 되어있는 모습
예시2)
4) 선택 변수식
- th:object="${객체}"
- *{속성명}
th:block 태그
-> 번역되면 삭제
-> 기능만 필요한 경우
예시)
ㄴ 번열되 때 있어도 대체
ㄴ 번열되 때 없어도 값이 넣어짐
예시) 선택 변수식
ㄴ 반복되는거 비효율적이지 않닝
예시) th:block 태그 - 커맨듣객체에 많이 사용
ㄴ div태그 안쓰고 싶은데
ㄴ 이렇게 하면됨
2. 타임리프 식 객체
- #ctx
- #ctx
- .response
- #ctx
ㄴ 원하는 기능이 타입리프(식객체)에 없을 때 내가 개발한 기능 적용 시 빈으로 등록하면 사용가능
ㄴ 일반소스에 적용하고 있는 메서드도 템플릿쪽에 연동 가능
예시)
빈의 이름 : 클래스이름, 수동등록빈은 메서드의 이름
ㄴ 이 기능 이미 타임리프에 있지만 보여주기 위해 만든거
예시2)
1) #strings
#strings.concat('(', email, ')'): 문자열 결합
예시)
ㄴ + : 로도 문자열 결합 가능하지만 가끔 오류 뜰 때 있음
2) #numbers
#numbers.formatInteger(100000000000, 3, 'COMMA')${#numbers.sequence(1, 10)${#numbers.sequence(1, 10, 2)
예시) #numbers.formatInteger(100000000000, 3, 'COMMA')
예시) ${#numbers.sequence(1, 10) : 1씩 증가하면서 출력
예시) ${#numbers.sequence(1, 10, 2) : 2씩 증가 (매개변수 3번째)
3) #dates, #calendars, #temporals : (java 8, java.time 패키지)
#temporals.format(regDt, 'yyyy.MM.dd HH:mm'): 날짜 형식 지정
예시) #temporals.format(regDt, 'yyyy.MM.dd HH:mm')
4) #lists, #sets, #maps
-> 내장 식객체에 없는 기능? 스프링 빈으로 생성
${@빈이름.메서드명(...)}
3. th:text
- 문자열 출력 (문자열만!! - HTML 태그는 해석 X)
- th:utext - HTML 태그도 해석 O
- 기본 : 속성을 통해서 번역
- [[${.. }]] : 태그 안쪽에서도 출력 / 문자열만 인식, HTML 태그는 해석 X
예시)
ㄴ html 해석 못한 모습
ㄴ 문자열 그대로 나옴
예시) th:utext - HTML 태그도 해석 O
ㄴ html 해석이 된 모습
4. th:each
-
반복문
- ex) 게시글 목록...
- <c:forEach ... varStatus="status">
-
status
- index : 0부터 시작하는 순서 번호
- count : 1부터 시작하는 순서 번호
- first : 첫번째 행 여부
- last : 마지막 행 여부
- even : 짝수 행 여부
- odd : 홀수 행 여부
예시)
예시) status.count : 1부터 시작하는 순서 번호
예시) status.first : 첫번째 행 여부, status.last : 마지막 행 여부 , status.even : 짝수 행 여부
ㄴ status는 *는 사용 못함
ㄴ th object는 한개밖에 못쓴다
5. th:if, th:unless
th:if: 조건식th:if="${....}": 조건식이 참일 때 노출
th:unless="${...}": 조건식이 false -> 노출, true -> 노출 X- true, false -> 상수로 바로 인식
예시) th:if="${....}" : 조건식이 참일 때 노출, th:unless="${...}" : 조건식이 false -> 노출
ㄴ 참일 때만 번역이되고 출력이 됨
ㄴ th:if="${....}" : 조건식이 참일 때 노출
ㄴ th:if="${....}" : 조건식이 참일 때 노출
ㄴ th:unless="${...}" : 조건식이 false -> 노출
예시)
6. th:switch, th:case
- 노출여부 결정
7. th:href
- th:src
- th:action
8. th:object
9. th:classappend
- 클래스를 조건에 따라 추가 제거 하는 문법
th:classappend="${조건식 ? '참일때 추가될 클래스명':'거짓일 때 추가될 클래스명'}"
th:classappend="${조건식}? '참일때' : '거짓일때'"
예시)
참고)
스프링 MVC 폼과 에러 메시지 연동
1. #fields.errors(..)
- 특정 필드에 한정한 오류 출력(email, password...)
- 커맨드 객체에 있는 애노테이션 검증(@NotBlank...)
- Errors::rejectValue("필드명", "에러코드")
- 다만 global 필드이면 Global Error 출력
참고)
#이 붙어 있는 경우 -> 식 객체 (내장 객체)
<form:errors path="..." />
ㄴ 양식에 항상 넣어주어야 함
ㄴ th 밸루 안됨
예시)
예시)
ㄴ 에러메세지를 반복해서 가져오면 err에 배열 형태로 담기고
ㄴ th:text = "${err}" 에서 출력
예시)
2. #fields.globalErrors(..)
- Global Error 출력 용도
- Errors::reject("에러코드")
예시)
ㄴ 글로벌 에러
ㄴ 2가지 방식으로 글로벌에러메세지 가져 올 수 있음
바로쓸수 있는 식객체(내장객체)
ㄴ 맵형태
ㄴ 맵형태
ㄴ 맵형태
ㄴ # 앞에 붙어있으면 : 원래 객체 그 자체 -> 이때는 메서드 사용가능
ㄴ # 앞에 붙어있지 않으면 : 속성만 갖고 있는 맵형태의 객체 = 데이터만 들어가 있다
ㄴ 페이지 콘텍스트 객체는 존재하지 않음 -> jsp에만 존재
ㄴ 문자열을 쪼개서 배열로...등등
ㄴ 변환작업 : 배열이다 -> 리스트로 바꿈 맵이다 -> 리스트로 바꿈? 맞나?
ㄴ 문자열 가공할 때 사용
ㄴ 문자열을 재귀적으로 확인하면서 비어있는게 있는지 체크?
ㄴ 재귀적으로 값이 없으면 기본값을 넣어준다
ㄴ 배열, 리스트, 셋 형태로 바꿔주기
ㄴ 캐피털라이즈 : 앞자만 대문자로 바꾸기
ㄴ 문자열을 엔티티로...?
타임리프 페이지 레이아웃
- th:replace : 템플릿 파일 치환
- th:fragment
예시) 헤더, 푸터.hmtl
ㄴ 보통 사이트 헤더와 푸터는 고정
ㄴ 헤더와 푸터 정의할거임
ㄴ 헤더 정의
ㄴ th:fragment
ㄴ 저 이름을 가지고 찾아서 교체
ㄴ th:fragment : 여러개도 정의 가능 다만 이름을 달리해서
ㄴ 이만큼이 공통
ㄴ 내용부분 저기 코드 한줄
ㄴ jsp 두 바디랑 비슷하게
ㄴ 매변 공통으로 고정될 수 있는 부분이면 레이아웃을 구성하자
ㄴ 공통적인 부분 레이아웃을 통해 고정할거임
ㄴ 네임스페이스 2가지 추가
ㄴ 공통적인 css, js 추가함
ㄴ 헤더에 있는 부분 교체
ㄴ 내용 교체는 애가 함...?
예시) 냐용 치환
ㄴ 내용치환 기능 = jsp 두바디와 비슷한거
ㄴ 메인부분만 공통이아니고 나머지는 공통임
ㄴ 애랑 동일하게 이름하면 내용이 치환됨
ㄴ 레이아웃프래그먼트 내용영역을 잡아준다...?
예시) 포켓몬 도감
ㄴ jsp 두바디 : 치환되는 부분
ㄴ 특정페이지에 마다 다른 css, js 적용
-> 속성을 이용해서 추가함
-> addCss, addScript
ㄴ 확장자는 고정함
예시) 타임리프
ㄴ 경로 고정할거임
예시) 컨트러롤러에 추가
ㄴ 자동으로 추가되게끔 만듬
ㄴ 특정 페이지마다 적용되는 css, js 추가함
ㄴ 레이아웃에 연동안해도 헤드가 그대로 노출된 모습
ㄴ 레이아웃 적용하러 가자
ㄴ 네임스페이스 추가함
ㄴ 바디쪽 지우고 메인쪽 프레그먼트로 교체될 수 있게 할거임
ㄴ 바디쪽 지우고 메인쪽 프레그먼트로 교체될 수 있게 할거임
ㄴ css랑 js 적용된 모습
참고)
ㄴ 버전
ㄴ 브라우저캐시때문에 나는 디자인이 바꼈는데 고객 컴퓨터에서는 디자인이 바뀌지 않음
예시) 포켓몬 도감
ㄴ 레이아웃마다 다르게 공통적인 부분이 있음
ㄴ 메인페이지에서 애내들을 정의할 수 있나??
ㄴ 메인의 인덱스.jsp
ㄴ 모델로 정의가능할까?
ㄴ 메인은 보통 컨트롤러 없는경우가 많음
= 모델이 없네
-> 정의못함
ㄴ 모델정의가 안됨
ㄴ 이때는 add css, add js 정의 안됨
ㄴ 특정 css, js정의 해야하는 경우가 있지 않나
ㄴ 물론 인터셉터 이런거로 가능하긴 하지만 그건 너무 복잡함
ㄴ 애내 모델을 통해 이엘속성통해 추가한거임
ㄴ 모델은 컨트롤러의 메소드 통해 추가하는거
ㄴ dd css, add js
ㄴ 애처럼 내용치환하는곳에 추가하는 방식으로 컨트롤러 없이도 특정 css, js 적용하기
ㄴ 레이아웃 프래그먼트에 영역 추가하면 됨
예시) 컨트롤렁 없이 특정 css, js 적용하기
ㄴ 내용치환방식으로 컨트롤러 없는 html에 특정 페이지에만 필요한 css,js 레이아웃 적용하기
ㄴ 레이아웃쪽에 내용치환영역 더 잡아주면된다
ㄴ 모델통해 속성추가방식 못해서
예시) 포켓몬 도감_아이프레임
ㄴ 페이지 넘어가는 것 보단 + 스크립트 얼럴트 창 띄우는것 보단
ㄴ 한페이지 내에서 처리하는게 좋지 않닝
ㄴ 그거 적용한거
예시) 아이프레임
