Spring/Spring boot

[14] Spring Web MVC : Web JAR

낙타선생 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 [본문으로]