Thymleaf

pjh1011409·2022년 1월 15일
0

Thymleaf

정말 자세한 설명은 아래 링크 참고!!
https://catsbi.oopy.io/32a9458e-f452-4733-b87c-caba75f98e2d

그럼 이제 직접 코드를 하나씩 뜯어보자.!

xmlns:th="http://www.thymeleaf.org/" : 권한 인증을 위해 삽입
xmlns:sec="http://www.w3.org/1999/xhtml" : 타임리프 사용

Context-relative URL
서버 내 특정 위치로 이동이 가능하도록 하는 URL입니다.
ex) th:href="@{.../...../}"

스프링 부트 Thymeleaf: fragment로 웹 페이지에 header, footer 삽입하는 방법입니다. 공통되는 부분을 미리 만들어 놓은 다음 재사용할 수 있습니다.
즉, 각 화면에 분리해 놓은 fragment를 붙여넣을 때 사용한다.
th:replace는 태그 전체를 교체해주는 것입니다.
ex) header th:replace="fragments.html :: head"
-> head 태그 자체가 fragments.html의 head로 바뀝니다.

th:action: form 태그 사용 시, 해당 경로로 요청을 보낼 때 사용합니다. (url)
th:value: input 태그의 value 값 지정과 같이 타임리프 형식인 th:를 붙이는 것입니다.
${...}: 변수표현식
그 이외의 간단한 표현식

  • 선택 변수(Selection Variable) 표현식 : *{...}
  • 메세지(Message) 표현 : #{...}
  • 링크 URL(Link URL) 표현식 : @{...}
  • 단편(Fragment) 표현식 : ~{...}
  • 게시글에 대한 기능 수행이 이루어짐(Thymleaf) - BackEnd

  • 게시글에 대한 뼈대를 만든 기본적인 HTML 틀 - FrontEnd

  • 그리고, 그 둘을 합친 Code

    Thymleaf: 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도

th:each="board : ${list}" : list에 있는 내용을 하나씩 꺼내서 board에 대입하여 반복합니다.
컨트롤러가 넘겨주는 변수는 ${ } 으로 받을 수 있습니다.
ex)th:each="board : ${boards}" -> list명이 boards
-> boards는 컨트롤러가 넘겨주는 변수이며, 원소는 board 변수로 사용하여 각 속성을 사용할 수 있습니다.
thymeleaf에서 반복문을 사용하는 부분입니다.

th:text="${#temporals.format(board.createdDate, 'yyyy-MM-dd')}"
:#temporals.format() 메서드를 사용하여 날짜를 포맷팅하는 방법입니다.
createdDate는 LocalDateTime 타입이기 때문에 java.util.Date를 사용하는 #dates.format()를 사용하지 않습니다

ex)
BackEnd

  • model.addAttribute("standardDate", new Date());
  • model.addAttribute("localDateTime", LocalDateTime.now());
  • model.addAttribute("localDate", LocalDate.now());
    FrontEnd
<p th:text="${#dates.format(standardDate, 'dd-MM-yyyy HH:mm')}"></p>
<p th:text="${#temporals.format(localDateTime, 'dd-MM-yyyy HH:mm')}"></p>
<p th:text="${#temporals.format(localDate, 'MM-yyyy')}"></p>

간단한 CRUD 게시판 만들기

https://bedmil.tistory.com/31

profile
개척하여 유용하게 만드는 사람, 나만의 것을 만들고 싶은 사람

0개의 댓글