Spring Boot JSP & Thymeleaf

2022. 6. 8. 16:08

View Tempate Engine: JSP 와 Thymeleaf

1. JSP 사용

Embedded Sevlet 컨테이너의 Spring Boot를 사용할 경우 jar 를 사용할 수 없기 때문에 war 방식을 선택해야 한다.

WAR(Web Archive) 는 웹 어플리케이션 압축 타입으로 Servlet(JSP) 관련 패키지들을 포함하고 있기 때문에 복잡하고 무거운 구조이다.

반면에 Spring Boot는 독립적이고 가벼운 실행을 목표로 하기 때문에 이 방법과는 맞지 않아서, JSP 사용을 권장하지 않는다. 그 대체 템플릿 엔진으로 나온 것이 바로 Thymeleaf

[JSP 사용방법 업데이트 예정]

2.Thymeleaf

: 템플릿 엔진으로서, 기존 HTML 코드와 구조를 변경하지 않고 덧붙이는 방식이 특징

- view와 관련된 설정들은 꼭 정해진 디렉토리에 위치해있어야 한다.

/src/main/resources/templates

- 필요한 dependency (maven 기준) - thymeleaf 만 추가해주었다.

Maven Repository : https://mvnrepository.com/

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-tomcat</artifactId>
  <scope>provided</scope>
</dependency>

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Thymeleaf 제공 Template

HTML
XML
TEXT
Javascript
Css
Raw

Thymeleaf 문법

- th:text="${변수명}"

<!--index.html-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<!--/*@thymesVar id="name" type=""*/-->
<h1 th:text="${name}">Hello Thymeleaf</h1>
</body>
</html>

- th:href="@{변수명}"

: <a> 태그의 하이퍼링크 속성과 동일, 이동하고자 하는 페이지가 있을 때 사용

- th:with="${변수명}"

: 변수 형태의 값을 재정의하는 속성, 새 변수값 생성용

- th:value="${변수명}"

: input의 value에 값을 삽입할 때 사용, + 기호로 여러개의 값을 넣을 수 있음

Javascript에서 사용시

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script th:inline="javascript">
        /*<![CDATA[*/
        let data = /*[[${data}]]"*/;
        /*]]*/
    </script>
</head>
<body>
</body>
</html>

Controller 코드 예시

1. [Model] 사용 ver

@Controller
public class TempController {

    @GetMapping("/index")
    public String test(Model model){
        //속성 이름과 속성값 model에 추가 -> index.html 페이지에서 {$name} 으로 값을 읽음
        model.addAttribute("name","yoon");
        //리턴할 페이지 이름
        return "index";
    }
}

2. [ModelAndView] 사용 ver

@GetMapping("/test")
public ModelAndView test(HttpServletRequest request){
 	....
    ModelAndView mv = new ModelAndView();
    //리턴할 페이지 
    mv.setViewName("test");
    //리턴할 속성과 객체
    mv.addObject("request",request);

    return mv;
}

* Model 과 ModelAndView 차이

https://bestkingit.tistory.com/155

[Spring Boot] Model 과 ModelAndView 차이.

인터셉터에서 세션 처리를 하는 도중에 문제가 생겼다. 지금까지 Controller에서 Model을 이용하여 view에 넣어주었는데, HandlerInterceptor의 postHandle에는 ModelAndView를 이용하는 것이다..(확장하면 되지..

bestkingit.tistory.com

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

Spring - AOP (0)	2022.01.07
Spring - IoC/DI 란? (0)	2022.01.07
Spring Boot 시작하기 1장 (Get API-@GetMapping) (0)	2022.01.07

윤이네