1. 콘텐츠 출력과 자바스크립트 인라인 처리 (m5.html)
-
텍스트 출력 (Escaped vs Unescaped)
-
th:text: 기본 텍스트 출력. HTML 태그가 포함되어 있어도 단순 문자열로 처리 (보안상 안전)
-
th:utext: Unescaped Text. 문자열 안의 HTML 태그(,
등)를 실제 태그로 렌더링
-
-
인라인 출력 문법
-
태그 속성이 아닌 태그 내부에서 직접 값을 출력할 때 사용
-
[[${...}]]: th:text와 동일한 역할 -
[(${...})]: th:utext와 동일한 역할
-
-
자바스크립트 인라인 (th:inline="javascript")
-
자바스크립트 블록 내에서 서버(Model)에서 넘어온 데이터를 사용할 때 강력한 기능
-
객체(DTO)나 리스트(List)를 자동으로 JSON 형태로 직렬화해주어 별도의 파싱 없이 JS 객체/배열처럼 바로 순회 및 접근 가능
-
2. 데이터 포맷팅 기능 (m6.html)
-
숫자 포맷팅 (#numbers)
-
#numbers.formatInteger(num, 0, 'COMMA'): 정수에 천 단위 콤마 삽입 (예: 1,234,567) -
#numbers.formatDecimal(num, 0, 2): 소수점 이하 자릿수 고정 및 지정
-
-
날짜 포맷팅 (#dates)
-
Calendar 또는 Date 객체 처리
-
#dates.year(now), #dates.month(now): 특정 연도, 월 등 개별 단위 추출 -
#dates.format(now, 'yyyy-MM-dd hh:mm:ss'): 원하는 날짜 포맷 문자열로 전체 변환 출력
-
3. 다국어 및 스프링 메시지 처리 (m7.html)
-
메시지 표현식 (#{...})
-
messages.properties에 정의된 텍스트 상수를 불러와 다국어(i18n) 지원 및 하드코딩 방지
-
#{item.name}: 브라우저 언어 설정에 따라 '마우스'(한국어) 또는 'Mouse'(영어) 자동 출력
-
-
파라미터 전달
-
메시지 파일 내 {0}, {1} 등 플레이스홀더에 동적으로 값 주입
-
예시:
<li th:text="#{item.desc(#{item.name}, #{item.color})}">
-
4. 링크와 URL 처리 (m8.html)
-
링크 표현식 (@{...})
- 웹 애플리케이션의 컨텍스트 경로(Context Path)를 자동으로 포함하여 URL 생성
-
쿼리 스트링 (Query String) 자동 생성
@{/list.do(seq=${seq}, mode=${mode})}➔ /list.do?seq=10&mode=add
-
경로 변수 (Path Variable)
-
REST API 스타일의 URL 생성
-
@{/board/{seq}(seq=${seq})}➔ /board/10
-
-
리터럴 치환 (|...|)
-
문자열과 변수를 + 연산자 없이 하나의 문자열로 깔끔하게 결합
-
예시:
<div th:text="|${seq}는 양수입니다.|"></div>
-
5. 제어문과 반복문 (m9.html)
-
조건문 (th:if / th:unless)
-
th:if: 조건이 참(True)일 때만 태그 렌더링
-
th:unless: 조건이 거짓(False)일 때만 태그 렌더링 (if의 반대)
-
-
선택문 (th:switch / th:case)
- 변수 값에 따른 다중 분기 처리 (th:case="*"는 default 역할)
-
반복문 (th:each)
-
컬렉션(List, Map 등)을 순회하며 태그를 반복 생성
-
예시:
<tr th:each="dto: ${list}">
-
-
객체 선택 (
th:object / *{...})- 반복문 등에서 특정 객체를 미리 지정(th:object)하여, 하위 태그에서는 객체명 없이 필드명(*{name})만으로 짧게 접근
-
가상 태그 (
<th:block>)- HTML 렌더링 후 흔적을 남기지 않고 타임리프의 제어문(if, each 등)만 실행하고 싶을 때 사용하는 전용 블록 태그
6. 조각 페이지 및 모듈화 (m10.html)
-
공통 레이아웃 분리 (Fragment)
- 헤더, 푸터 등 반복되는 코드를 sub1.html 같은 별도 파일로 관리하여 재사용
-
삽입 방식 (th:insert vs th:replace)
-
th:insert: 현재 호출한 태그의 내부(자식)에 조각을 삽입
-
th:replace: 현재 호출한 태그 자체를 조각 내용으로 교체 (덮어쓰기)
-
-
파라미터 전달 조각
-
조각 페이지 호출 시 함수처럼 인자값을 전달하여 동적 렌더링 구현
-
예시:
<div th:replace="~{inc/sub2.html :: title('게시판', '수정하기')}"></div>
-
