[Spring Boot] 13. WebJars 사용하기

하림·2024년 9월 4일

Spring

목록 보기
14/16
post-thumbnail

1. WebJars

1.1 WebJars의 개념

WebJars는 CDN 방식을 주로 사용하는 Bootstrap이나 jQuery 같은 클라이언트 사이드 웹 라이브러리를 JAR 파일로 패키징하여, Maven이나 Gradle로 Java 라이브러리처럼 관리할 수 있게 해주는 서비스입니다.



2. 프로젝트 생성 및 설정

2.1 프로젝트 생성 및 의존성 설정하기

프로젝트를 생성하는 방법은 다음과 같습니다.

  1. 메뉴에서 File > New > Spring Starter Project 를 선택합니다.
    프로젝트 생성창이 뜨면 프로젝트를 설정합니다.
  2. 생성할 프로젝트에 필요한 의존성을 설정합니다. 필요한 의존성은 다음과 같습니다: Spring Web, Lombok

프로젝트 생성이 완료되었습니다.


2.2 JSP 설정 및 기본 프로젝트 구성하기

JSP 설정과 기본 프로젝트 구성 방법에 대해서는 이 링크를 참조하세요.



3. Bootstrap CSS와 jQuery 사용

3.1 의존성 설정하기

Webjars 공식 홈페이지(https://www.webjars.org/)에 접속합니다.

Classic만 체크한 후 jQuery 라이브러리를 검색합니다. 빌드툴은 Gradle을 선택합니다.

검색된 결과에서 Gradle 파일에 추가할 내용을 복사합니다.

이번에는 Classic만 체크한 후 Bootstrap 라이브러리를 검색합니다. 마찬가지로 빌드툴은 Gradle을 선택합니다.

검색된 결과에서 Gradle 파일에 추가할 내용을 복사합니다.

다음과 같이 build.gradle 파일에 Bootstrap CSS와 jQuery 사용을 위한 의존성을 추가합니다.

// WebJars에서 가져온 의존성 항목 추가
implementation 'org.webjars:jquery:3.7.1'
implementation 'org.webjars:bootstrap:5.3.3'

build.gradle 파일을 수정한 후에는 우클릭 > Gradle > Refresh Gradle Project 를 선택하여 해당 파일을 새로고침해야 변경사항이 적용됩니다.


2.2 JSP 파일에서 CSS와 JS 파일을 로딩하기

JSP 파일에서 CSS와 JS 파일을 로딩하려면 <head> 영역에 이와 같이 추가합니다.

<!-- bootstrap 링크 -->
<link rel="stylesheet" href="/webjars/bootstrap/5.3.3/css/bootstrap.css" />
<script src="/webjars/bootstrap/5.3.3/js/bootstrap.bundle.js"></script>
<!-- jQuery 링크 -->
<script src="/webjars/jquery/3.7.1/jquery.js"></script>

경로는 Project And External Dependencies 폴더 하위의 bootstrap css 폴더와 jquery 폴더에서 확인 가능합니다.

필요한 라이브러리 파일을 찾아 우클릭 > Copy Qualified Name 을 선택하여 경로를 복사한 후 /webjars 부터 사용합니다.


2.3 CSS와 JS 파일 로딩 결과 확인하기

뷰를 생성합니다. 다음과 같이 webapp/WEB-INF/views/home.jsp 파일을 작성합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<!-- bootstrap 링크 -->
<link rel="stylesheet" href="/webjars/bootstrap/5.3.3/css/bootstrap.css" />
<script src="/webjars/bootstrap/5.3.3/js/bootstrap.bundle.js"></script>
<!-- jQuery 링크 -->
<script src="/webjars/jquery/3.7.1/jquery.js"></script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>스프링 부트 프로젝트</h2>
	<ul>
		<li><a href="/">루트</a></li>
		<li><a href="/json.do">simple-json 라이브러리 사용하기</a></li>
		<li><a href="/jsonQuiz.do">퀴즈</a></li>
	</ul>
	
	<h2>Webjars - 부트스트랩</h2>
	<button type="button" class="btn">Basic</button>
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-success">Success</button>
	<button type="button" class="btn btn-info">Info</button>
	<button type="button" class="btn btn-warning">Warning</button>
	<button type="button" class="btn btn-danger">Danger</button>
	<button type="button" class="btn btn-dark">Dark</button>
	<button type="button" class="btn btn-light">Light</button>
	<button type="button" class="btn btn-link">Link</button>
	
	<h2>Webjars - jQuery</h2>
	<button type="button" id="myBtn" class="btn btn-warning">
		클릭하세요
	</button>
	<script>
		$(function() {
			$('#myBtn').click(function() {
				alert("jQuery 동작하나요?");
			});
		});
	</script>
</body>
</html>

이제 Bootstrap CSS와 jQuery가 적용된 것을 확인할 수 있습니다.


2.4 모달창 추가하기

w3schools 홈페이지(https://www.w3schools.com/)을 참고하여 다음과 같이 webapp/WEB-INF/views/home.jsp 파일에 코드를 수정합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<!-- bootstrap 링크 -->
<link rel="stylesheet" href="/webjars/bootstrap/5.3.3/css/bootstrap.css" />
<script src="/webjars/bootstrap/5.3.3/js/bootstrap.bundle.js"></script>
<!-- jQuery 링크 -->
<script src="/webjars/jquery/3.7.1/jquery.js"></script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>스프링 부트 프로젝트</h2>
	<ul>
		<li><a href="/">루트</a></li>
		<li><a href="/json.do">simple-json 라이브러리 사용하기</a></li>
		<li><a href="/jsonQuiz.do">퀴즈</a></li>
	</ul>
	
	<h2>Webjars - 부트스트랩</h2>
	<button type="button" class="btn">Basic</button>
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-success">Success</button>
	<button type="button" class="btn btn-info">Info</button>
	<button type="button" class="btn btn-warning">Warning</button>
	<button type="button" class="btn btn-danger">Danger</button>
	<button type="button" class="btn btn-dark">Dark</button>
	<button type="button" class="btn btn-light">Light</button>
	<button type="button" class="btn btn-link">Link</button>
	
	<h2>Webjars - jQuery</h2>
	<button type="button" id="myBtn" class="btn btn-warning">
		클릭하세요
	</button>
	<script>
		$(function() {
			$('#myBtn').click(function() {
				alert("jQuery 동작하나요?");
			});
		});
	</script>
	
	<h2>BootStrap5의 Modal 구현하기</h2>
	<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    	Open modal
  	</button>
</body>

<!-- The Modal - 댓글 수정폼 -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">댓글 수정폼</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <textarea class="form-control" style="height: 100px;">내용을 입력합니다.
        </textarea>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
      	<button type="submit" class="btn btn-primary">수정하기</button>
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

</html>

이제 모달창을 사용할 수 있습니다.


2.5 실행하기

다음과 같이 실행됩니다.

'클릭하세요' 버튼을 클릭하면 jQuery가 동작합니다.

'Open modal' 버튼을 클릭하면 모달창이 뜹니다.

이처럼 모달창을 추가하고 커스텀하여 사용할 수 있습니다.



3. 외부 라이브러리 사용

3.1 JSON.simple 사용하기

대부분의 경우 앞선 방법으로 해결되지만, 잘 알려지지 않은 라이브러리나 특정 이유로 의존성 설정이 안 될 수도 있습니다. 이럴 때 사용할 수 있는 방법입니다.

메이븐저장소 홈페이지(https://mvnrepository.com/)에서 JSON.simple 라이브러리를 검색합니다.

Files 항목의 bundle 을 선택하여 다운로드합니다. 다운로드 한 파일은 프로젝트에 libs 폴더를 생성한 후 해당 폴더 하위에 복사합니다.

다음과 같이 build.gradle 파일에 의존성을 추가합니다.

// 이 프로젝트의 libs 폴더에 있는 모든 jar 파일을 라이브러리로 사용하겠다는 선언 문장 추가
implementation fileTree(dir: 'libs', include: ['*.jar'])

이제 JSON.simple 라이브러리를 사용할 수 있습니다.


3.2 JSON.simple 적용 결과 확인하기

뷰를 생성합니다. 다음과 같이 webapp/WEB-INF/views/home.jsp 파일을 작성합니다.

<h2>스프링 부트 프로젝트</h2>
<ul>
	<li><a href="/">루트</a></li>
	<li><a href="/json.do">simple-json 라이브러리 사용하기</a></li>
</ul>

컨트롤러를 생성합니다. 다음과 같이 com.edu.springboot.MainController.java 파일을 작성합니다.

package com.edu.springboot;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class MainController {
	@RequestMapping("/")
	public String home() {
		return "home";
	}
	
	/* 컨트롤러에서 매핑을 위한 메서드에서 @ResponseBody 어노테이션을 붙이면 반환되는 값을 즉시 웹브라우저에 출력한다.
	 * 이 어노테이션이 없다면 View의 경로를 반환하여 포워드 하게 된다. */
	@RequestMapping("/json.do")
	@ResponseBody
	public String json() {
		/* 외부라이브러리인 simple-json을 통해 사용할 수 있는 클래스로 JSON배열과 JSON객체를 만들어준다.
		 * JSONArray와 JSONObject의 사용법은 각각 List, Map 컬렉션과 완전히 동일하다. */
		JSONArray arr = new JSONArray();
		JSONObject obj = new JSONObject();
		
		// JSON 배열에 데이터 추가
		arr.add("손오공");
		arr.add("저팔계");
		arr.add("사오정");
		
		// JSON 객체에 데이터 추가
		obj.put("서유기", arr);
		obj.put("result", 1);
		
		// JSON을 String 형식으로 웹브라우저에 출력한다.
		return obj.toJSONString();
	}
}

3.3 실행하기

다음과 같이 실행됩니다.

'simple-json 라이브러리 사용하기' 버튼을 클릭하면 JSON 배열을 포함한 JSON 객체가 출력됩니다.

profile
하림

0개의 댓글