티스토리 뷰
웹 페이지 레이아웃 설정을 위해 Sitemesh를 많이 사용한다.
하지만 최근 웹페이지 속도 향상을 위해 자바스크립트를 <head>가 아닌 <body> 하단에 포함하면서 조금 애매한 부분이 발생했다.
Sitemesh 하단 자바스크립트 처리 이슈
보통 Sitemesh의 decorator.jsp 파일을 살펴보면 다음과 같이 생성하게 된다.
스타일시트는 <head> 태그에 배치했지만, JQuery와 부트스트랩을 위한 자바스크립트는 하단에 배치했다.
- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
- <html>
- <head>
- <!-- Bootstrap core CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
- <decorator:head/>
- </head>
- <body>
- Top Contents
- <decorator:body/>
- Bottom Contents
- <!-- jQuery Javascript -->
- <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
- <!-- Bootstrap Javascript -->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
- </body>
- </html>
Sitemesh의 decorator를 이렇게 만든 다음, 실제 웹페이지에서 하단에 JQuery 함수를 사용하면
당연히 에러가 발생한다.
Jquery.js 파일이 앞에서 로딩되어 있지 않기 때문이다.
물론 자바스크립트를 <head> 태그 내로 옮기면 쉽게 해결할 수도 있다.
하지만 부트스트랩 등의 최근 자바스크립트를 보면 속도 이슈 때문에 전체 페이지가 로딩된 다음 자바스크립트를 실행하라는 주석이 포함되어 있다.
<!-- Placed at the end of the document so the pages load faster -->
Sitemesh 하단 자바스크립트 처리 방법
해결책은 decorator의 getProperty를 활용하면 된다.
decorator.jsp 파일에 다음과 같이 작성한다.
<decorator:getProperty property="page.local_script">
위 소스가 반영된 decorator.jsp 파일은 다음과 같다.
- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
- <html>
- <head>
- <!-- Bootstrap core CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
- <decorator:head/>
- </head>
- <body>
- Top Contents
- <decorator:body/>
- Bottom Contents
- <!-- jQuery Javascript -->
- <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
- <!-- Bootstrap Javascript -->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
- <decorator:getProperty property="page.local_script"></decorator:getProperty>
- </body>
- </html>
23번째 줄에 page.local_script라는 프로퍼티를 선언했다.
이제 다른 페이지들에서는 다음과 같이 사용하면 된다.
- ...
- 다른 body 콘텐츠 영역...
- <content tag="local_script">
- <script>
- 이 부분의 스크립트가 decorator의 local_script 프로퍼티 영역에 들어간다.
- </script>
- </content>
혹시 Sitemesh를 사용하면서 어쩔 수 없이 <head> 영역에 자바스크립트를 넣었었다면, 이 해결책이 도움이 될 것이다.
참고로 decorator에서 title을 페이지마다 바꾸는 것은 다음과 같이 사용하면 된다.
<title><decorator:title default="미니의 프로그래밍 이야기" /></title>
Sitemesh 더 알아보기...
웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~
Sitemesh에서 메타 태그로 Decorator에 값 전달하기~
'프로그래밍 > Web' 카테고리의 다른 글
| 구글 지메일(Gmail) 백업하기~ (1) | 2015.07.03 |
|---|---|
| HighChart 그래프에서 로컬 시간대 설정~ (0) | 2015.06.25 |
| 반응형 웹을 위한 부트스트랩 활용하기 (1) | 2015.06.12 |
| 부트스트랩 슬라이더 만들기 (0) | 2015.06.10 |
| HighChart를 활용한 웹/모바일 호환 그래프 만들기~ (0) | 2015.06.05 |