Notice
Recent Posts
Recent Comments
Link
250x250
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Git clone
- fontawesome
- 의존성문제
- 플러그인
- npm start
- minwidth
- vscode git clone
- XEIcon
- 단어단위로떨어지기
- googleicon
- maxwidth
- node 오류
- legacy-peer
- 그누보드반응형
- owlcarousel
- window 정책변경
- package.json
- 웹아이콘
- MediaQuery
- 글자들여쓰기
- npm install 문제
- react npm install
- 정적객체
- 아이콘사용법
- 동적객체
- 이미지반응형
- node설치
- git lab clone
- npm install
- slickslider
Archives
- Today
- Total
어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ
🟩 [Thymeleaf] 타임리프란? 본문
728x90
📌 타임리프란?
- 서버 사이드 템플릿 엔진으로, Java 웹 애플리케이션에서 주로 HTML, XML, JavaScript, 텍스트 파일 등을 동적으로 생성할 때 사용되는 라이브러리
- 주로 Spring Framework와 함께 많이 사용
📌 특징
- 서버 사이드 템플릿 엔진
- 클라이언트에게 HTML을 전달하기 전에 서버에서 템플릿을 처리하고, 데이터를 동적으로 주입한 후 완성된 HTML을 클라이언트에 전달함.
- HTML5 호환
- 타임리프는 HTML5를 완벽하게 지원하며, 템플릿 파일을 HTML 파일로 작성할 수 있어서 브라우저에서 바로 열어도 정적 페이지처럼 동작해.
- 표현식 언어(Thymeleaf Expression Language)
- 타임리프는 **th:text, th:if, th:each**와 같은 속성(attribute)을 통해 서버 데이터를 동적으로 삽입하고 조건부 로직, 반복 등을 처리할 수 있음.
- HTML 템플릿을 그대로 사용할 수 있음
- 타임리프는 템플릿 파일을 HTML로 그대로 사용하면서, 템플릿 내부에서 동적 컨텐츠를 삽입하거나 처리할 수 있어.
- 서버 사이드 렌더링을 하면서도, 브라우저에서 바로 테스트해볼 수 있기 때문에 디자인과 개발을 병행할 때 편리해.
- 데이터 바인딩
- 변수, 객체, 리스트 등 다양한 데이터를 HTML 템플릿에 동적으로 바인딩하여 보여줄 수 있어.
- 예를 들어, th:text, th:src, **th:href**와 같은 속성을 사용하여 데이터를 템플릿 내에서 사용할 수 있음.
📌 타임리프의 장점
- 빠르고 효율적: 타임리프는 성능이 좋고, HTML을 작성할 때 쉽게 오류를 방지할 수 있는 구조.
- 스프링과의 통합: Spring Boot와 완벽하게 통합되어, Model에 데이터를 바인딩하여 쉽게 사용할 수 있음.
- 기능이 풍부: 조건문, 반복문, 텍스트/속성 바인딩 외에도 URL 처리, 파일 처리, 인라인 스크립트 등 다양한 기능을 제공.
- 디버깅: 서버 사이드에서 렌더링하면서도 HTML로 결과를 바로 볼 수 있어 디버깅에 용이함.
📌 타임리프 사용 예시
- 웹 페이지에서 동적으로 데이터를 삽입할 때
로그인, 회원 가입, 게시판 등에서 데이터를 서버에서 처리한 후 HTML로 뷰를 제공할 때. - 다국어 지원 (i18n)
메시지 리소스(messages.properties)를 이용하여 다국어 텍스트를 관리할 수 있어, 다양한 언어로 페이지를 제공하는데 유용.
- 타임리프는 Java 기반의 서버 사이드 템플릿 엔진으로, HTML을 동적으로 생성하고 Spring과의 통합에 강점을 가진 라이브러리
- React, Angular, Vue와 같은 프론트엔드 라이브러리와는 달리, 서버에서 렌더링된 HTML을 클라이언트에게 전달하는 방식으로 동작한다는 점에서 다르다!
✅ 예시코드 ✅
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>타임리프 예시</title>
</head>
<body>
<h1 th:text="'안녕하세요, ' + ${user.name} + '!'">사용자 이름</h1>
<p th:text="'나이는 ' + ${user.age} + '세입니다.'">나이</p>
<ul>
<li th:each="item : ${items}" th:text="${item}">목록 항목</li>
</ul>
</body>
</html>
- th:text: 변수를 텍스트로 출력하는 속성.
- ${user.name}: 서버에서 전달된 user 객체의 name 프로퍼티 값.
- th:each: 반복문으로, items 리스트를 순회하여 각 항목을 출력.
java
public class User {
private String name;
private int age;
// 기본 생성자
public User(String name, int age) {
this.name = name;
this.age = age;
}
// getter 메서드
public String getName() {
return name;
}
public int getAge() {
return age;
}
// setter 메서드 (필요한 경우)
public void setName(String name) {
this.name = name;
}
public void setAge(int age) {
this.age = age;
}
}
@Controller
public class UserController {
@GetMapping("/welcome")
public String welcome(Model model) {
// 1. User 객체 생성
User user = new User("홍길동", 30);
// 2. 아이템 리스트 생성
List<String> items = Arrays.asList("아이템1", "아이템2", "아이템3");
// 3. 모델에 데이터 추가
model.addAttribute("user", user); // user 객체를 모델에 추가
model.addAttribute("items", items); // items 리스트를 모델에 추가
// 4. Thymeleaf 템플릿으로 데이터 전달
return "welcome"; // "welcome.html" 템플릿을 렌더링
}
}
- **user.name**이 "홍길동"일 경우, 출력은 안녕하세요, 홍길동!
- **user.age**가 30일 경우, 출력은 나이는 30세입니다.
- items 리스트를 순회하며 출력.
728x90
'개발 > 🟩 Spring, Spring Boot' 카테고리의 다른 글
| Thymeleaf 다국어 th:utext 사용 예제 (0) | 2025.12.30 |
|---|---|
| 주석 안 보이게 하기 (0) | 2025.11.05 |
| 🟩 [Thymeleaf] 자주 쓰는 문법 (6) | 2025.03.07 |
| 🟩 [Thymeleaf] #{} 구문 (0) | 2025.03.07 |
Comments
