07장 블로그 화면 구성하기

💡 이 글은 골든래빗 《스프링 부트 3 백엔드 개발자 되기 - 자바 편》의 07장 써머리입니다.

핵심 키워드

템플릿 엔진

• 서버에서 처리된 데이터를 View 페이지에 추가하여 웹브라우저로 전달하는 도구
• JSP, 타임리프, 프리마커

타임리프

• 스프링이 권장하는 템플릿 엔진
• 표현식
  • ${…} : 변수의 값 표현식 // ${session.user.name}
  • *{…} : 선택한 변수의 표현식. th:object에서 선택한 객체에 접근

    <div th:object = "${book}$>
    	...
    	<span th:text = "*{title}">...</span>
    	...
    </div>

  • #{…} : 속성 파일(*.properties) 값 표현식

    Globals.OsType = UNIX
    Globals.DbType = mysql

    <table>
    	...
    	<th th:text="#{Globals.OsType}">...</th>
    	<th th:text="#{Globals.DbType}">...</th>
    </table>

  • @{…} : URL 표현식
    • 서버에 “/allchan” 이라는 context로 배포된 경우
      • <a th:href=”@{/order/list}”>…</a> → <a href=”/allchan/order/list”>…</a>
    • 클라이언트가 세션과 쿠키를 허용하지 않은 경우, jsseionid를 붙여줌
      • <a href="/allchan/order/list;jsessionid=23fa31abd41ea093">...</a>
    • 쿼리 스트링 생성 기능
      • <a th:href=”@{/order/details(id=${orderId}, type=${orderType})}”>…</a>
      • <a href="/allchan/order/details?id=23&amp;type=online">...</a>
• 문법
  • th:text 텍스트를 표현할 때 사용 // th:text=${emplyr.name}
  • th:each 컬렉션을 반복할 때 사용 // th:each=”emplyr : ${emplyrs}”
  • th:if : 조건이 true일 때만 표시 // th:if = “${emplyr.position} == leader”
  • th:unless : 조건이 false일 때만 표시 // th:unless=”${emplyr.orgnzt} == sales”
  • th:href : 이동 경로 // th:href=”@{/emplyrs(id = {emplyr.id})}”
  • th:with : 변숫값으로 지정 // th:with=”name = ${emplyr.name}”
  • th:object : 선택한 객체로 지정 // th:object = “${person}”

Interface Model(org.springframework.ui)

• View 페이지로 값을 넘겨주는 객체, HTTP Method와 매핑된 메서드의 파라미터로 선언하면 스프링이 자동으로 처리

  @GetMapping("/thymeleaf/example")
  public String thymeleafExample(Model model) {
      Person exampleMember = new Member();
      exampleMember.setId(1L);
      exampleMember.setName("탄야");
      exampleMember.setAge(31);
      exampleMember.setHobbies(List.of("사야","은섬"));
  
      model.addAttribute("member", exampleMember();
      model.addAttribute("today", LocalDate.now());
  
      return "example";
  }

  • view에서 ${member.id}, ${today}로 사용 가능

참고자료

• https://inpa.tistory.com/entry/HTML-🎨-Emmet-문법-정리
• https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html