Spring ThymeLeaf(타임리프)(2)

Spring ThymeLeaf에 대해 알아보는 2번째 시간입니다.

전에 했던 타임리프 보다는 조금 더 어려운 개념들입니다.(제 개인적인 의견)

 

전처리

• 형식 : __${값}__
• 일반적인 표현식이 수행되기 전에 먼저 다른 표현식을 실행되게 합니다.

Test.java

index.html

• 코드와 예시입니다.
• 값에 따라 expression이 변하는 것을 알 수 있습니다.
• 하지만 저는 index.html에서 name과 email부분에서 오류가 계속 떠서 할 수 없이 그부분을 없애고 결과화면을 보여드렸습니다. 실제로는 아마 잘 되는 것으로 알고 있습니다.

 

인라인(Inline)

• HTML파일에 직접 표현식을 쓰는게 나을  때 사용합니다.
• th:inline="text"라고 작성된 태그 내부에서만 처리가 가능합니다.(text 외에 javascript, none  3가지가 가능합니다.)
• [[${값}]] 의 형태로 사용됩니다.

Test.java

index.html

결과화면

• 코드와 출력화면이다.
• 실제로 여러번의 시도 끝에 간신히 성공한 예제이다. 굉장히 간단한 예제이지만, 나는 왜 이렇게 오래 걸린지 잘 모르겠다.
• 코드대로만 하면 멀쩡히 잘 동작하는 것을 알 수 있습니다.

 

인라인 처리 - 자바스크립트 사용

• 인라인의 호환성을 위해서 scripting모드에서 스크립트 언어를 통해 작성할 수 있습니다.
• <script th:inline="javascript"></script>내에서 적용됩니다.
• 형식 : /*[[${값}]]*/

Test.java

index.html

결과화면

• 코드와 결과화면이다.
• 이번에도 또 예제 실습이 제대로 이루어지지 않았다...
• localhost:8082/숫자 에서 숫자와 input value의 숫자를 통해 result에 두 숫자를 더한 값이 나오는 것이라고 예상되는데 그게 실제로 이루어지지는 않았습니다.
• 제 코드 상으로는 var num = /*[[${num}]]*/에서 에러가 발생한 것 같은데 그 이유는 아직 잘 모르겠습니다.
• 스크립트를 통한 인라인 처리 예제였습니다.

 

Fragment

• Template Layout의 일종입니다.
• 어떤 템플릿에 다른 템플릿을 삽입하고자 할 때 사용합니다.
• th:fragment 어트리뷰트를 사용해서 처리할 수 있습니다.

Test.java

index.html

part.html

결과화면

• 코드와 결과화면이다.
• 화면에서는 분명 index.html을 기반으로 보여주고 있지만
• 마지막 2줄은 part.html의 내용이다.
• 이렇게 fragment 예제에 대해서도 한번 봤습니다.

그 외에 ThymeLeaf에 대해 더 알고 싶다면 다른 블로그 혹은

https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html

Tutorial: Using Thymeleaf

이 사이트를 보면 될 것 같습니다.