ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [14] Spring Web MVC : Web JAR
    Spring/Spring boot 2020. 6. 23. 19:41
    반응형

    [Web JAR란]

    Web JAR는  jQuery, ReactJS, vue.js, Angular 등과 같이 client-side에서 동작하는 web library들을 JAR[각주:1] file로 packaging한 것입니다. 의존성을 추가하기만 하면 JAR 안에 있는 css나 javascript 등을 사용할 수 있습니다.

     


    [Web JAR의 사용]

    Web JAR를 사용하기 위해서는 우선 사용하고자 하는 Web JAR에 대한 의존성을 추가해야 합니다. Maven repository(https://mvnrepository.com/)에서 많은 Web JAR를 제공하고 필요한 JAR를 검색하여 사용합니다.

     

    만약 jQuery에 대한 Web JAR 의존성을 추가하고자 한다면, Maven repsitory에서 jquery를 검색합니다.

     

     

    검색 결과 중 jQuery를 선택합니다.

     

     

    원하는 version을 선택합니다.

     

    각 build tool에 대한 의존성 추가 구문을 제공하므로 복사해서 사용합니다. 여기서는 Maven을 사용하도록 합니다.

    위의 구문을 복사하여 다음과 같이 pom.xml의 dependencies tag 안에 붙여 넣습니다. 

    <dependencies>
    
    	<dependency>
    		<groupId>org.webjars.bower</groupId>
    		<artifactId>jquery</artifactId>
    		<version>3.5.1</version>
    	</dependency>
    
    </dependencies>

     

    client-side에서 jQeury를 사용할 수 있는지 확인해보기 위해 /resources/static/hello.html file을 다음과 같이 작성합니다.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    Hello static resource.
    </body>
    <script src="/webjars/jquery/3.5.1/dist/jquery.min.js"></script>
    <script>
        $(function() {
            alert("jQeury was ready to use");
        });
    </script>
    </html>

    script tag에 src 속성에 Web JAR file 경로를 넣어주고 onload 시 alert 창을 실행하도록 하는 구문을 추가하였습니다.

     

     

    application을 실행하고 http://localhost:8080/static/hello.html 로 접속하면 jQuery 구문이 실행됩니다.

     

     

     

     

    [Web JAR version의 생략]

    Web JAR의 경로에는 version 정보도 포함되어 있습니다. 하지만 매번 적용하는 JAR의 버전을 신경쓰기 번거롭습니다. 이런 경우 pom.xml에 webjars-locator-core 의존성을 추가하여 경로에서 version을 생략할 수 있습니다. 추가되는 의존성 구문은 다음과 같습니다.

    <dependency>
    	<groupId>org.webjars</groupId>
    	<artifactId>webjars-locator-core</artifactId>
    	<version>0.45</version>
    </dependency>

     

    /resources/static/hello.html file에서 script tag의 src 속성 중 version에 관한 내용을 삭제합니다.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    Hello static resource.
    </body>
    <!--<script src="/webjars/jquery/3.5.1/dist/jquery.min.js"></script>-->
    <script src="/webjars/jquery/dist/jquery.min.js"></script>
    <script>
        $(function() {
            alert("jQeury was ready to use");
        });
    </script>
    </html>

     

    자동으로 version을 설정하는 기능은 resource chaining(resource handler, resource transformer를 chaining)을 통해 제공됩니다.

     

     

    1. Java Archive [본문으로]

    댓글

Designed by Tistory.