코딩공부

앞서 언급한 개념을 레이아웃 H1 레이아웃 컨텐츠 레이아웃 푸터 /resources/templates/template/layoutExtend/layoutExtendMain.html 메인 페이지 컨텐츠 메인 페이지 포함 내용 결과 레이아웃 H1 메인 페이지 컨텐츠 메인 페이지 포함 내용 레이아웃 푸터 layoutExtendMain에는 파라미터를 section으로 넘겼는데 layoutFile에서는 파라미터를 content로 받아서 사용 layoutFile.html 을 보면 기본 레이아웃을 가지고 있는데, 에 th:fragment 속성이 정의되어 있다. 이 레이아웃 파일을 기본으로 하고 여기에 필요한 내용을 전달해서 부분부분 변경하는 것으로 이해하면 된다. layoutExtendMain.html 는 현재 페이..

이전에는 일부 코드 조각을 가져와서 사용했다면 이번에는 더 확장해서 코드 조각을 레이아웃에 넘겨서 사용하는 방법 예를 들어 /resources/templates/template/layout/layoutMain.html 메인 컨텐츠 결과 메인 컨텐츠 common_header(~{::title},~{::link}) 이 부분이 핵심이다. ::title 은 현재 페이지의 title 태그들을 전달한다. -> layoutMain.html 의 title 태그들 ::link 는 현재 페이지의 link 태그들을 전달한다. -> layoutMain.html 의 link 태그들 결과 - 메인 타이틀이 전달한 부분으로 교체 - 공통 부분은 그대로 유지되고, 추가 부분에 전달한 들이 포함된 것을 확인 레이아웃 개념을 두고, 그..

상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 공통 영역을 관리 용이하게 처리 지원 package hello.thymeleaf.basic; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping("/template") public class TemplateController { @GetMapping("/fragment") public String template() { retu..

자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공 결과 //-----------------------자바스크립트 인라인 사용 전----------------------- //-----------------------자바스크립트 인라인 사용 후----------------------- 자바스크립트 인라인을 사용하지 않았을 경우의 문제점 1) 텍스트 렌더링 - var username = [[${user.username}]]; - 인라인 사용 전 -> var username= userA; - 인라인 사용 후 -> var username= "userA"; [인라인 사용 전] 타임리프 입장에서는 정확하게 렌더링 한 것이지만 아마 개발자가 기대한 것은 다음과 같은 "userA"라는..

은 HTML 태그가 아닌 타임리프의 유일한 자체 태그 보통 Thymeleaf는 속성으로 동작을 하지 태그로 동작하지 않는다. @GetMapping("/block") public String block(Model model) { addUsers(model); return "basic/block"; } 사용자 이름1 사용자 나이1 요약 사용자 이름1 userA 사용자 나이1 10 요약 userA / 10 사용자 이름1 userB 사용자 나이1 20 요약 userB / 20 사용자 이름1 userC 사용자 나이1 30 요약 userC / 30 HTML 태그안에 속성으로 기능을 정의해서 사용하는데, 위 예처럼 이렇게 사용하기 애매한 경우에 사용하면 된다. 은 렌더링시 제거됨. 두개의 div를 같이 돌리고 싶을경..

@GetMapping("/comments") public String comments(Model model) { model.addAttribute("data", "Spring!"); return "basic/comments"; } 예시 html data 1. 표준 HTML 주석 2. 타임리프 파서 주석 html data 3. 타임리프 프로토타입 주석 결과 예시 Spring! 1. 표준 HTML 주석 2. 타임리프 파서 주석 3. 타임리프 프로토타입 주석 Spring! 1. 표준 HTML 주석 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다. 2. 타임리프 파서 주석 타임리프 파서 주석은 타임리프의 진짜 주석이다. 렌더링에서 주석 부분을 제거한다. 3. 타임리프 프로토타입..

조건부 평가 타임리프의 조건식 if , unless ( if 의 반대) @GetMapping("/condition") public String condition(Model model) { addUsers(model); return "basic/condition"; } if, unless count username age 1 username 0 switch count username age 1 username 10살 20살 기타 if, unless count username age 1 userA 10 미성년자 미성년자 2 userB 20 3 userC 30 switch count username age 1 userA 10살 2 userB 20살 3 userC 기타 if, unless 타임리프는 해당 조건이..

타임리프에서 반복은 th:each 를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원 @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); } 기본 테이블 username age username 0 반복 상태 유지 coun..

타임리프 태그 속성(Attribute) 타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다. th:* 로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다. @GetMapping("/attribute") public String attribute() { return "basic/attribute"; } 속성 설정 속성 추가 - th:attrappend = - th:attrprepend = - th:classappend = checked 처리 - checked o - checked x - checked=false 속성 설정 속성 추가 - th:attrappend = - th:attrprepend = - th:classappend = checkd 처리 - chec..

HTML안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의 @GetMapping("/operation") public String operation(Model model) { model.addAttribute("nullData", null); model.addAttribute("data", "Spring!"); return "basic/operation"; } 산술 연산 10 + 2 = 10 % 2 == 0 = 비교 연산 1 > 10 = 1 gt 10 = 1 >= 10 = 1 ge 10 = 1 == 10 = 1 != 10 = 조건식 (10 % 2 == 0)? '짝수':'홀수' = Elvis 연산자 ${data}?: '데이터가 없습니다.' = ${nullData}?: '데이터가 없습니다.' = ..