얼마전까지 프로젝트에서 클라이언트에서 사용되는 웹 라이브러리(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 항목에서 자신이 사용하는 빌드툴을 선택한다.

  • jquery 탐색 'filter' 항목에 찾으려 하는 jquery 입력


  • bootstrap 탐색 '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 지침을 따르게 되면 스프링부트에거 구성된 정적 컨텐츠 매핑 사용이 중단된다.

정리

  • 프로젝트에 라이브러리를 추가하고 버전관리시스템을 이용해서 관리하던 방식 대신
  • 빌드툴을 이용한 버전관리 방식으로 전환할 수 있다.
  • 프론트 웹 개발이 별도로 진행된다면 프론트엔드 빌드툴을 이용하는 방식이 더 적절할 것이다.

참고


저작자표시

'Tools > BuildTools' 카테고리의 다른 글

[gradle] Jrebel, rebel.xml 생성 태스크  (0) 2016.05.22
[gradle] 그레이들이 그루비를 떠나 코틀린으로 갈까?  (0) 2016.05.21
[Gradle] 프로젝트 빌드시 gradle 에서 바라보는 JAVA_HOME 지정하기  (0) 2016.03.03
[GRADLE] 그레들을 좀 더 빠르게! gradle daemon  (0) 2015.08.26
gradle: test task 실행되는데 FileNotFoundException이 발생한다면...  (0) 2015.05.21

프레임워크가 어떤 것인지 이해하려면 라이브러리와 프레임워크가 어떻게 다른지 알아야 한다.

라이브러리를 사용하는 애플리케이션 코드는 애플리케이션 흐름을 직접제어한다.

단지 동작하는 중에 필요한 기능이 이쓸 때 능동적으로 라이브러리를 사용할 뿐이다.

 

반면에 프레임워크는 거꾸로 애플리케이션 코드가 프레임워크에 의해 사용된다.

보통 프레임워크가 위에 개발한 클래스를 등록해두고, 프레임워크가 흐름을 주도하는 중에 개발자가 만든 애플리케이션코드를 사용하도록 만드는 방식이다.

프레임워크에는 분명한 제어의 역전 개념이 적용되어 있어야 한다. 애플리케이션 코드는 프레임워크가 짜놓은 틀에서 수동적으로 동작해야 한다. 

 

--> 라이브러리를 사용하는 애플리케이션 : 애플리케이션이 필요할 때 라이브러리를 사용

--> 프레임워크를 사용하는 애플리케이션 : 프레임워크가 흐름을 주도하다가 필요한 애플리케이션을 사용

 

출처 : 토비의 스프링3, 1장_오브젝트와 의존관계

토비의스프링3
카테고리 컴퓨터/IT > 프로그래밍/언어 > 프로그래밍일반
지은이 이일민 (에이콘출판, 2010년)
상세보기


이 글은 스프링노트에서 작성되었습니다.

'Java > Framework & Libs' 카테고리의 다른 글

Maven 기본 Phase 와 Goal의 관계  (0) 2011.03.25
Spring 3.0 버전을 활용하다가 CGLIB is required to process @Configuration classes Exception 발생  (14) 2011.03.18
POJO(Plain Old Java Object)  (0) 2011.03.15
Jakarta Project  (0) 2011.03.15
[Struts2] HTTP Status 404 - No result defined for action - 문제의 원인과 해결방법?  (0) 2010.03.19

+ Recent posts

티스토리툴바