면접 준비

타임리프 간단 정리 (Thymeleaf)

구데타마 2021. 6. 26. 01:07

타임리프 특징

  • 서버 사이드 렌더링 (SSR)
  • Natural Template
  • 스프링에서 권장하고 통합 지원

 

1. 서버 사이드 렌더링 (SSR)

  • HTML 최종 결과를 서버에서 만들어 웹 브라우저에 전달
  • 정적인 화면에서 자주 사용
  • JSP, 타임리프가 대표적인 예시이며 현재는 타임리프를 주로 사용

 

* SSR을 사용하더라도, 자바스크립트를 통해 화면 일부를 동적으로 변경 가능 (무조건 정적인 페이지는 아님)

 

SSR의 대략적 개요

 

2. Natural Template

  • 타임리프는 순수 HTML을 최대한 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 HTML 내용을 확일할 수 있음 (퍼블리셔로부터 파일을 전달받을 때 리뷰하기 유용함)
  • 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과 확인 가능
  • 정리를 하자면, 타임리프 파일을 열었을 때 동적으로 결과가 렌더링 되지는 않지만 HTML 마크업 결과가 어떻게 구성되는지 바로 확인 가능
  • 순수 HTML을 그대로 유지하면서 View Template도 사용할 수 있는 타임리프의 특징을 Natural Template이라고 함

 

* JSP의 경우 JSP 소스코드와 HTML이 섞여있어 렌더링 전까지 파일 내용을 확인하기 힘듦

 

3. 스프링 통합 지원

  • 타임리프는 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원
  • 스프링에서 권장하고 있는 템플릿
  • html 파일 상단에 <html xlmns:th="http://www.thymeleaf.org">를 포함시켜주면 적용 가능

 

타임리프에서 기본으로 제공하는 객체들

1. 기본 객체

  • ${#request}
  • ${#response}
  • ${#session}
  • ${#servletContext}
  • ${#locale}

 

2. 편의 객체

  • param: HTTP 요청 쿼리 파라미터 접근
    • url이 http://localhost:8080/example? age=20 일 때 param.age로 접근 가능
  • session: HTTP session 접근
  • @: 스프링 빈 접근

 

타임리프 템플릿 레이아웃

  • 공통적으로 사용하는 코드 블록들을 레이아웃에 넘겨서 사용하는 방식
  • 보통 공통적으로 사용하는 라이브러리들을 모아놓은 헤더 파일을 만들고 해당 파일을 템플릿으로 사용
  • 또한, 회사명이나 저작자를 명시하는 footer도 템플릿으로 자주 사용

 

간단 예시

  • template/layout/baseExample 레이아웃을 활용하여 template/layout/layoutExample html을 렌더링 하는 예시
  • common_header th:fragment 기능을 활용하여 공통 head 내 타이틀과 css 추가
  • th:replace 기능을 통해 ~{::title}에 title을 넘기고, ~{::link}에 link를 넘김 (th:block이므로 여러 link 넘기기 가능)

 

LayoutExample GetMapping

 

@GetMapping("/layoutExample")
public String layoutExample() {
  return "template/layout/layoutExample";
}

 

template/layout/layoutExample 렌더링 전


 

template/layout/baseExample


 

template/layout/layoutExample 최종 렌더링 결과


 

* 전체 html에 적용하는 것도 가능 (html 태그에 th:fragment 적용)

 

비고

클라이언트 렌더링 (CSR) 간단 정리

  • HTML 결과를 자바스크립트를 활용해 웹 브라우저에서 동적으로 생성해서 적용하는 기술
  • 주로 동적인 화면에 사용하고 웹 환경을 마치 앱처럼 필요한 부분만 변경 가능
  • React와 Vue.js가 대표적인 예시이고 이 둘은 CSR과 SSR을 모두 지원하는 웹 프레임워크

 

출처

인프런 스프링 MVC 1편 (김영한 강사님)

인프런 스프링 MVC 2편 (김영한 강사님)

 

 

반응형