본문으로 바로가기
반응형

Spring boot 환경에서 뷰 리졸버로 thymeleaf를 사용하고 있다.

thymeleaf가 제공하는 layout 기능을 사용해 편리하게 메뉴바와 content가 들어갈 공간 등을 잘 잡아 놓았다.


[ thymeleaf layout 구성하기 : http://www.leafcats.com/9 ]


이 환경에서 새로 발견한 유용한 플러그인 테스트를 위해 연습용 페이지에서 스크립트를 작성해 보았는데, 아예 스크립트가 작동을 하지 않았다.

레이아웃의 템플릿을 잡아놓은 mainLayout.html 파일에서 작성한 스크립트는 정상적으로 동작 하는데, 정작 컨텐츠가 들어갈 html 페이지의 스크립트가 동작하지 않는 것이었다.


문제를 찾기 위해 스크립트 코드 위치를 body 안쪽에도 넣어 보고, header에도 넣어 봤지만 어떤 방법으로도 동작하지 않았다.

생각보다 thymeleaf에 대한 자료가 구글에도 별로 없어서 원인을 검색 하는데 상당한 시간이 걸렸다. 결국 이유를 알아냈는데, thymeleaf에서 레이아웃 템플릿을 잡아주는 페이지(내 경우에는 mainLayout.html)에서 contents나 footer 등이 들어갈 위치만 잡아주는 것이 아니라, 스크립트 역시 똑같은 방법으로 지정해 줘야 하는 것이었다.


두가지 방법이 있겠다.


1. 별도의 fragment 태그로 구성


mainLayout.html

1
2
<!-- 각 페이지의 스크립트가 작성될 위치 -->
<th:block layout:fragment="script"></th:block>
cs


이런 식으로 템플릿 페이지에 스크립트가 작성될 곳을 지정해서 코드를 적어준다.

그 뒤 각각의 fragment들에서 스크립트를 작성 하는데, 아래와 같은 태그 안쪽에서 작업을 해 주면 된다.


testPage.html

1
2
3
4
5
6
7
8
9
10
  <th:block layout:fragment="script">
    <script type="text/javascript">
        $("#test1").click(function(){
            alert('Test1 버튼 클릭');
        });
        $("#test2").click(function(){
            alert('Test2 버튼 클릭');
        });
    </script>
 </th:block>
cs



2. layout:fragment="content" 안쪽에 스크립트를 작성


사실 이 방법이 더 간단하다. 

원래 컨텐츠가 들어갈 layout:fragment 태그 안쪽에 스크립트까지 함께 작성하면 되는 것이다.

코드로 보면 이렇다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<div layout:fragment="content">
 
본문 HTML 작성...
.
..
...
....
    <!--스크립트를 layout:fragment="content" 안쪽에 함께 -->
    <script type="text/javascript">
        $("#test1").click(function(){
            alert('Test1 버튼 클릭');
        });
        $("#test2").click(function(){
            alert('Test2 버튼 클릭');
        });
    </script>
</div>
</body>
cs


이제 실행해 보면 스크립트가 정상적으로 동작하는 것을 볼 수 있다.



2번 방법이 더 간단하고 다른 작업을 해줄 필요가 없어서 편리하다.

하지만 2번은 html이 작성될 div 안쪽에 스크립트까지 함께 작성해야 하기 때문에, 이런 부분에 대한 호불호에 따라 결정하면 되겠다.


사실 여기서 알수있는 더 중요한 것은, 직접 작성하는 스크립트 말고도 외부 파일로 되어있는 스크립트를 사용할 때도, 해당 layout:fragment 안쪽에 선언해야 사용할 수 있다는 것이다. 


thymeleaf로 레이아웃을 구성하는 방법은 아래 페이지를 참고 바란다.

[ thymeleaf layout 구성하기 : http://www.leafcats.com/9 ]



반응형

 Other Contents