ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 라이브러리 버전 관리 webjars 로 쉽게 하기
    Front-end 2015. 2. 2. 01:03
    728x90
    배경
    최근들에 웹 개발을 할때 격게 되는 문제중 하나가 자바 스크립트 라이브러리 관리관련 문제이다.

    요즘 자바 웹 프로젝트에서 자바 라이브러리들은 maven으로  체계적인 라이브러리 버전관리가 가능한데 javascript 라이브러리들은 특성상 이런 수준의 버전관리가 이루어진적이 없다.


    사실 적어도 얼마전까지의 웹 개발에서 javascript 라이브러리들은 이렇게 체계적인 관리까리 될 필요는 없었다.
    보통 jquery 최신 버전만 다운받아서 넣어두면 별다른 관리가 필요하지 않은 수준이였다.하지만 최근의 웹 개발들은 웹페이지에서 요구되는 기능 복잡도가 높아지면서 다양한 javascript 라이브러리 들이 만들어지고 또사용한다.
    이렇다 보니 javascript간에 의존관계도 생기게되고 버전별로 충돌이 생기거나하는 일도 잦아지기 시작했다.


    해결책
    여기 자바스크립트 라이브러리도 자바 jar 라이브러리 처럼 디테일한 버전관리와 의존성관리가 가능한 방법을 소개한다.



    위 사이트에서 일반적으로 알려진 거의 모든 자바스트립트 라이브러리들이 패키징되어 올라와 있다.

    패키징 방식은 일반 자바 라이브러리와 같은 jar 방식으로 maven을 통해 webjars 사이트에서 제공하는 패키지들을 일반 자바라이브러리처럼 웹 프로젝트에 추가 시킬 수 있다. 아마 예전의 자바 웹 개발 방식만 이해하고 있다면 이렇게 추가한 jar 파일들은 어차피 그 상태로는 웹페이지에서 못 불러오는것 아닌가 라고 생각할 수 있다.



    기술적 배경
    servlet 최근 버전부터 라이브러리 jar 파일 안의 특정 경로에 있는 파일들도 웹브라우저에서 주소를 통해 접근이 가능하게 되었다.
    이전까지는 웹 개발은 프로젝트를 쪼개서 개발하기가 불가능했지만 이 기술을 통해 이제 공통 웹 페이지들을 서로 다른 프로젝트로 개발해서 포함 시키는 것이 가능하게 되었다. webjars는 이 기술을 가지고 자바스크립트 라이브러리들의 버전관리를 가능하게 해주었다.



    상세 사용 설명

    jquery 라이브러리 사용 예
    1. webjars 사이트에서 jquery 검색

     

    2. 위와 같이 검색후 오른쪽의 maven dependensy 스크립트를 pom 파일에 추가

    추가후 해당 jar 파일을 열어보면 아래와 같은 경로에 js 파일들이 드러 있는것을 확인




    3. jquery 라이브러리를 사용하려는 웹페이지에 아래와 같이 추가


    즉 패키징된 jar 라이브러리 파일에서 META-INF/resources 하위 의 경로를 웹상에서 읽을 수 있다.


    위와 같은 방법으로 다양한 라이브러리를 사용하고 최신 버전이 나왔다면 maven을 통해 손쉽게 새버전으로새로 내려 받을 수 있다.


    webjars 사이트의 document 페이지에 각 개발 환경, 프레임웍 별로 적용방법을 상세하게 알려주고 있다.
    이중 표준적인 개발 방식인 spring으로 개발할때 위 과정외에 /webjars 경로를 resource 경로로 처리해서 인증등의 로직을 타지 않게 처리해야 한다.
    추가로 설정을 바꿔주어야 할 부분은 아래와 같다.

    • xml 설정시 추가


    • javaConfig 설정시 추가





    다양한 자바스크립트 라이브러리 활용
    사실 webjars라는 사이트를 알았을때 자바스크립트 라이브러리를 쉽게 관리한다는것 만큼 놀랐던건 내가 원하는 자바스크라이브러리들이 다양하게 존재하고 있었다는 사실이다. 누가 알려주거나 직접 웹서핑을 열심히 하지 않으면 내가 필요한 기능을 가진 라이브러리가 있는지 조차 알기 어렵다. 이제 webjars에서 이름만 보면 대충의 기능을 알 수 있고, 필요한 기능의 라이브러리를 찾기가 수월해 졌다.


    많은 개발자들도 webjars를 활용해 웹 개발 생산성 향상을 이루기를 바란다.







Designed by Tistory.