[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" />">