정적 자원 관리와 템플릿 엔진

WebStudy/Spring / / 2021. 7. 17. 17:49

assets 폴더 추가

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        registry.addResourceHandler("/assets/**")
                .addResourceLocations("classpath:/assets/", "/assets/");
    }
}
  • addResourceHandlers
    • 이 메서드 내부에서 두 개의 파라미터들을 입력해서 설정할 수 있음
    • addResourceHandler
      • 호출 경로로 사용될 URI 값 입력
    • addResourceLocations
      • 실제로 파일이 위치할 폴더 경로

리소스 주소에 MD5 값 설정

  • 브라우저에 내장된 캐시는 파일 내용과는 상관없이 요청한 request 파일명이 같으면 동작
  • 브라우저의 캐시 제어와 무관히 애플리케이션에서 웹 리소스에 대한 캐시를 관리할 때
    • 스프링에서 제공하는 콘텐처 버전 정책을 사용
    • URL 주소에 해시값이 추가, 캐시 주기도 별도 설정 가능 
      @Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/assets/**")
      .addResourceLocations("classpath:/assets/", "/assets/")
      .setCachePeriod(3600)  //60 * 60 * 24 * 365 1year
      .resourceChain(true)
      .addResolver(new VersionResourceResolver()
      .addVersionStrategy(new ContentVersionStrategy(), "/**"))
}

웹 페이지에 버전 리소스 리졸버 적용

  • 설정한 versionResourceResolver를 통해 웹 리소스 파일을 호출하려면 ResourceUrlProvider를 이용해 로드하는 것이 좋음
  • ResourceUrlProvider를
    • 정적 자원들을 우리가 설정한 리졸버에 맞춰 로드할 수 있게 해 줌
@ControllerAdvice
public class ResourceAdvice {
    @Autowired
    private ResourceUrlProvider resourceUrlProvider;

    @ModelAttribute("versionResourceResolver")
    public ResourceUrlProvider versionResourceResolver() {
        return this.resourceUrlProvider;
    }
}
  • 타임리프나 JSTL 같은 템플릿 엔진을 사용할 때는 상단에 템플릿 엔진의 alias를 추가한 후 태그를 사용하면 된다.
    • <html xmlns:th="http://www.thymeleaf.org">

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <link rel="stylesheet" th:href="${versionResourceResolver.getForLookupPath('/assets/style.css')}"/>
        <title>thymeleaf</title>
        <link rel="stylesheet" th:href="${versionResourceResolver.getForLookupPath('/assets/css/style.css')}"/>
    </head>
    <body>
       <p th:text="${message}"></p>

    </body>
</html>

템플릿 엔진

  • 템플릿 엔진
    • 자바 웹 게발 시 JSP로 페이지 만듦 이때, 스크립트릿(<%%>) 태그 안에 로직 작성
      • 하지만 이는 추후 수정 어려움
    • 이를 해결 하기 위해서 템플릿 엔진 개발
    • 서식과 데이터를 결합한 결과물을 만들어주는 도구
      • 서식 - html과 같은 마크업에 해당
  • 타임리프
    • HTML5와 호환 가능한 템플릿 엔진

타임리프 설정

  • 의존성 추가
    • build.gradle
      • compile "org.springframework.boot:spring-boot-starter-thymeleaf" 추가
  • html 사용
    • <html xmlns:th="http://www.thymeleaf.org"> 명시로 사용 가능
@Controller
public class UIController {
    @Autowired
    InMemoryProductService inMemoryProductService;

    @RequestMapping(value = "/th")
    public String templatePage(Model model){
        model.addAttribute("message", "boot template");
        return "th";
    }
}

타임리프 속성

  • 타임리프는 조건문, 반복문, 표현식 등을 사용할 수 있음

변수 표현식

  • $를 이용해서 변숫값 출력
  • text 속성
    • 태그 내 문자열 값을 표기할 때
  • *로 객체 이름을 명시 한 후 속성값 출력
    • 하나의 변숫값이 아니라 객체의 프로퍼티를 출력할 때 
      @RequestMapping(value = "/th2")
public String templatePage2(Model model) {
Map<String, Object> pageMap = new HashMap<>();
pageMap.put("color", "red");
pageMap.put("name", "jam");
pageMap.put("price", 3000);
model.addAttribute("product", pageMap);
return "th2";
}
  • 페이지에서 객체를 참조할 때는 페이지에서 <th:object>로 명시
  • 속성 값은 div 태그 안에서 * 또는 . 를 이용해서 속성값 출력 가능
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>thymeleaf</title>
</head>
<body>
<div th:object="${product}">
    <p>name: <span th:text="*{name}"></span></p>
    <p>color: <span th:text="*{color}"></span></p>
    <p>price: <span th:text="*{price}"></span></p>

    <div th:if="${product.price} > 3000" th:text="비싸다"/>
    <div th:if="${product.price} > 1500" th:text="적당하다"/>

    <div th:unless="${product.price} >3000" th:text="비싸다"/>
</div>
</body>
</html>

조건문과 반복문

  • 조건문
    • if 사용
      • <div th:if="${product.price} > 3000" th:text="비싸다"/>
      • <div th:if="${product.price} > 1500" th:text="적당하다"/>
    • unless 사용
      • <div th:unless="${product.price} >3000" th:text="비싸다"/>
  • 반복문
    • each 사용
<tr th:each="prod : ${products}">
    <td th:text="${prod.color}"></td>
    <td th:text="${prod.productName}"></td>
    <td th:text="${prod.price}"></td>
</tr>

의문: prod 객체 하나는 color, productName, price 변수들은 모두 private인데 어떻게 접근?

WebJars를 이용한 프론트 라이브러리 관리

  • WebJars는 클라이언트에서 사용하는 라이브러리(js, css) 등을 JAR 형태로 패키징한 것

WebJars 적용

Build 파일 의존성 추가

compile 'org.webjars:jquery:3.1.0'
compile 'org.webjars:bootstrap:3.3.1'

페이지에서 WebJars 라이브러리 사용

<!DOCTYPE html>
<html>
    <head>
        <title>webjar</title>
        <script type="text/javascript" src="/webjars/jquery/3.1.0/jquery.min.js"></script>
        <link rel="stylesheet" href="/webjars/bootstrap/3.3.1/css/bootstrap.min.css"/>
        <script src="/webjars/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <style>
            div {
                background-color: #bca;
                width: 100px;
                border: 1px solid green;
            }
        </style>

    </head>
    <body>

    <div id="block">jquery222</div>

    <button type="button" class="btn btn-primary" onclick="btnHandler()">effect</button>

    <script type="text/javascript">
        function btnHandler(){
            $('#block').animate({
                width:"70%",
                opacity:0.4,
                marginLeft:"0.6in",
                fontSize:"3em",
                borderWidth:"10px"
            }, "15");
        }
    </script>

    </body>
</html>

버전 정보 축약

  • build.gradle 파일에서 버전 정보를 통합해서 관리하고
    • 페이지에서 URL 로드 시 버전 정보를 생략할 수 있다.
    • compile group: 'org.webjars', name: 'webjars-locator', version: '0.32'
저작자표시 비영리 동일조건

'WebStudy > Spring' 카테고리의 다른 글

REST API 2  (0) 2021.07.20
REST API 1  (0) 2021.07.19
Spring Boot  (0) 2021.07.16
Spring MVC  (0) 2021.07.15
Spring IoC 패턴  (0) 2021.07.14
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
WebStudy/Spring 관련 글
글 더보기

티스토리툴바