[스프링부트] Thymeleaf - classappend와 fragment

 

 

먼저, 타임리프를 사용하기전에

 

SpringBoot 의 템플릿 엔진으로 Thymeleaf를 사용하면서 개발을 하면서

VSCode와 인텔리제이 IDE 와 동기화하여 html파일을 손쉽게 수정할 수있다.

 

 

인텔리제이 + VSCode를 통해 View 동기화하기

 

먼저, Thymeleaf html 파일들이 위치한 프로젝트의 resources 경로를 VSCode의 작업폴더로 설정한다.

resources

 

 

VSCode에서 인텔리제이의 프로젝트 하위 폴더인 resources를 작업영역 폴더로 사용하므로 

해당 폴더내에 새로운 html파일을 만들거나, 기존의 thymeleaf 파일을 수정하면 인텔리제이에 동시에 반영이 되고,

View만 수정하고싶다면, VSCode의 기능들을 모두 사용하여 개발 할수있다.

 

Thymeleaf 기능1 : 공통영역 삽입 - fragment

 

View에서 레이아웃을 구성하다보면 header,main,footer등 공통된 영역에 반복적인 코드가 작성될때,

th:fragment 를 통해 공통영역을 분리하여, 따로 보관한뒤 다른 html에 삽입해줄수있다.

 

 

위의 <nav> 태그를 공통영역으로 지정하기위해 따로 common.html 파일을 만들어, <th:fragment="menu">를 통해

menu라는 이름의 fragment로 지정해주었다.

menu옆의 괄호는 변수를 할당해주기위한 문법으로 다음 기능에 나올 th:classappend를 위해 설정해주었다.

 

 

그리고, 공통영역을 삽입하고싶은 html에 다음의 < th:replace="~{해당 fragment의 경로 :: fragment명}> 를 입력해주면

fragments/common 경로에 있는 <th:fragment =menu>가 삽입된다.

 

 

Thymeleaf 기능2 클래스명 동적 추가 - th:classappend

 

부트스트랩과 같은 프론트 툴을 사용하면 클래스 명을 통해 다양한 css설정을 줄수있다.

타임리프의 classappend 기능은 클래스명을 append 해주는데, 이러한 classappend와 동적변수를 삼항연산자 조건문을 통해 특정 조건일때, 클래스명을 다르게 줄수있다.

 

 

부트스트랩의 nav-link 클래스에서 Active를 붙이면 해당 영역에 css효과가 추가된다. 이러한 효과를

홈 이면 홈 태그에 active를, 게시판 이면 게시판 태그에 active를 주기위해

th:classappend= ${v_menu}=='home' ? 'active'를 통해 v_menu라는 변수가 home이면 active를 클래스에 덧붙인다.

그리고, v_menu라는 변수는 위의 th:fragment=에서 menu에 할당되므로,

해당 fragment를 삽입하는 쪽에서 menu가 home인지, board인지 변수처리를 해주면 해당하는 클래스에 active가 classappend 된다.