Javascript Dependency in Maven

Posted at 2014.03.19 19:22 | Posted in JavaScript

http://www.webjars.org/


보통 메이븐을 통해서 자바 라이브러리(jar)들간의 의존 관계를 해결한다.


하지만 자바스크립트 라이브러리는 이런게 없다. 어디선가 js 파일 받아서 웹 소스에다가 놓고 써야한다.


예를 들어 "jQuery UI"를 써야 하면 jquery.ui.js 파일 받고 "jQuery UI"가 필요로 하는 jquery.js 를 구해서 넣어야한다.



<script type="text/javascript" src="js/static/jquery-1.11.0.min.js" ></script>

<script type="text/javascript" src="js/static/jquery-ui.min.js" ></script>


근데! 누군가가 메이븐으로 자바스크립트 라이브러리의 의존 관계를 관리할 수 있도록 했다.

이 기발한 원리는 이러하다. ㅋㅋ


1. /META-INF/ 안에 js 파일들을 넣은 jar 파일을 만들어서 메이븐으로 쓸 수 있도록 한다.

2. 프레임워크마다의 방법으로 classpath 안의 js 파일들을 웹상에서 쓸 수 있도록 한다.


pom.xml 에 아래와 같이 jquery-ui 를 추가하면


<dependency>

<groupId>org.webjars</groupId>

<artifactId>jquery-ui</artifactId>

<version>1.10.3</version>

</dependency>


아래와 같이 jquery 까지 다운로드 받게 된다.



실제 jar 내용을 보면 아래와 같이 js 와 관련된 파일들이 들어있다. (requireJS도? 들어있네 ㄷㄷ)



Spring 3의 mvc 네임스페이스를 이용하면 쉽게 설정 가능하다. (다른 방법은 http://www.webjars.org/documentation 참조)


<mvc:resources mapping="/js/static/**" location="classpath:/META-INF/resources/webjars/" />


html 에서는 리소스의 경로에 맞게 해주면 되겠다.


<script type="text/javascript" src="js/static/jquery/1.9.1/jquery.min.js" ></script>

<script type="text/javascript" src="js/static/jquery-ui/1.10.3/ui/minified/jquery-ui.min.js" ></script>


web-jars.war

 ↑ 소스 포함 war


web-jars.zip

 ↑ 이클립스 메이븐 프로젝트


'JavaScript' 카테고리의 다른 글

Javascript Dependency in Maven  (0) 2014.03.19
url 파라미터 알아내기  (5) 2010.01.15

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

Eclipse + Apatana 를 이용하여 jQuery Code Assist를 사용하다가, Ext JS도 지원하길래 써봤는데 별로 기능이 쉬원치 않더군요...

그래서 ExtJS를 지원하는 다른 것을 찾았습니다~

http://www.spket.com/

Ext JS 외에 다른 것(jQuery, Flex, 등)도 이것저것 지원되네요.


Installation

Eclipse Galileo 에서 설치하였습니다.

일단 Ext JS 라이브러리가 어딘가에 있어야 합니다.


Help - Install New Software...



Add 클릭



http://www.spket.com/update/ 등록

Spket IDE 선택



Next



Finish



플러그인 설치 후 이클립스를 재시작 합니다.

WIndow - Preferences



Spket - JavaScript Profiles

New... 클릭



Name 입력



추가한 이름(ExtJS) 선택 후 Add Library 클릭



Library를 ExtJS로 선택합니다.



추가된 라이브러리 선택 후 Add FIle 클릭



Ext JS 라이브러리 파일들 중에 ext.jsb2 파일을 선택합니다.



잘 등록 되었습니다.



ExtJS를 선택 하고 Default를 클릭하여 기본 프로파일이 되게 하니다.



General - Editors - File Associations 에서 *.js 파일의 편집기를 Spket JavaScript Editor로 설정합니다.



이제 js 파일을 작성해봅시다.

만족할 만큼 Code Assist 기능이 작동 하는군요 ㅎㅎ



API 문서 번갈아서 볼 수고는 좀 덜었네요 ㅎㅎ



'JavaScript > Ext JS' 카테고리의 다른 글

Eclipse + SpketIDE = Ext JS Code Assist 사용하기  (2) 2010.07.12
  1. 웹앱공부하면서 js코드힌트 어떻게 안되는 건가 고민했는데
    덕분에 수월하게 볼 수 있을 거 같습니다.
    좋은 정보 감사합니다^^
  2. 조성민
    좋은 정보 감사합니다~
    그런데 이렇게 사용할 경우 ExtJS관련 Code Assist 는 만족할 만 하지만
    alert와 같은 기본 스크립트(?) 등은 assist가 안되네요.. 혹시 방법 없을까요??

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

url 파라미터 알아내기

Posted at 2010.01.15 23:32 | Posted in JavaScript
wGET 방식으로 넘오어는 url 에서 파라미터를 뽑아내주는 스크립트입니다.

원리는 현재 페이지의 url 을 짜르고 돌리고 짜르고 해서 하나의 배열에 담아주는 겁니다.. ^^;

function getParams() {
    // 파라미터가 담길 배열
    var param = new Array();
 
    // 현재 페이지의 url
    var url = decodeURIComponent(location.href);
    // url이 encodeURIComponent 로 인코딩 되었을때는 다시 디코딩 해준다.
    url = decodeURIComponent(url);
 
    var params;
    // url에서 '?' 문자 이후의 파라미터 문자열까지 자르기
    params = url.substring( url.indexOf('?')+1, url.length );
    // 파라미터 구분자("&") 로 분리
    params = params.split("&");

    // params 배열을 다시 "=" 구분자로 분리하여 param 배열에 key = value 로 담는다.
    var size = params.length;
    var key, value;
    for(var i=0 ; i < size ; i++) {
        key = params[i].split("=")[0];
        value = params[i].split("=")[1];

        param[key] = value;
    }

    return param;
}


사용법은 음....

// 현재 url: http://[domain]/exam.jsp?page=1&title=antop&sid=orcl

var p = getParams();
alert(p["title"]);    // antop
alert(p["page"])   // 1

'JavaScript' 카테고리의 다른 글

Javascript Dependency in Maven  (0) 2014.03.19
url 파라미터 알아내기  (5) 2010.01.15
  1. 이고르
    좋은 정보 감사합니다.
  2. 아...뭔가 따로 함수가 있는줄 알고 검색하고 있었는데, 일일이 잘라줘야 하군요 ㅎㅎ
    고맙습니다 ^^
  3. agapeuni
    좋은글 출처를 표시하고 블로그에 담아갑니다. ^^
  4. KeyMuz
    감사합니다~~!!
  5. 출처를 밟히고 좋은 글을 담아갑니다..

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

Speed Up Your JavaScript

Posted at 2009.06.12 16:48 | Posted in Etc/Scrap
http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=68153

https://www.youtube.com/watch?v=mHtdZgou0qU


 

'Etc > Scrap' 카테고리의 다른 글

Speed Up Your JavaScript  (0) 2009.06.12
RedUTF8 (utf-8 변환기)  (3) 2009.06.06
What can change the nature of a man?  (0) 2009.05.05
왜 공부해야 하는가?  (0) 2009.05.04

댓글 (Comment)

Name*

Password*

Link (Your Website)

Comment

SECRET | 비밀글로 남기기