게시판 서비스 만들기 - 게시판 뷰 기본 골격 작성

게시판 서비스 만들기 - 게시판 뷰 기본 골격 작성

resources/templates/articles/index.html

게시판 뷰의 기본 골격이 되는 index.html 입니다.

resource/templates/header.html

resource/templates/footer.html

여기까지 작성하면 일반 thymeleaf 문서입니다.

이 상태에서 index.html에 decoupled logic을 적용하기 위해 일반 html 태그로 다시 변경하고,

그리고 추가적으로 index.th.xml을 작성합니다.

resources/templates/articles/index.th.xml

이 코드에서는 <thlogic> 요소 안에 두 개의 <attr> 요소가 있습니다. 각 <attr> 요소는 HTML 요소의 속성을 정의하며, sel 속성은 선택자를 나타내고 th:replace 속성은 해당 선택자가 가리키는 요소를 다른 템플릿 파일로 대체하도록 지시합니다.

1. 첫 번째 <attr> 요소:

   • sel="#header": 이 선택자는 id가 “header”인 HTML 요소를 선택합니다.
   • th:replace="header :: header"**: 이 속성은 선택한 “header” 요소를 다른 템플릿 파일인 “header.html”의 “header” 섹션으로 대체하도록 지시합니다. “header.html”은 보통 Thymeleaf 템플릿의 일부이며, “header” 섹션은 위에서 정의하였습니다.

2. 두 번째 <attr> 요소:

   • sel="#footer" : 이 선택자는 id가 “footer”인 HTML 요소를 선택합니다.
   • th:replace="footer :: footer": 이 속성은 선택한 “footer” 요소를 다른 템플릿 파일인 “footer.html”의 “footer” 섹션으로 대체하도록 지시합니다. 마찬가지로 “footer.html” 파일은 Thymeleaf 템플릿의 일부이며, “footer” 섹션은 위에서 정의하였습니다.

이렇게 하면 페이지의 헤더와 푸터를 별도의 템플릿 파일에서 정의하고, 이를 템플릿을 렌더링하는 동안 해당 위치에 삽입할 수 있습니다. 이렇게 하면 코드의 재사용성이 높아지고 유지 보수가 쉬워집니다.

---

springboot 카테고리 내 다른 글 보러가기