코드 그라데이션

타임리프 스프링 통합 타임리프는 크게 2가지 메뉴얼을 제공한다. 기본 메뉴얼 : https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html Tutorial: Using Thymeleaf 1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a www.th..

템플릿 레이아웃 02 템플릿 레이아웃 확장 01에서 정리한 개념을 레이아웃 H1 레이아웃 컨텐츠 레이아웃 푸터 /resources/templates/template/layoutExtend/layoutExtendMain.html 메인 페이지 컨텐츠 메인 페이지 포함 내용 실행 결과

템플릿 레이아웃 01 템플릿 레이아웃 이전에는 일부 코드 조각을 가지고와서 사용했다면, 이번에는 개념을 더 확장해서 코드 조각을 레이아웃에 넘겨서 사용하는 방법에 대해서 알아보자. 예를 들어서 Thymeleaf 템플릿에서 공통 헤더 부분을 정의하는 템플릿 프래그먼트다. 이 템플릿은 common_header라는 이름을 가지며, title과 links라는 두 개의 파라미터를 받는다. title 파라미터는 웹 페이지의 타이틀을 동적으로 설정한다. 이를 위해 태그를 사용. 공통 CSS 스타일 시트, favicon, JavaScript 스크립트는 모든 웹 페이지에서 공유되며, th:href와 th:src를 사용하여 경로를 지정한다. links 파라미터는 추가적인 링크를 동적으로 삽입한다. th:block과 th:..

템플릿 조각 웹 페이지를 개발할 때는 공통 영역이 많이 있다. 예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등 여러 페이지에서 함께 사용하는 영역들 이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율적 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다. /basic/TemplateController.java package inflearn.thymeleaf.basic; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.an..

자바스크립트 인라인 타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다. 자바스크립트 인라인 기능은 다음과 같이 적용하면 된다. 자바스크립트 인라인 사용 전 결과 자바스크립트 인라인 사용 후 결과 자바스크립트 인라인 사용 전 : 자바스크립트 코드 내에서 Thymeleaf 표현식을 사용하려면 주석 내에 변수 할당 및 표현식을 넣어야 한다. 이 경우, 내추럴 템플릿 주석을 사용하여 주석 처리된 부분에서도 주석 내부의 표현식을 활용할 수 있다. 자바스크립트 인라인 사용 후 : th:inline="javascript" 속성을 사용하여 자바스크립트 인라인 모드로 작성하면, Thymeleaf 표현식을 직접 사용할 수 있다. 이 모드에서는 주석 내부의 Thymeleaf ..

은 HTML 태그가 아닌 타임리프의 유일한 자체 태그다. BasicController에 추가 @GetMapping("/block") public String block(Model model) { addUsers(model); return "basic/block"; } /resources/templates/basic/block.html 사용자 이름1 사용자 나이1 요약 : Thymeleaf의 th:each 디렉티브를 사용하여 ${users} 변수의 사용자 목록을 반복. 각 사용자는 user 변수에 바인딩됩니다. : Thymeleaf의 th:text 속성을 사용하여 사용자의 이름을 출력. ${user.username}은 사용자의 이름을 나타내는 표현식이다. : 사용자의 나이를 출력하는 부분으로, ${user..

주석 BasicController 추가 @GetMapping("/comments") public String comments(Model model) { model.addAttribute("data", "Spring!"); return "basic/comments"; } /resources/templates/basic/comments.html 예시 html data 1. 표준 HTML 주석 2. 타임리프 파서 주석 html data 3. 타임리프 프로토타입 주석 1. 표준 HTML 주석 형식의 주석은 표준 HTML 주석으로, 주석 내부의 내용은 클라이언트에게 렌더링되지 않는다. ${data}의 Thymeleaf 표현식은 주석 처리되어 무시된다. 2. 타임리프 파서 주석 형식의 주석은 Thymeleaf 파서..

반복 - 타임리프에서 반복은 th:each 를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다. BasicController 추가 @GetMapping("/each") public String each(Model model) { addUsers(model); return "basic/each"; } private void addUsers(Model model) { List list = new ArrayList(); list.add(new User("userA", 10)); list.add(new User("userB", 20)); list.add(new User("userC", 30)); model.addAttribute("users", list); } /resources/templa..