본문 바로가기
[study]이론정리/Spring Boot

Spring MVC - webjar

by yoon9i 2024. 7. 3.

16> webjar
 
  # 현재 사용했던 방식
  - jquery 사용
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  - bootstrap 사용
      CDN 방식 링크로 사용

  ==> 버전이 변경 또는  네트워크 이슈로 사용이 힘들수 있음

  # 적용 방식
   - jquery 와 bootstrap 를 의존성 설정해서 사용하자.

    webJar의 jQuery 경로
    /META-INF/resources/webjars/jquery/3.7.1/jquery.min.js

   최종적으로 사용 경로: <script src="webjars/jquery/3.7.1/jquery.min.js"></script>

    webJar의 bootstrap 경로
    /META-INF/resources/webjars/bootstrap/5.3.3/css/bootstrap.min.css
    /META-INF/resources/webjars/bootstrap/5.3.3/js/bootstrap.min.js

   최종적으로 사용 경로: <script src="webjars/bootstrap/5.3.3/js/bootstrap.min.js"></script>
                                        <link href="webjars/bootstrap/5.3.3/css/bootstrap.min.css" >

    <!-- https://mvnrepository.com/artifact/org.webjars/jquery -->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.7.1</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>5.3.3</version>
    </dependency>

   # 실코드 적용
  <head>
   <meta charset="UTF-8">
   <title>Insert title here</title>
   <script src="webjars/bootstrap/5.3.3/js/bootstrap.min.js"></script>
   <link rel="stylesheet"  href="webjars/bootstrap/5.3.3/css/bootstrap.min.css" >
   <script src="webjars/jquery/3.7.1/jquery.min.js"></script>
   <script>
      $(document).ready(function(){
        alert("jquery 실행");
      });
   </script>
  </head>
  <body>
    ....
  </body>

package com.exam;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

	public static void main(String[] args) {
		SpringApplication.run(Application.class, args);
	}
	
	
}
package com.exam.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MainController {
	
	Logger logger = LoggerFactory.getLogger(getClass());
	
	@GetMapping("/main")
	public String list() {
		
		return "hello"; 
	}

}
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="webjars/bootstrap/5.3.3/css/bootstrap.min.css">
    <script src="webjars/jquery/3.7.1/jquery.min.js"></script>
    <script>
    	$(document).ready(function () {
    		alert("jquery 실행")
    	});
    </script>
</head>


<body>
	<header class="border-bottom border-light border-5">
		<div class="container">
			<div class="row">
				<nav class="navbar navbar-expand-lg">
					<div class="collapse navbar-collapse">
						<ul class="navbar-nav">
							<li class="nav-item">
								<a class="nav-link" href="#">Home</a>
							</li>
				
						</ul>
					</div>
					
					<ul class="navbar-nav">
						<li class="nav-item">
			
							<a class="nav-link" href="#">Login</a>
			
						</li>
						<li class="nav-item">
			
							<a class="nav-link" href="#">signup</a>
			
						</li>
			
					</ul>
				</nav>
			</div>
		</div>
	</header>
</body>

</html>
# application.properties
logging.level.org.springframework=info

# tomcat port 번호 변경
server.port=8090

# context 명 변경
server.servlet.context-path=/app

# jsp 의 경로와 확장자 지정
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp
<?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 
	http://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>2.7.18</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.exam</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>demo</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>11</java.version>
	</properties>
	<dependencies>
		
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-devtools -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
	<groupId>org.apache.tomcat.embed</groupId>
	<artifactId>tomcat-embed-jasper</artifactId>
	<scope>provided</scope>
</dependency>
<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>jstl</artifactId>
</dependency>
  <!-- https://mvnrepository.com/artifact/org.webjars/jquery -->
 <dependency>
     <groupId>org.webjars</groupId>
     <artifactId>jquery</artifactId>
     <version>3.7.1</version>
 </dependency>
    <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
 <dependency>
     <groupId>org.webjars</groupId>
     <artifactId>bootstrap</artifactId>
     <version>5.3.3</version>
 </dependency>


		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

'[study]이론정리 > Spring Boot' 카테고리의 다른 글

Spring MVC - 폼유효성체크  (0) 2024.07.03
Spring MVC - 국제화(I18N: Internationalization)  (0) 2024.07.03
Spring MVC - 예외처리  (0) 2024.07.03
Spring MVC - HandlerInterceptor (X 라고 가정)  (0) 2024.07.03
Spring MVC - FileUpload & download  (0) 2024.07.02

관련글

티스토리툴바