현재 사이트는 html이 총 세개가 존재한다. 세개면 많은 수는 아니지만 html내에서 공통되는 영역이 상당하기 때문에 해당 영역을 수정하기위해서는 많은 공수가 들어간다. html개수가 많아질수록 일이 늘어나기때문에 ThymeLeaf가 제공하는
fragment 기술을 사용하여 공통영역을 따로 관리하자.
index.html, generic.html, elements.html에는 총 다섯가지의 공통영역이 존재한다.
- 페이지의 메타정보, css를 나타내기위한 header
- 로고와 메뉴버튼을 그리기 위한 header
- 메뉴목록을 그리기 위한 nav
- contact me를 위한 footer
- script를 include하기위한 footer -> javascript를 footer에 위치하면 html렌더링이 더 빠르다고 한다.
1.각각 용도에 맞는fragment.html을 생성한다.
다섯개를 만들었다. 하나의 html에 몰아넣고 써도 되겠지만 추후에 추가되면 지저분할것같아서 나눴다.
2.해당 html에 중복되는 영역을 추가한다. thymeleaf를 사용해야하기 때문에 <html>태그로 감싼다.
<head>태그 안에 th:fragment="fragment이름"으로 지정하면 해당 태그 하위가 하나의 fragment가 된다.
3.html에서 해당 fragment를 불러온다.
th:replace="~{fragment 경로 :: fragment이름}"으로 불러온다. replace를 사용하면 해당 태그를 fragment로 교체하고,
insert를 사용하면 해당 태그 하위에 fragment를 삽입한다.
※localhost:9090에 처음 들어오게 된다면 index.html이 표시된다. 하지만 이는 ViewResolver를 거치지 않고, html 그 체가 뿌려진 정적화면인데, 그렇다면 Thymeleaf를 사용할 수 없다. 그렇다면 아래와 같이 /(root)로 들어왔을시 index.html로Mapping을하는 Controller를 추가해 index.html도 ViewResolver를 거치게 한다. 그렇다면 Tyhmeleaf를 사용할 수 있다.
4.다른 html도 같은 작업을 실행한다. ※모두 ViewResolver를 거쳐야함으로 Controller에 각각 Mapping한다.
'프로젝트[종료]' 카테고리의 다른 글
| 10. JpaRepository<T, Id>인터페이스 상속받기 (0) | 2023.04.26 |
|---|---|
| 9. JPA를 사용하여 SpringBoot와 MariaDB연동하기 (0) | 2023.04.20 |
| 7. Spring Boot 메시지/국제화 기능 이용하기 (0) | 2023.04.17 |
| 6. DB 설계하기(MariaDB) (0) | 2023.04.17 |
| 5. IntelliJ와 GitHub연동하기 (2) | 2023.04.17 |