스프링 부트 Thymeleaf: fragment로 웹 페이지에 header, footer 삽입하는 방법입니다. 공통되는 부분을 미리 만들어 놓은 다음 재사용할 수 있습니다. 전체 소스 보기 프로젝트 구조 먼저 HTML 파일을 만든 뒤(fragments/common.html) 조각(fragment)로 만들고 싶은 요소의 태그에 th:fragment="[이름]" 을 삽입합니다. <head th:fragment=”html-head”> …….. </head> <div th:fragment=”header”> <nav class=”navbar navbar-expand-lg navbar-dark bg-dark mb-2″> 더보기…
Webjars는 스프링 부트에서 Bootstrap, JQuery 등의 프론트엔드 라이브러리를 스프링 프레임워크가 자체적으로 관리하도록 하는 방법 중 하나입니다. 예제로 부트스트랩과 JQuery를 추가하겠습니다. 1. webjars.org를 접속한 다음 Popular WebJars 에서 Build Tool: Maven을 선택합니다. 2. 사용하고자 하는 라이브러리의 <dependency/> 안의 내용을 복사한 다음 pom.xml의 <dependencies/> 태그 내에 추가합니다. <dependencies> … <!– webjars.org –> 더보기…
Thymeleaf 관련 글 보기 Thymeleaf에서 특정 요소를 for문처럼 반복하는 방법으로 th:each가 있습니다. <table> <thead> <tr> <th>No.</th> <th>username</th> <th>title</th> <th>date</th> </tr> </thead> <tbody> ……………….. </tbody> </table> <tbody> <tr th:each=”article, i: ${list}”> <td th:text=”${article.seq}”></td> <td th:text=”${article.username}”></td> <td sec:authorize=”isAuthenticated()”> <a th:href=”${‘/board/read/’ + article.seq}” th:text=”${article.title}”></a> <span class=”text-blue” th:if=”${i.count eq i.size}”>[1등]</span> </td> <td sec:authorize=”!isAuthenticated()” th:text=”${article.title}”></td> 더보기…
여기서 국제화는 홈페이지의 내용을 다국어로 지원하는 것을 뜻합니다. 예를 들어, https://www.navercorp.com/ 사이트를 보면 동일한 레이아웃과 동일한 내용을 한국어 또는 영어로 지원합니다. 이 곳 뿐만 아니라 많은 사이트에서 이런식의 다국어를 지원합니다. 만약 이것을 똑같은 HTML을 복사해서 내용만 바꾸겠다는 식으로 접근하면 홈페이지 제작이 굉장히 힘들겠죠? 처음부터 국제화를 의도하고 제작하는 것이 좋겠습니다. 0. src/main/resources 더보기…
소개 Thymeleaf는 Spring Boot에서 밀어주고 있는 View 템플릿 엔진입니다. 기존 View 템플릿들과의 차이점이라면 HTML 태그의 속성을 이용한 페이지 제작이 가능해서 Thymeleaf 문법으로 페이지를 만들면 서버의 도움 없이도 온전한 프로토타입의 HTML 페이지를 살펴볼 수 있다는 점이 장점이라고 합니다. 예를 들어, 기존의 JSTL을 이용한 JSP 페이지에서는 WAS가 구동되지 않으면 페이지를 온전히 표시할 방법은 없으나 더보기…