[Java] [JavaScript] JavaScript 공통 라이브러리 임포트 JSP 작성하기
* 튜토리얼이라기 보다는 내가 주로 사용하는 JavaScript 라이브러리를 JSP에서 임포트하는 방법을 설명했다.
* JavaScript로 작성하는 부분은 .js로 분리해야 IDE 환경의 도움을 얻기 편하지만 소스 코드 중간중간 JSTL 태그 라이브러리를 사용할 필요가 있어 분리하지 않고 .jsp 파일 안에 작성했다. 아래와 같이 /WEB-INF/fragment/common-js.jsp 파일을 작성하고 템플릿 파일에서 <jsp:include page="/WEB-INF/fragment/common-js.jsp" /> 태그로 호출한다.
* JSTL 태그 라이브러리를 사용하려면 jstl-1.2.jar와 standard-1.1.2.jar 라이브러리를 임포트해야 한다. maven jstl, maven standard 키워드로 구글링하여 쉽게 받을 수 있다.
* /WEB-INF/fragment/common-js.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<!-- jQuery v1.8.3 -->
<!-- http://jquery.com/ -->
<!-- v1.9.1은 Kendo UI Web GPL v2012.3.1114에서 미지원 -->
<script src="<c:url value="/resources/lib/jQuery/jquery-1.8.3.min.js" />"></script>
<!-- Kendo UI Web GPL v2012.3.1114 -->
<script src="<c:url value="/resources/lib/KendoUIWebGPL/js/kendo.web.min.js" />"></script>
<script src="<c:url value="/resources/lib/KendoUIWebGPL/js/cultures/kendo.culture.ko-KR.min.js" />"></script>
<!-- json2.js v2012-10-08-->
<!-- https://github.com/douglascrockford/JSON-js -->
<script src="<c:url value="/resources/lib/json2/json2.js" />"></script>
<!-- Knockout v2.2.1 -->
<!-- http://knockoutjs.com/ -->
<script src="<c:url value="/resources/lib/Knockout/knockout-2.2.1.js" />"></script>
<!-- Underscore.js v1.4.4 -->
<!-- http://underscorejs.org/ -->
<script src="<c:url value="/resources/lib/Underscore.js/underscore-min.js" />"></script>
<!-- Sugar v1.3.9 -->
<!-- http://sugarjs.com/ -->
<script src="<c:url value="/resources/lib/Sugar/sugar-1.3.9.min.js" />"></script>
<!-- Bootstrap v2.3.1 -->
<!-- http://twitter.github.com/bootstrap/ -->
<script src="<c:url value="/resources/lib/Bootstrap/js/bootstrap.min.js" />"></script>
<!-- Bootbox.js v3.2.0 -->
<!-- http://bootboxjs.com/ -->
<script src="<c:url value="/resources/lib/Bootbox.js/bootbox.min.js" />"></script>
<!-- Select2 v3.3.1 -->
<!-- http://ivaynberg.github.com/select2/ -->
<script src="<c:url value="/resources/lib/Select2/select2.min.js" />"></script>
<!-- X-editable v1.4.3 Bootstrap Build -->
<!-- http://vitalets.github.com/x-editable/ -->
<script src="<c:url value="/resources/lib/X-editable/js/bootstrap-editable.min.js" />"></script>
* CSS 부분 또한 아래와 같이 /WEB-INF/fragment/common-css.jsp 파일을 작성하고 템플릿 파일에서 <jsp:include page="/WEB-INF/fragment/common-css.jsp" /> 태그로 호출한다.
* /WEB-INF/fragment/common-css.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<!-- Bootstrap v2.3.1 -->
<!-- http://twitter.github.com/bootstrap/ -->
<link rel="stylesheet" href="<c:url value="/resources/lib/Bootstrap/css/bootstrap.min.css" />">
<link rel="stylesheet" href="<c:url value="/resources/lib/Bootstrap/css/bootstrap-responsive.min.css" />">
<!-- Kendo UI Web GPL v2012.3.1114 -->
<link rel="stylesheet" href="<c:url value="/resources/lib/KendoUIWebGPL/css/kendo.common.min.css" />">
<link rel="stylesheet" href="<c:url value="/resources/lib/KendoUIWebGPL/css/kendo.default.min.css" />">
<link rel="stylesheet" href="<c:url value="/resources/lib/KendoUIWebGPL/css/kendo.bootstrap.min.css" />">
<!-- Select2 v3.3.1 -->
<!-- http://ivaynberg.github.com/select2/ -->
<link rel="stylesheet" href="<c:url value="/resources/lib/Select2/select2.css" />">
<!-- X-editable v1.4.3 Bootstrap Build -->
<!-- http://vitalets.github.com/x-editable/ -->
<link rel="stylesheet" href="<c:url value="/resources/lib/X-editable/css/bootstrap-editable.css" />">