[Thymeleaf] Date format

웹어플리케이션 개발 중 날짜 형태 표기에 대한 부분이 개발 언어별로 다르기 때문에 가끔 헷갈릴때가 있습니다.

물론 자바 개발시에도 예외는 아니기도 하고 개발 방법에 따라서 TimeStamp, Date, String, LocalDateTime 등 다양한 방법으로 개발 하게 되는데요 본 포스팅에서는 각 타입의 데이터를 받아서 Thymeleaf로 formatting 를 하는 방법에 대해서 정리해 봤습니다.

 

타임리프를 사용하는데 타임리프가 존재 하지 않으면 안되겠죠?

 

1. 타임리프 종속성 추가

maven

<!-- pom.xml -->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>

gradle

// build.gradle
// thymeleaf
implementation group: 'org.thymeleaf', name: 'thymeleaf', version: '3.0.11.RELEASE'

2. java8time 종속성 추가

타임리프의 서식 지정 및 생성을 위한 Java 8 Date API 로 작업을 하기 위해 java8time 종속성을 추가해 줍니다.

<!-- pom.xml -->
<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-java8time</artifactId>
    <version>3.0.4.RELEASE</version>
</dependency>

// build.gradle
// thymeleaf-extras-java8time
implementation group: 'org.thymeleaf.extras', name: 'thymeleaf-extras-java8time', version: '3.0.4.RELEASE'

3. 기존 및 신규: java.util 및 java.time

Time 패키지 는 Java SE 플랫폼을 위한 새로운 날짜, 시간 및 달력 API입니다. 이 새 API와 이전 레거시 Date API 의 주요 차이점은 새  API가 타임라인의 기계 보기와 인간 보기를 구분한다는 것입니다. 기계 보기는 epoch 에 상대적인 일련의 정수 값을 표시하는 반면 사람 보기는 일련의 필드(예: 연도, 월, 일)를 표시합니다.

새로운 Time 패키지로 작업하려면 새로운 Java8TimeDialect 를 사용하도록 템플릿 엔진을 구성해야 합니다 .

@Bean
public SpringTemplateEngine templateEngine() {
    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.addDialect(new Java8TimeDialect());
    engine.setTemplateResolver(templateResolver);
    return engine;
}

이렇게 하면 Standard Dialect에 있는 것과 유사한 # temporals 객체가 추가 되어 Thymeleaf 템플릿에서 Temporal 객체의 서식 지정 및 생성이 가능합니다.

 

새 클래스와 기존 클래스의 처리를 테스트하기 위해 다음 변수를 만들고 컨트롤러 클래스에 모델 개체로 추가합니다.

model.addAttribute("standardDate", new Date());
model.addAttribute("localDateTime", LocalDateTime.now());
model.addAttribute("localDate", LocalDate.now());
model.addAttribute("timestamp", Instant.now());

3.1. 형식 날짜

우리가 다루고자 하는 첫 번째 기능은 Date 객체의 형식화입니다(Spring 모델 매개변수에 추가됨). ISO8601 형식 을 사용 합니다.

<h1>Format ISO</h1>
<p th:text="${#dates.formatISO(standardDate)}"></p>
<p th:text="${#temporals.formatISO(localDateTime)}"></p>
<p th:text="${#temporals.formatISO(localDate)}"></p>
<p th:text="${#temporals.formatISO(timestamp)}"></p>

백엔드 측에서 우리의 날짜 를 어떻게 설정했는지에 관계없이 선택한 표준에 따라 Thymeleaf에 표시됩니다. standardDate 는 #dates 유틸리티 에 의해 처리됩니다 . 새로운 LocalDateTime , LocalDate 및 Instant 클래스는 # temporals 유틸리티 에 의해 처리됩니다 .

또한 형식을 수동으로 설정하려면 다음을 사용하여 설정할 수 있습니다.

 

<h1>Format manually</h1>
<p th:text="${#dates.format(standardDate, 'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:text="${#temporals.format(localDate, 'yyyy-MM-dd HH:mm:ss')}"></p>

<!-- 
결과

2023-01-12 08:44:23
2023-01-12 08:44:23
2023-01-12 08:44:23
-->