취미로 음악을 하는 개발자

[Spring Boot] Webjars 본문

공대인/Spring[Boot]

[Spring Boot] Webjars

영월특별시 2019. 8. 29. 00:37
728x90

Webjars


클라이언트에서 사용되는 라이브러리(Bootstrap, jquery 등)들은 프로젝트에 추가해서 사용하는데

간혹 웹 서버는 멀쩡하지만 페이지가 오류날 수도 있다. 

그래서 다운로드를 받아 프로젝트에 추가하지만 그렇게 되면 버전 관리가 힘들어진다.


이 때, Webjars를 사용하면 해결이 가능한데 라이브러리를 jar파일로 패키징하여 maven이나 gradle로 관리할 수 있기 때문에 버전 관리를 신경쓰지 않아도 된다.


아래와 같은 주소로 들어가게 되면 여러 라이브러리를 볼 수 있게 빌드 툴에 맞는 코드로 불러올 수 있다.

원래는 검색하면서 찾아야하지만 지금 사용할 라이브러리 두 개는 최상위에 나와있기 때문에 바로 복사해서 사용할 것이다.


* 참고로 여기서는 'compile~' 로 나와있지만 현재 버전에서는 'implementation~'로 시작하기 때문에 그 부분만 수정해주면 된다.



프로젝트 생성




코드 구현


// build.gradle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
plugins {
    id 'org.springframework.boot' version '2.1.7.RELEASE'
    id 'io.spring.dependency-management' version '1.0.8.RELEASE'
    id 'java'
    id 'war'
}
 
group = 'com.study'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'
 
repositories {
    mavenCentral()
}
 
dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
    implementation 'javax.servlet:jstl'
    implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    implementation 'org.webjars:jquery:3.4.1'
    implementation 'org.webjars:bootstrap:4.3.1'
}
cs


위에서 jquery와 bootstrap을 implementation 하고나면 

아래와 같이 외부에서 불러온 파일 목록에 jquery와 bootstrap이 있는 것을 확인할 수 있다. 



// application.properties

1
2
3
4
server.port = 8081
# JSP
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp
cs



// index.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
<title>example</title>
<meta http-equiv="X-UA-Compatible" content="IE=dege">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/webjars/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <p>
        <button type="button" class="btn btn-lg btn-default">Default</button>
        <button type="button" class="btn btn-lg btn-primary">Primary</button>
        <button type="button" class="btn btn-lg btn-success">Success</button>
        <button type="button" class="btn btn-lg btn-info">Info</button>
        <button type="button" class="btn btn-lg btn-warning">Warning</button>
        <button type="button" class="btn btn-lg btn-danger">Danger</button>
        <button type="button" class="btn btn-lg btn-link">Link</button>
    </p>
<script src="/webjars/jquery/3.4.1/jquerymin.js"></script>
<script src="/webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
cs



결과 화면




저작자표시

'공대인 > Spring[Boot]' 카테고리의 다른 글

[Spring Boot] war 파일 배포  (0) 2019.09.03
[Spring Boot] 외부 jar 사용하기 (FileUpload, Json)  (2) 2019.08.29
[Spring Boot] Security Taglibs, Database  (2) 2019.08.26
[Spring Boot] Security Form, Status Check  (0) 2019.08.24
[Spring Boot] Security  (0) 2019.08.22
'공대인/Spring[Boot]' Related Articles more
Comments