Etc/Thymeleaf16 Thymeleaf - 템플릿 레이아웃(2) Thymeleaf - 템플릿 레이아웃 에서 이어지는 내용 입니다. 이전 포스팅에서 다룬 개념을 레이아웃 H1 레이아웃 컨텐츠 레이아웃 푸터 template/layoutExtend/layoutExtendMain.html 메인 페이지 컨텐츠 메인 페이지 포함 내용 코드 실행 결과 정리 layoutFile.html 을 보면 기본 레이아웃을 가지고 있는데, 에 th:fragment 속성이 정의되어 있다. 이 레이아웃 파일을 기본으로 하고 여기에 필요한 내용을 전달해서 부분부분 변경하는 것으로 이해하면 된다. layoutExtendMain.html 는 현재 페이지인데, 자체를 th:replace 를 사용해서 변경하는 것을 확인할 수 있다. 결론적으로 layoutFile.html 에 필요한 내용을 전달하면서 자체를.. 2023. 7. 25. Thymeleaf - 템플릿 레이아웃 템플릿 레이아웃 이전에는 일부 코드 조각을 가지고와서 사용했다면, 이번에는 개념을 더 확장해서 코드 조각을 레이아웃에 넘겨서 사용하는 방법에 대해서 알아보자. 예를 들어서 template/layout/layoutMain.html 메인 컨텐츠 코드 실행 결과 common_header(~{::title},~{::link}) 이 부분이 핵심이다. ::title 은 현재 페이지의 title 태그들을 전달한다. ::link 는 현재 페이지의 link 태그들을 전달한다. 결과 메인 타이틀이 전달한 부분으로 교체되었다. 공통 부분은 그대로 유지되고, 추가 부분에 전달한 들이 포함된 것을 확인할 수 있다. 이 방식은 사실 앞서 배운 코드 조각을 조금 더 적극적으로 사용하는 방식이다. 쉽게 이야기해서 레이아웃 개념을 두.. 2023. 7. 25. Thymeleaf - 템플릿 조각 웹 페이지를 개발할 때는 공통 영역이 많이 있다. 예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 영역들이 있다. 이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율 적이다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다. TemplateController import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; @Controller @Reque.. 2023. 7. 25. Thymeleaf - 자바스크립트 인라인 타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다. 자바스크립트 인라인 기능은 다음과 같이 적용하면 된다. 코드 실행 결과 자바스크립트 인라인을 사용하지 않은 경우 어떤 문제들이 있는지 알아보고, 인라인을 사용하면 해당 문제들이 어떻게 해결되는지 확인해보자. 텍스트 렌더링 var username = [[${user.username}]]; 인라인 사용 전 -> var username = userA; 인라인 사용 후 -> var username = "userA"; 인라인 사용 전 렌더링 결과를 보면 userA 라는 변수 이름이 그대로 남아있다. 타임리프 입장에서는 정확하게 렌더링 한 것이지만 아마 개발자가 기대한 것은 다음과 같은 "userA"라는 문자일 것이.. 2023. 7. 25. Thymeleaf - 블록 타임리프에서 제공하는 (블록 태그)는 HTML 태그가 아닌 타임리프의 유일한 자체 태그이다. 바로 코드로 살펴보자. BasicController @GetMapping("/block") public String block(Model model){ addUsers(model); return "basic/block"; } 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); } basic/block.html 사용.. 2023. 7. 25. Thymeleaf - 주석 HTML의 코드와 함께 동작하는 Thymeleaf에는 3가지 주석이 있다. 표준 HTML 주석 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다. 타임리프 파서 주석 타임리프 파서 주석은 타임리프의 진짜 주석이다. 렌더링에서 주석 부분을 제거한다. 타임리프 프로토타입 주석 타임리프 프로토타입은 약간 특이한데, HTML 주석에 약간의 구문을 더했다. HTML 파일을 웹 브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분이 웹 브라우저가 렌더링하지 않는다. 타임리프 렌더링을 거치면 이 부분이 정상 렌더링 된다. 쉽게 이야기해서 HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프를 렌더링 한 경우에만 보이는 기능이다. 아래의 코드의 예시를 참고하자. Basi.. 2023. 7. 25. 이전 1 2 3 다음
