'thymeleaf'에 해당되는 글 5건

  1. 2022.04.22 [Thymeleaf] 간만에 FE 작업 삽질 기록
  2. 2020.07.06 [Spring] 다국어(i18n) 적용 하기.
  3. 2020.05.08 [Thymeleaf] Spring boot + Thymeleaf 사용 시 값 전달 주의 사항.
  4. 2020.04.28 [Thymeleaf] <a> onclick 및 modal 에 변수 전달 하기.
  5. 2019.09.20 [Spring] Springboot + Thymeleaf 설정 시 주의.

[Thymeleaf] 간만에 FE 작업 삽질 기록

ITWeb/개발일반 2022. 4. 22. 14:31

1. bootstrap UI 에서 "dropdown require Popper" 관련 오류가 발생을 하면 아래 내용을 추가 합니다.

 

[webjars + bootstrap 4 사용 시]

build.gradle)
implementation "org.webjars:popper.js:1.6.1-lts"

fragments_jsimport.html)
<!-- jQuery 먼저 선언 합니다. -->
<script type="text/javascript" th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<!-- Bootstrap 을 나중에 선언 합니다. -->

여기서는 선언 순서를 지켜 주셔야 합니다.

 

2. spring mvc 에서 thymeleaf 로 값 전달

Controller)
mav.addObject("key", 1);

Thymeleaf)
<a th:href="@{/goto/{id}(id=${key})}">KEY</a>
To
<a href="/goto/1">KEY</a>

 

:

[Spring] 다국어(i18n) 적용 하기.

ITWeb/개발일반 2020. 7. 6. 16:08

다국어를 적용 하기 위한 Code Snippet

 

1. Javascript

- 구글링 해보시면 몇 가지 framework 들이 나옵니다.

- 쉽게 구현을 한다고 하면, 현재의 locale 정보를 cookie 또는  session 에서 읽어 와서 해당 하는 locale 의 message 파일 또는 변수를 가지고 설정 하면 됩니다.

 

예제)

let MESSAGE = new Object();
let INTL = MESSAGE["ko"];

document.addEventListener("DOMContentLoaded", function(){
  let applicationLocale;

  try {
    applicationLocale = $.cookie("APPLICATION_LOCALE");
  } catch (e) {
  }

  if(!applicationLocale) {
    applicationLocale = "ko";
  }

  INTL = MESSAGE[applicationLocale];
});

MESSAGE.ko = {
  "HELLO": "안녕"
};

MESSAGE.en = {
  "HELLO": "Hello"
};

MESSAGE.ja = {
  "HELLO": "こんにちは"
};

- 여기서 원래는 jquery 를 이용 하다 보니 $ 가 들어 갔었는데 $(document).ready(); 였으나 $를 찾지 못해서 걍 바꿔 놓았습니다.

- 코드 설명은 쉽습니다. 그냥 정적으로 정의해서 사용 하는 내용이라 보시면 다 아실 것 같습니다.

 

2. Spring Boot + Thymeleaf

Cookie 와 Session 두 가지로 적용이 가능 합니다.

구글링 해보시면 거의 똑같은 코드로 예제들이 나올 거예요.

그냥 담는 그릇을 Cookie 로 할건지 Session 으로 할 건지의 차이 라고 보시면 됩니다.

- 프로젝트에서 "Resource Bundle 'messages'" 를 추가해 주세요.

- 추가 하면서, ko, en, ja, zh 생성 하시면 됩니다.

- messages.properties

- messages_ko.properties

HELLO=안녕

- messages_en.properties

HELLO=Hello

- messages_zh.properties

- messages_ja.properties

HELLO=こんにちは

 

2.1 Session

@Configuration
public class LocaleConfig implements WebMvcConfigurer {

  @Bean
  public LocaleResolver localeResolver() {

    SessionLocaleResolver sessionLocaleResolver = new SessionLocaleResolver();
    sessionLocaleResolver.setDefaultLocale(Locale.KOREAN);

    return sessionLocaleResolver;
  }

  @Bean
  public LocaleChangeInterceptor localeChangeInterceptor() {
    LocaleChangeInterceptor localeChangeInterceptor = new LocaleChangeInterceptor();
    localeChangeInterceptor.setParamName("locale");
    
    return localeChangeInterceptor;
  }

  @Override
  public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(localeChangeInterceptor());
  }

}

 

2.2 Cookie

@Configuration
public class LocaleConfig implements WebMvcConfigurer {

  @Bean
  public LocaleResolver localeResolver() {

    CookieLocaleResolver cookieLocaleResolver = new CookieLocaleResolver();
    cookieLocaleResolver.setDefaultLocale(Locale.KOREAN);
    cookieLocaleResolver.setCookieName("APPLICATION_LOCALE");
    return cookieLocaleResolver;
  }

  @Bean
  public LocaleChangeInterceptor localeChangeInterceptor() {
    LocaleChangeInterceptor localeChangeInterceptor = new LocaleChangeInterceptor();
    localeChangeInterceptor.setParamName("locale");
    return localeChangeInterceptor;
  }

  @Override
  public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(localeChangeInterceptor());
  }

}

그래서 Thymeleaf 에서는 아래와 같이 쓰시면 됩니다.

<h1 th:text="#{HELLO}"></h1>

 

:

[Thymeleaf] Spring boot + Thymeleaf 사용 시 값 전달 주의 사항.

ITWeb/개발일반 2020. 5. 8. 16:00

ModelAndView 를 이용해서 Controller 에서 HTML 로 값을 넘길 때 템플릿 엔진으로 Thymeleaf 를 사용하고 있다면 꼭 Model, VO, DTO 등의 객체를 만들어서 넘기도록 합니다.

그냥 Object 로 넘기게 되면 type casting 에 대한 문제가 발생 하거나 삽질을 경험 할 수 있습니다.

 

제가 경험한 내용은 LocalDateTime 값을 잘 못 넘겨서 String to DateTime 을 할 수 없다고 계속 에러를 내거 삽질 했네요.

 

#conversions, #strings, #dates, #temporals 다 그냥 시도해도 Thymeleaf 엔진에서 오류 떨어집니다.

:

[Thymeleaf] <a> onclick 및 modal 에 변수 전달 하기.

ITWeb/개발일반 2020. 4. 28. 21:25

알면 쉽고 모르면 고생하는...

 

<a class="dropdown-item" th:attr="onclick=|alert('${thingCertificate.certificateId}')|">상세정보</a>

<a class="dropdown-item" th:attr="onclick=|alert('${thingCertificate.certificateId}')|">상세정보</a>

 

<a class="dropdown-item"

  data-toggle="modal"

  href="#deleteThingCertificateModal"

  th:data-certid="${thingCertificate.certificateId}"

  th:data-certname="${thingCertificate.certificateInfo == null ? '인증서명이 존재 하지 않습니다.' : thingCertificate.certificateInfo.certName}">

인증서 삭제

</a>

...중략...

<th:block layout:fragment="script">
<script type="text/javascript">
$('#deleteThingCertificateModal').on('show.bs.modal', function (e) {
var certId = $(e.relatedTarget).data('certid');
var certName = $(e.relatedTarget).data('certname'); console.log(certId);
console.log(certName);
}
);
</script>
</th:block>

 

<a class="dropdown-item" 
  data-toggle="modal" 
  href="#deleteThingCertificateModal" 
  th:data-certid="${thingCertificate.certificateId}" 
  th:data-certname="${thingCertificate.certificateInfo == null ? '인증서명이 존재 하지 않습니다.' : thingCertificate.certificateInfo.certName}">
인증서 삭제
</a>

...중략...

<th:block layout:fragment="script">
<script type="text/javascript">
$('#deleteThingCertificateModal').on('show.bs.modal', function (e) {
    var certId = $(e.relatedTarget).data('certid');
    var certName = $(e.relatedTarget).data('certname');
    console.log(certId);
    console.log(certName);
  }
);
</script>
</th:block>

기본 전체는 Modal 창을 띄울 수 있어야 합니다.

그럼 위 내용이 쉽게 이해가 됩니다.

 

 

:

[Spring] Springboot + Thymeleaf 설정 시 주의.

ITWeb/개발일반 2019. 9. 20. 13:58

springboot 에서 thymeleaf 사용 시 applicaiton.properties 내 주의 사항 정도 입니다.

 

기본 설정은 아래와 같습니다.

 

spring.thymeleaf.cache=true
spring.thymeleaf.check-template=true
spring.thymeleaf.check-template-location=true
spring.thymeleaf.enabled=true
spring.thymeleaf.enable-spring-el-compiler=false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.excluded-view-names=
spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.reactive.chunked-mode-view-names=
spring.thymeleaf.reactive.full-mode-view-names=
spring.thymeleaf.reactive.max-chunk-size=0B
spring.thymeleaf.reactive.media-types=
spring.thymeleaf.render-hidden-markers-before-checkboxes=false
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.servlet.produce-partial-output-while-processing=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.template-resolver-order=0
spring.thymeleaf.view-names=

 

이 설정 값들을 넣어 주지 않으셔도 기본 동작에는 문제가 없으나 설정 최적화와 이해를 위해서는 각각의 설정이 어떤 의미를 가지는지 아는게 중요 합니다.

 

viewResolver 관련해서 주의 점은!!

spring.thymeleaf.view-names# Comma-separated list of view names (patterns allowed) that can be resolved.

이 설정을 제거 하시거나 등록을 해주셔야 한다는 것입니다.

 

그냥 저렇게 empty value 로 놔두시면 viewResolver 오류가 발생을 하게 됩니다.

주석에 나와 있는 설명 처럼 목록으로 넣어 주시거나 패턴으로 잡아 주시면 되겠습니다.

: