티스토리 뷰
웹 페이지 레이아웃 설정을 위해 Sitemesh를 많이 사용한다.
하지만 최근 웹페이지 속도 향상을 위해 자바스크립트를 <head>가 아닌 <body> 하단에 포함하면서 조금 애매한 부분이 발생했다.
Sitemesh 하단 자바스크립트 처리 이슈
보통 Sitemesh의 decorator.jsp 파일을 살펴보면 다음과 같이 생성하게 된다.
스타일시트는 <head> 태그에 배치했지만, JQuery와 부트스트랩을 위한 자바스크립트는 하단에 배치했다.
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 파일은 다음과 같다.
23번째 줄에 page.local_script라는 프로퍼티를 선언했다.
이제 다른 페이지들에서는 다음과 같이 사용하면 된다.
혹시 Sitemesh를 사용하면서 어쩔 수 없이 <head> 영역에 자바스크립트를 넣었었다면, 이 해결책이 도움이 될 것이다.
참고로 decorator에서 title을 페이지마다 바꾸는 것은 다음과 같이 사용하면 된다.
<title><decorator:title default="미니의 프로그래밍 이야기" /></title>
Sitemesh 더 알아보기...
웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~
Sitemesh에서 메타 태그로 Decorator에 값 전달하기~
'프로그래밍 > Web' 카테고리의 다른 글
| 구글 지메일(Gmail) 백업하기~ (1) | 2015.07.03 |
|---|---|
| HighChart 그래프에서 로컬 시간대 설정~ (0) | 2015.06.25 |
| 반응형 웹을 위한 부트스트랩 활용하기 (0) | 2015.06.12 |
| 부트스트랩 슬라이더 만들기 (0) | 2015.06.10 |
| HighChart를 활용한 웹/모바일 호환 그래프 만들기~ (0) | 2015.06.05 |