얼마전까지 프로젝트에서 클라이언트에서 사용되는 웹 라이브러리(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 를 기준으로 설명한다.


  • jquerybootstrap 을 추가하는 것을 가정하도록 한다.


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

정리

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

참고


문제

그레이들gradle 으로 구성한 멀티프로젝트를 이클립스에서 불러오게 되면 Classpath Dependency Validator 가 검증되지 않은 클래스패스 상에 의존성을 가진 프로젝트가 있다는 메시지를 던진다.

꽤 거슬린다. ㅡ_-);;

이에 대해서 인터넷 검색을 해봤다.

여기서 해답을 보면 프로젝트를 선택하고 gradle cleanEclipse eclipse 를 해서 이클립스가 그레이들 네이처를 잊어 먹도록 한 후에 수동으로 처리하도록 하는 수를 쓰고 있다.



해결책

해결방법은 간단하다.

[Preference] - 'Validation' - 'Classpath Dependency Validator' 비활성화



하면 끝난다.

경고를 무시해도, 그레이들에 의해서 프로젝트 의존성이 처리가 되기 때문에 큰 문제는 없다.

Eclipse 3.6.x 버전이 되면서 노트북에서 실행되는 이클립스가 얼어버리는 되는 상황들이 빈번하게 발생하기 시작했다. 코딩을 하다가 탭을 바꾸거나 자동완성 기능을 사용하려고 하면 화면이 멈추는 증상에 너무 짜증이 나서 어떻게 할까 고민하던 차다.

지금 노트북에는 외장그래픽으로 ATI Radeon 이 포함되어 있다.

우분투랑 ATI 라데온 조합이 안좋은 건 이 노트북을 사용하면서 실감했다. 우분투와 궁합이 괜찮은 건 엔비디아nVidia 와 인텔intel 이다.

이클립스를 실행할 때마다 너무 짜증이나서 운영체제를 다시 설치할까 했는데, 문득 이에 대한 인터넷 검색을 해보자 하는 생각이 들었다(이렇게 쓴지 한달이 좀 넘은 것 같은데...).

인터넷 검색으로는 ubuntu 14.04 eclipse slow 으로 검색을 시작했다. 그랬더니 나오는 첫번째 결과가 똬악!

을 통해서 간단하게 방법을 찾았다. 해결책은 크게 두 가지 방법이 있다.

  • eclipse.sh 실행 스크립트 작성

    export SWT_GTK3=0
    export UBUNTU_MENUPROXY=0
    ./eclipse
  • eclipse.desktop 애플리케이션 등록정보 수정

    [Desktop Entry]
    Version=4.4
    Name=Eclipse
    Comment=Eclipse IDE
    Exec=env UBUNTU_MENUPROXY=0 SWT_GTK3=0 =/home/honeymon/development/eclipse/eclipse
    Icon=/home/honeymon/development/eclipse/icon.xpm
    Terminal=false
    Type=Application
    Categories=Utility;Application

위의 두 가지 방법 중에 후자의 것을 사용했다.


문제가 생긴 이유는, GTK3 의 SWT 가 최적화되어 있지 않기 때문에 나타나는 버그로 보인다.

현재 개발하고 있는 프로젝트의 빌드도구는 그레이들GRADLE(https://gradle.org/) 이다.

그리고 프로젝트를 빌드할 때 사용되는 것은 프로젝트 안에 포함되어 있는 그레이들 래퍼Gradle wrapper 이다.

그레들 래퍼를 이용해서 빌드환경에 별도로 그레이들을 설치하지 않아도 그레이들의 빌드를 이용할 수 있다. 이때, 시스템변수를 읽어들이는데 그 중 영향을 받는 것 중에 하나가 JAVA_HOME 변수다.

이 빌드에 사용되는 JAVA_HOME 변수 정보를 gradle.properties 에 정의하여 빌드 시에만 참조하도록 할 수 있다.

특정 프로젝트를 $PROJECT_HOME 이라고 했을 때, 프로젝트 상위경로에 gradle.properties 를 생성하고

org.gradle.java.home=<JAVA_HOME 경로>

을 지정해두면 빌드시 그레이들의 JAVA_HOME 변수를 대체하게 된다. 이 프로젝트를 버전관리하고 있다면 gradle.properties 는 무시ignore 처리를 해두면, 개발자마다 미묘하게 다른 JAVA_HOME 경로를 프로젝트별로 정의하는 것이 가능해진다.

[스프링부트] 빌드시 깃 커밋버전 정보 포함시키기

지금 개발하고 있는 애플리케이션은 깃 플로우git flow 를 이용해서 출시하고 있다. 출시할 때는 출시release 기능을 이용해서 master 브랜치에 태그를 생성하고 이를 배포하는 형태로 개발하고 있다.

애플리케이션을 사용하고 있는 필드가 늘어나고 있는데, 이 필드에 배포된 변경이력만으로는 어디까지 개발된 애플리케이션인지 알 수가 없다. 그러다가 스프링부트에서 Git commit information 를 빌드파일이 포함시킬 수 있는 부분을 확인한다. 빌드되는 시점에 커밋정보git.properties 에 저장하여 함께 배포하는 기능이다.

이 기능을 사용하려면,

JDK8 에서 빌드되어야 한다.


gradle-git-properties 사용절차

gradle-git-properties 플러그인 추가

  • 참고: com.gorylenko.gradle-git-properties

    Produce git.properties for spring-boot-actuator

  • build.gradle 수정

    buildscript {
        ext {
          springBootVersion = '1.3.2.RELEASE'
        }
        repositories {
          mavenCentral()
          maven {
                url "https://plugins.gradle.org/m2/"  //gradle 플러그인 URL
              }
        }
        dependencies {
          classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
          classpath "gradle.plugin.com.gorylenko.gradle-git-properties:gradle-git-properties:1.4.11" // gradle-git-properties
        }
    }
     
    apply plugin: "com.gorylenko.gradle-git-properties"


빌드!


빌드 후 결과

  • 빌드된 배포파일 압축을 해제해보면 다음과 같은 구조로 되어 있다. gradle build 생성물 압축해제 그림

    • git.properties
      #
      #Fri Feb 26 10:40:36 KST 2016
      git.commit.id=bad6de66e0ecc9a2f2e2402fdac88f63d88a2305
      git.commit.time=1456448574
      git.commit.user.name=ihoneymon
      git.commit.id.abbrev=bad6de6
      git.branch=release/1.0.1.RELEASE
      git.commit.message.short=\#38 Code cleaning
      git.commit.user.email=ihoneymon@gmail.com
      git.commit.message.full=\#38 Code cleaning\n


액츄에이터 기능 중 info 가 활성화 되어 있다면!!

다양한 버전의 애플리케이션 배포본이 존재할 때 어떤 버전으로 운영되고 있는지 확인하는데 요긴할 듯 하다.

+ Recent posts