[Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - Resource 경로 지정

CSS, Javascript, Third Party library, Images 등의 resource 를 사용하기 위해서, 경로를 지정합니다.

'resources/static' 패키지를 생성하고, 하위에 디렉터리를 생성해서 관리할 것입니다.

패키지 구조

소스

WebMvcConfig.java

import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@EnableTransactionManagement
public class WebMvcConfig implements WebMvcConfigurer {
	
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry
			.addResourceHandler("/webjars/**")
				.addResourceLocations("classpath:/static/webjars/", "classpath:/META-INF/resources/webjars/");
		registry
			.addResourceHandler("/**")
				.addResourceLocations("classpath:/static/", "classpath:/META-INF/resources/");
	}
}

WebMvcConfigurer 인터페이스를 구현합니다.

addResourceHandlers 메소드를 오버라이딩하여 resource 패키지 경로를 정의합니다.

registry
	.addResourceHandler("/webjars/**")
		.addResourceLocations("classpath:/static/webjars/", "classpath:/META-INF/resources/webjars/");

classpath 에 있는 '/static/webjars', '/META-INF/resources/webjars' 경로를 '/webjars' 경로로 매핑합니다.

registry
	.addResourceHandler("/**")
		.addResourceLocations("classpath:/static/", "classpath:/META-INF/resources/");

classpath 에 있는 '/static', 'META-INF/resources' 경로를 '/' 경로로 매핑합니다.

@Configuration : 빈을 정의하기 위한 역할로 클래스를 지정

@EnableTransactionManagement : 트랜잭션을 사용하는 경우 지정하고, 사용하지 않는 경우 생략

include-link.html

<!-- Bootstrap core CSS -->
<link th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.min.css}" rel="stylesheet">

'resources/static/webjars' 경로에 있는 파일을 '/webjars' 경로로 가져올 수 있습니다.

th:href : thymeleaf 문법으로 href 경로를 지정할 때 사용

include-script.html

<!-- Bootstrap core JavaScript -->
<script th:src="@{/webjars/jquery/3.3.1/js/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.1.3/js/bootstrap.bundle.min.js}"></script>

'resources/static/webjars' 경로에 있는 파일을 '/webjars' 경로로 가져올 수 있습니다.

th:src : thymeleaf 문법으로 src 경로를 지정할 때 사용

결과

'include-link.html', 'include-script.html' 파일에 정의한 library 가 필요한 경우 포함하여 사용합니다.

블로그 프로젝트에서는 'index.html' 페이지에 공통 모듈로 포함하여, 모든 html 파일이 로딩되는 경우 사용 가능하도록 지정 하였습니다.