spring boot에서 webjars 사용하기

dependency 추가하기

spring boot 프로젝트에서 javascript library를 사용하려는 경우 src/main/resources/static 폴더 하위에 해당 라이브러리를 추가하는 직접적인 방법도 있지만 java opensource 사용하듯이 dependency를 참조해서 사용할 수도 있다.

maven central repo에는 org.webjar.*로 javascript library가 등록되어 있다.

javascript library를 검색하는 건 webjars 공식 사이트에서 하는 게 편하다.

www.webjars.org/

WebJars - Web Libraries in Jars

사용하고자 하는 라이브러리를 아래처럼 참조하면 된다.

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>사용버전</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap-material-design</artifactId>
    <version>사용버전</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>사용버전</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>사용버전</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery-i18n-properties</artifactId>
    <version>사용버전</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>mustachejs</artifactId>
    <version>사용버전</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>momentjs</artifactId>
    <version>사용버전</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>tinymce-jquery</artifactId>
    <version>사용버전</version>
</dependency>

다만 webjar의 경우 헷갈리는 게 동일한 javascript library가 package manager 별로 등록이 되어있다.

	groupId	artifactId
classic	org.webjars		custom built 및 수동 배포
npm	org.webjars.npm	NPM package 또는 URL 기반 이름	NPM package
bower	org.webjars.bower	Bower package 또는 URL 기반 이름	Deprecated 되었음 Bower Github webjar 사용 권고
bower github	org.webjars.bowergithub.[GITHUB_ORG]	Github repo 이름	Bower package

package manager 별로 배포, 등록을 별도로 하고 있고 이것도 시간이 지나면 어떤 건 deprecated 되거나 한다.

package manager 별로 버전 갱신 속도가 다르기도 하다.

하위 종속성이 있는 경우 중복 호출해서 쓰게 되는 문제가 발생하기도 하기 때문에 되도록 하나의 package manager의 dependency만 사용하는 것을 권한다. (classic 추천)

이 글 작성 당시 bootstrap의 검색 결과의 경우 classic, npm은 5.0.0-bate2가 최신이지만 bowergithub은 5.0.0-beta1이 최신이다.

webjar dependency를 참조하고 참조된 jar를 보면 대략 아래와 같은 형태로 library가 보인다.

css, js, scss에 수많은 파일이 있어 해당 폴더까지 확장하진 않았다.

dependency 사용하기

이렇게 참조된 jar는 다음처럼 호출하여 사용할 수 있다.

<script type="text/javascript" th:src="@{/webjars/bootstrap/4.1.1/js/bootstrap.min.js}"></script>

Spring Boot의 webjar 호출 관련 지원

이렇게 호출이 가능한 이유는 spring boot에서 resourceHandler에서 webjars path를 classpath에 매핑해주기 때문이다.

WebMvcAutoConfiguration, WebFluxAutoConfiguration에 각각 다음과 같이 선언되어 있다.

public class WebMvcAutoConfiguration {
    
    ...
    
    public static class EnableWebMvcConfiguration extends DelegatingWebMvcConfiguration implements ResourceLoaderAware {
    
        ...
        
        @Override
        protected void addResourceHandlers(ResourceHandlerRegistry registry) {
            super.addResourceHandlers(registry);
            if (!this.resourceProperties.isAddMappings()) {
                logger.debug("Default resource handling disabled");
                return;
            }
            ServletContext servletContext = getServletContext();
            addResourceHandler(registry, "/webjars/**", "classpath:/META-INF/resources/webjars/");
            addResourceHandler(registry, this.mvcProperties.getStaticPathPattern(), (registration) -> {
                registration.addResourceLocations(this.resourceProperties.getStaticLocations());
                if (servletContext != null) {
                    registration.addResourceLocations(new ServletContextResource(servletContext, SERVLET_LOCATION));
                }
            });
        }
        
        ...

    }
    
    ...
}

...
public class WebFluxAutoConfiguration {

    ...
    
    public static class WebFluxConfig implements WebFluxConfigurer {
    
        ...
        
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            if (!this.resourceProperties.isAddMappings()) {
                logger.debug("Default resource handling disabled");
                return;
            }
            if (!registry.hasMappingForPattern("/webjars/**")) {
                ResourceHandlerRegistration registration = registry.addResourceHandler("/webjars/**")
                        .addResourceLocations("classpath:/META-INF/resources/webjars/");
                configureResourceCaching(registration);
                customizeResourceHandlerRegistration(registration);
            }
            String staticPathPattern = this.webFluxProperties.getStaticPathPattern();
            if (!registry.hasMappingForPattern(staticPathPattern)) {
                ResourceHandlerRegistration registration = registry.addResourceHandler(staticPathPattern)
                        .addResourceLocations(this.resourceProperties.getStaticLocations());
                configureResourceCaching(registration);
                customizeResourceHandlerRegistration(registration);
            }
        }
        
        ...
        
    }
    
    ...
}

webjars-locator-core 사용하기

위 설명한 것과 같이 dependency를 추가하고 사용하면 사용하는데 별 무리가 없다.

하지만 시간이 지나면서 javascript의 버전이 변경되면 변경될 때마다 사용한 곳의 버전 명시를 매번 바꾸는 것도 힘들다.

이를 해결해주기 위한 library가 webjars-locator-core이다.

이 library를 아래처럼 추가하면

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

이제 사용하는 webjar들에 대한 버전을 일일이 명시해서 사용하지 않고 아래처럼 사용할 수 있다.

<!-- webjars-locator-core 사용하지 않은 경우 버전을 명시해야 함 -->
<script type="text/javascript" th:src="@{/webjars/bootstrap/4.1.1/js/bootstrap.min.js}"></script>

<!-- webjars-locator-core 사용한 경우 버전을 생략할 수 있음 -->
<script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

이렇게 사용하면 이후 javascript libarary 버전 변경도 dependency에서 버전만 바꿔주면 자동 반영이 되기 때문에 편리하다.

해당 library는 spring-boot-dependencies에서 버전 관리를 해주고 있기 때문에 버전 명시를 따로 할 필요가 없다.