얼마전까지 프로젝트에서 클라이언트에서 사용되는 웹 라이브러리(jquery, bootstrap) 등에 대한 관리를 제대로 하지 않았다. 화면 개발 및 적용을 다른이에게 맡기고 있었다가 고전적인 방식으로 웹 라이브러리 의존성을 그대로 프로젝트에 추가하여 버전관리시스템에 올라와있는 모습을 보게 되었다. 이렇게 프로젝트의 버전관리에 포함된 웹라이브러리는 버전이 업그레이드되면 버전을 업글하기가 쉽지 않다.이런 상황을 타개할 수 있는 방법으로 WebJars 를 고려해보게 되었다.

http://www.webjars.org/
webjars 란 무엇인가?
WebJars 는 클라이언트에서 사용하는 웹라이브러리(jquery 와 bootstrap) 를 JAR 파일 안에 패키징한 것이다.
- JVM 기반의 웹 애플리케이션에서 클라이언트측 의존성을 손쉽게 관리할 수 있음
- JVM 기반 빌드툴을 사용하여 클라이언트측 의존성을 다운로드
- 사용하고 있는 클라이언트측 의존성을 파악할 수 있음
- 수동적인 종속성을 자동으로 해결하고 선택적으로 RequireJS를 통해 적재
- 메이븐 중앙저장소를 통해 배포된다.
- JSDELIVR 에서 제공하는 공개 CDN 사용이 가능하다.
webjars 사용
webjars 탐색
webjars 를 사용하기 위해서는 http://www.webjars.org/ 접근하여 제공하는 라이브러리를 탐색하여 사용한다.
webjars 에서 제공하는 세가지 유형 중에 한가지를 선택한다.
- NPM WebJars - 
- 즉각적인 생성 및 배포
- 누군가의 요청에 의해 출시
- 아티팩트 컨텐츠는 NPM package를 통해 제공
 
- Bower WebJars - 
- 즉각적인 생성 및 배포
- 누군가의 요청에 의해 출시
- 아티팩트 컨텐츠는 Bower package를 통해 제공
 
- Classic WebJars - 
- 규정에 따른 생성 및 배포
- Webjars 팀에 요청으로 출시
- RequireJS 구성을 사람이 작성
 
기본적인 Classic WebJars 를 기준으로 설명한다.
- jquery와 bootstrap 을 추가하는 것을 가정하도록 한다.
 
  
 
 
 
- 탐색
 Build Tool 항목에서 자신이 사용하는 빌드툴을 선택한다. Build Tool 항목에서 자신이 사용하는 빌드툴을 선택한다.
 
- jquery 탐색
 'filter' 항목에 찾으려 하는 'filter' 항목에 찾으려 하는- jquery입력
 
  
 
 
 
- bootstrap 탐색
 'filter' 항목에 찾으려 하는 'filter' 항목에 찾으려 하는- bootstrap입력
 
  
 
 
 
의존성 추가
- build.gradle에서- dependencies항목에 다음과 같이 추가한다.
 - dependencies { -   // 생략 -   /** -    * webjars -    */ -   compile 'org.webjars:jquery:2.2.1' -   compile 'org.webjars:jquery-ui:1.11.4' -   compile 'org.webjars:bootstrap:3.3.6' -   -   // 생략 - } 
  
 
- 완료된 후 프로젝트의 라이브러리 항목에서 'Gradle dependencies' 를 살펴보면 - build.gradle에서 추가한 라이브러리들이 등록되어 있는 것을 확인할 수 있다.
 
  
 
- 추가된 라이브러리 중에서 jquery를 열어보면 다음과 같은 구조로 되어 있다.
 
  
 
 
 
  
 
의존성 추가된 webjar 참조하기
다음과 같은 형식으로 작성을 추가할 수 있다. 위에서 추가한 jquery 의 경우에는 /webjars/jquery/2.2.1/jquery.min.js 으로 접근할 수 있다.
<html>
 
<head>
  <title>Sample</title>
  <link rel='stylesheet' href='/webjars/bootstrap/3.3.6/css/bootstrap.min.css'>
</head>
 
<body>
  <div class="container">
    <div>
      <h1>WebJars Starter</h1>
      <p class="lead">test</p>
    </div>
 
  </div>
 
  <script src="/webjars/jquery/2.2.1/jquery.min.js"></script> 
  <script src="/webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
  <script type="text/javascript">
    $(function () {
      console.log("jQuery ready");
    });
  </script> 
</body>
 
</html>


정상적으로 적용되었는지는 화면의 구성요소를 확인해서 스타일이 제대로 적용되었는지, 콘솔창에 jQuery ready 메시지가 출력되는 것을 확인할 수 있다.
 

스프링부트에서는 JARs 에 있는 클래스패스 /META-INF/resources/webjars 를 /webjars 로 요청을 연결하도록 자동구성된다.
스프링부트 프로젝트에서 스프링MVC 지침을 따르게 되면 스프링부트에거 구성된 정적 컨텐츠 매핑 사용이 중단된다.
정리
- 프로젝트에 라이브러리를 추가하고 버전관리시스템을 이용해서 관리하던 방식 대신
- 빌드툴을 이용한 버전관리 방식으로 전환할 수 있다.
- 프론트 웹 개발이 별도로 진행된다면 프론트엔드 빌드툴을 이용하는 방식이 더 적절할 것이다.
참고