0. Thymeleaf

 본격적으로 동적으로 뷰를 구성하기 위해 먼저 템플릿 엔진인 Thymeleaf 문법에 대한 이해가 필요하다. 이번에는 Thymeleaf에서 유용하고 자주 사용되는 문법들을 사용해보며 정리하고 넘어갈 것이다. 물론 아직 배우는 중이기에 빠진 내용도 많겠지만 추후에 알게되면 별도의 포스팅으로 보충해나기로 한다.

 

 

1. XML name space 추가

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>My Community</title>
</head>
<body>
    This is Index Page via Controller
</body>
</html>
  • 위와 같이 html 태그에 xmlns:th="http://thymeleaf.org" 를 추가해준다. 이것은 th 라는 xml 네임 스페이스를 추가한다는 의미이며 이 네임스페이스가 추가된 태그 안에서는 th가 지원하는 속성이나 태그 등을 사용할 수 있게 된다.

 

 

2. th:text

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>My Community</title>
</head>
<body>
    This is Index Page via Controller
    <div th:text="${ myName }"></div>
</body>
</html>
  • html 태그에 th:text 속성을 지정해주면 해당 태그 내의 텍스트를 해당하는 변수의 값으로 치환해준다.
  • thymeleaf에서 변수값을 사용할 때는 문자열 내에서 ${ <변수명> } 을 사용하면 된다.
  • 위와 같이 myName 변수를 내부 텍스트로 가질 div 태그를 작성해준뒤 서버를 구동, 접속해보자.

 

  • 아무 내용도 나타나지 않는다. 아직 myName이라는 변수가 존재하지 않기 때문에 당연한 일이다.

 

 

3. Model 객체에 속성 추가

package com.scala.personal.mycomm.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
    @GetMapping("")
    public String index(Model model) {
        model.addAttribute("myName", "Scala");
        return "index";
    }
}
  • thymeleaf가 참조할 변수는 Controller가 이전 글에서 설명했던 Model 객체에 추가시켜줘야한다.
  • 위와 같이 model 객체에 addAttribute 메소드를 호출하여 "Scala" 라는 문자열을 저장한 속성 myName을 추가한다.

 

  • 서버를 재구동한 뒤 접속해보면 정상적으로 th:text 속성이 작동하는 것을 볼 수 있다.

 

4. th:utext

package com.scala.personal.mycomm.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
    @GetMapping("")
    public String index(Model model) {
        model.addAttribute("myName", "<strong>Scala</strong>");
        return "index";
    }
}
  • Controller에서 myName의 값에 <strong>태그를 씌워서 속성에 추가하고  서버를 재구동한 뒤 다시 접속해보자.

 

  • 태그가 html 태그로 인식이 되지 않고 그대로 문자열로 출력된다.

 

  • Chrome 개발자 도구에서 해당 라인을 우클릭하여 Edit as HTML을 선택하면 위와 같이 태그를 나타내는 특수문자(<, >)가 이스케이프 처리 되어있는 것을 확인할 수 있다. th: text 는 이처럼 변수값을 이스케이프 처리하여 전달받은 형태 그대로 출력되도록 한다.

 

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>My Community</title>
</head>
<body>
    This is Index Page via Controller
    <div th:utext="${ myName }"></div>
</body>
</html>
  • 이번에는 th:text 속성을 th: utext로 바꾸고 다시한번 서버에 접속해보자

 

  • 이제 <strong> 태그가 정상적으로 적용되어 텍스트가 강조되어 표시되는 것을 볼 수 있다.
  • th:utext 의 u는 unescaped, 즉 이스케이프 처리하지 않고 텍스트를 삽입한다는 의미이다.

 

 

5. Thymeleaf 표현식(Expression)

  • 위에서는 thymeleaf에서 변수(variable)를 표현하기 위한 표현식( ${  } ) 만을 사용했지만 thymeleaf 는 그 외에도 다양한 표현식을 지원한다. thymeleaf의 더 많은 기능을 알아보기 전에 간단하게 짚고넘어가보자.

  • 변수 표현식(Variable Expression) : ${ ... } 
    • 위에서도 사용했던 변수 표현식은 말그대로 thymeleaf에서 변수를 참조하기 위해 사용된다.
    • 참조할 변수가 객체(object)인 경우 객체의 속성에도 접근이 가능하지만 속성에 직접 접근하는 것이 아닌 getter를 호출하는 방식이기 때문에 getter를 정의하지 않은 속성에는 접근할 수 없다.

  • 선택 변수 표현식(Selection Variable Expression) : *{  }
    • 변수 표현식은 변수를 참조하는 범위가 전체 컨텍스트였던 것과 달리 선택 변수 표현식은 이전에 선택했던 변수 내에서 해당 값을 참조한다. 실제 사용 예시는 나중에 th:object 속성과 함께 알아볼 것이다.

  • 메시지 표현식(Message Expression) : #{ ... }
    • .properties 등의 외부 파일에 정의된 값을 참조하기 위한 표현식
    • Spring에서는 resources/messages.properties 에 정의된 메시지값을 참조
    • messages_<국가표시> 로 브라우저의 국가 설정에 따라 다른 메시지를 표시 가능

  • 링크 url 표현식(Link URL Expression) : @{ ... }
    • src나 href 등 url 주소를 대입할 속성에서 사용되는 표현식
    • 기존의 절대경로은 물론 상대경로 또한 사용이 가능하다. 예를들어 서버의 메인 경로가 http://127.0.0.1:8080 일 경우 @{ /card } 를 사용하여 http://127.0.0.1:8080/card를 표현할 수 있다.
    • 이 외에 [http | https]://www 를 생략해주는 //static 등의 특수한 문법도 존재
  • 프래그먼트 표현식(Fragment Expression) ~{ ... }
    • tymeleaf에서는 뷰를 재사용하기 위한 프래그먼트 기능을 제공
    • 프래그먼트 표현식은 미리 정의해둔 프래그먼트를 참조하기 위한 표현식이다. 이에 대해서는 나중에 th:fragment 와 함께 알아보게 될 것이다.

 

6. 리터럴과 연산자

  • thymeleaf는 또한 문자열이나 숫자, 논리값 등을 나타내기 위한 리터럴 표현과 다양한 연산자들을 지원한다. 여기까지 숙지해두고 나면 이후에 알아볼 thymeleaf의 기능들을 활용하기에 부족함이 없을 것이다.

  • 리터럴 표현
    • 문자열
      • '<문자열 내용>' 과 같이 작은 따옴표로 감싸서 표현 가능
      • ex) 'abc', 'Hello World', ...
    • 숫자
      • 정수든 소수든 프로그래밍 언어에서처럼 평범하게 사용할 수 있다.
      • ex) 1, 27, 31.0, 12.7 ...
    • 논리형
      • true / false 로 나타낼 수 있다.

    • 널(Null) 값
      • null 로 나타낼 수 있다.

    • 리터럴 토큰
      • 리터럴 토큰은 기본적으로 문자열 리터럴과 동일하게 동작
      • 리터럴 토큰을 사용할 때는 작은 따옴표로 값을 감쌀 필요가 없다. (편의성)
      • 단, 리터럴 토큰에는 오직 알파벳과 숫자, 대괄호( [, ] )와 점(.), 하이픈(-), 언더바(_) 만을 사용할 수 있다.

  • 연산자
    • 문자열 연산자
      • + : 문자열을 합칠 수 있다(Concatenation)
      • |<표현식>| : 표현식의 결과를 문자열 리터럴로 치환할 수 있다(Literal Substitution)

    • 산술 연산자
      • +, -, *, /, % 등 기본적인 사칙연산
      • - 단항연산자(부호)

    • 논리 연산자
      • and, or 사용 가능
      • not 의 경우 !로도 사용 가능

    • 비교 연산자
      • >, <, >=, <=, ==, != 등의 기본 비교 연산자 모두 사용 가능
      • 위의 연산자 대신 gt, lt, ge, le, eq, ne 를 사용할 수도 있다.

    • 조건 연산자
      • if 조건문
        • <조건> ? <조건이 참일 경우>
        • <조건> ? <조건이 참일 경우> : <조건이 참이 아닐 경우>
      • defulat 조건문
        • <값> ?: <Default 값>
          => 해당 값이 없을 경우 Default값으로 대체

    • No-operation
      • _(언더바) : 아무 연산도 하지 않음
  • 이것으로 thymeleaf의 기능들을 알아보기 위한 밑준비가 끝났다. 다음부터는 thymeleaf가 지원하는 여러 속성값에 대해 알아볼 것이다. 
저작자표시 (새창열림)

'프레임워크 > Spring' 카테고리의 다른 글

#12 Thymeleaf 3  (0) 2022.05.10
#11 Thymeleaf 2  (0) 2022.05.08
#9 MVC 구조 갖추기 - Controller/View 구현 1  (0) 2022.05.05
#8 Spring Boot 프로젝트  (0) 2022.05.04
#7 Spring 의 구조  (0) 2022.05.03

+ Recent posts

티스토리툴바