728x90
반응형
예전에 프로젝트를 진행할 때는 bootstrap파일을 다운받아 사용하는 방식으로 프로젝트를 진행하였다.
그런데 이 경우 배포할 때 해당 정적 파일도 함께 배포해야 했다.
반면 webjars를 사용하면 jar를 배포하는 것으로 해당 파일에 접근할 수 있게 된다.
또한 webjars는 maven이나 gradle을 통해 의존성을 관리할 수 있다는 장점이 있다.
그럼 직접 적용해보자.
의존성 추가 (pom.xml)
<!-- bootstrap -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.1.3</version>
</dependency>
<!-- bootstrap을 사용하기 위해서는 jquery도 추가해줘야함 -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.6.0</version>
</dependency>- 스프링부트는 정정 콘텐츠의 버전은 관리하지 않으므로 버전 정보도 입력해줘야 한다.
css 적용
<link href="webjars/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="webjars/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="webjars/jquery/3.6.0/jquery.min.js"></script>- 파일 경로는 외부라이브러리 경로에서 찾자!
/resources/webjars/bootstrap 아래의 경로에서 찾을 수 있다!!
이번 포스팅에서는 webjars에 대한 장점과 적용 방법에 대해서 알아보았다. 여기서는 maven을 사용하였는데, gradle에서 적용하는 방법이나, webjars를 적용하는 다른 방법에 대해서는 참고링크 여기에 설명이 잘되어 있어 링크를 확인하자.
적용예시
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.2.4</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.nara</groupId>
<artifactId>NARA</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>NARA</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web-services</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.4.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.4.1</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>나라신용정보</title>
<link rel="stylesheet" href="/webjars/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<%-- 외부 CSS 스타일 시트 --%>
<link rel="stylesheet" href="/resources/css/main.css">
</head>
<body>
<%-- 상단 헤더 --%>
<%@ include file ="layoutHeader.jsp" %>
<%-- 상단 네비 --%>
<%@ include file ="layoutNav.jsp" %>
<%------------------------------------ 본문 ------------------------------------%>
<div class="container">
<div class="row">
<div class="col-12 col-md-9 col-lg-6 order-md-2 order-lg-2">
<div class="col-inner">Main content</div>
</div>
<div class="col-12 col-md-3 order-md-1 order-lg-1">
<div class="col-inner">Aside 1</div>
</div>
<div class="col-12 col-lg-3 order-md-3 order-lg-3">
<div class="col-inner">Aside 2</div>
</div>
</div>
<div class="row">
<div class="col-6 col-lg-3 offset-lg-3">
<div class="col-inner">Secondary content 1</div>
</div>
<div class="col-6 col-lg-3">
<div class="col-inner">Secondary content 2</div>
</div>
<div class="col-6 col-lg-3 offset-lg-3">
<div class="col-inner">Secondary content 3</div>
</div>
<div class="col-6 col-lg-3">
<div class="col-inner">Secondary content 4</div>
</div>
</div>
</div>
<%------------------------------------ 본문 ------------------------------------%>
<%-- 하단 푸터 --%>
<%@ include file ="layoutFooter.jsp" %>
</body>
</html>layoutHeader.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--메뉴바 추가 부분-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark"><a class="navbar-brand" href="#">Expand at sm</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown03">
<a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</nav>
layoutNav.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a href="#" class="navbar-brand"> Navbar </a>
<!-- 아이콘 생성 -->
<button class="navbar-toggler" data-toggle="collapse" data-target="#expand">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 부트스트랩의 일부, 요소를 숨기거나 나타내게 할 수 있음 -->
<div class="collapse navbar-collapse" id="expand">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link">Home</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Contact</a>
</div>
</div>
</nav>
layoutFooter.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<footer class="container d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-muted">© 2022 FastCampus, Inc</p>
<ul class="nav col-md-4 justify-content-end">
<li class="nav-item"><a href="/" class="nav-link px-2 text-muted">Home</a></li>
</ul>
</footer>
728x90
반응형
'📌 Back End > └ Spring Boot' 카테고리의 다른 글
| [JSP] <jsp:include> 액션 태그를 이용한 레이아웃 템플릿 (0) | 2024.05.16 |
|---|---|
| [Spring Boot] 컨트롤러 클래스 없이 특정 view대한 컨트롤러 추가 WebMvcConfigurer addViewControllers (1) | 2024.05.16 |
| [Spring Boot] Spring-boot 프로젝트 생성(STS) / 빌드 / 실행 (1) | 2024.04.30 |
| [Spring Boot] 스프링부트 Whitelabel Error Page 에러 해결 방법 (0) | 2023.03.16 |
