[스프링 부트 쇼핑몰 프로젝트 with JPA] 3장 정리

Thymeleaf는 서버 사이드 렌더링을 통해 동적 HTML 페이지를 생성하는 템플릿 엔진이다. Thymeleaf 문법은 HTML 태그 안에 속성으로 사용되며, 다양한 기능을 제공한다. Spring Boot Devtools는 개발 시 유용한 기능들을 제공하는 모듈로, 파일 변경 시 자동 재시작, 라이브 리로드, 속성 기본값 등을 제공한다. Thymeleaf는 텍스트 출력, 컬렉션 데이터 출력, 조건부 데이터 출력, 스위치문 사용 등 다양한 기능을 제공한다. 또한, Thymeleaf Layout Dialect를 사용하면 공통 레이아웃을 여러 페이지에 적용할 수 있다.
DriedPollack's avatar
Apr 01, 2024
[스프링 부트 쇼핑몰 프로젝트 with JPA] 3장 정리

🌼Thymeleaf 소개

💡핵심 키워드

  • 화면을 동적으로 만들려면 템플릿 엔진을 사용해야 한다.
    • 템플릿 엔진이란 미리 정의된 템플릿을 만들고 동적으로 HTML 페이지를 만들어서 클라이언트에 전달하는 방식이다.
    • 요청이 올 때마다 서버에서 새로운 HTML 페이지를 만들어 주기 때문에 서버 사이드 렌더링 방식이라고 한다.
  • Thymeleaf 문법을 포함하고 있는 html 파일을 서버 사이드 렌더링을 하지 않고 브라우저에 띄워도 정상적인 화면을 볼 수 있다.
    • Thymeleaf의 확장자명은 .html이며, Thymeleaf의 문법은 html 태그 안쪽에 속성으로 사용된다.
  • 디자이너는 자신이 작업한 내용을 html 파일로 바로 열어서 확인할 수 있으며, 개발자는 디자이너 또는 퍼블리셔로부터 html 파일을 받아서 html 태그 안에 Thymeleaf 문법을 추가하는 것 만으로 동적으로 html 파일을 생성할 수 있다.
 

🌼Spring Boot Devtools

💡핵심 키워드

  • Spring Boot Devtools는 애플리케이션 개발 시 유용한 기능들을 제공하는 모듈이다.
    • Automatic Restart : classpath에 있는 파일이 변경될 때마다 애플리케이션을 자동으로 시작해준다.
    • Live Reload : 정적 자원 수정 시 새로 고침 없이 바로 적용할 수 있다.
    • Property Defaults : 개발하는 과정에서 캐싱 기능을 false로 바꾸면 수정한 소스를 제대로 반영되지 않는 현상을 막을 수 있다.
 

🌼Thymeleaf 예제 진행하기

💡핵심 키워드

th:text 예제

  • th:text를 통해 입력한 데이터를 화면에 출력할 수 있다.

th:each 예제

  • th:each를 통해 여러 개의 데이터를 가지고 있는 컬렉션 데이터를 화면에 출력할 수 있다.

th:if, th:unless예제

  • th:if, th:unless를 통해 해당 조건을 만족하는 데이터를 화면에 출력할 수 있다.

th:switch, th:case예제

  • th:switch, th:case를 통해 switch문을 사용한 것과 같은 결과를 화면에 출력할 수 있다.

th:href 예제

  • th:href 를 통해 링크를 화면에 출력할 수 있다.
 

🌼Thymeleaf 예제 진행하기

💡핵심 키워드

  • 웹사이트를 만들 때 공통적인 페이지 구성 요소들이 존재한다.
  • 각각의 페이지마다 같은 소스코드를 넣는다면 변경이 일어날 때마다 이를 포함하고 있는 모든 페이지를 수정해야 한다.
  • 이 경우 Thymeleaf 페이지 레이아웃 기능을 사용한다면 공통 요소 관리를 쉽게 할 수 있다.

Thymeleaf Layout Dialect dependency 추가하기

  • Thymeleaf Layout Dialect를 이용하면 하나의 레이아웃을 여러 페이지에 똑같이 적용할 수 있다. 공통적으로 적용되는 레이아웃을 미리 만들어놓고 현재 작성 중인 페이지만 레이아웃에 끼워넣으면 된다.

부트스트랩으로 header, footer 영역 수정하기

  • 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다.
 

🏁결론

해당 내용을 정리하면서 Thymeleaf 의 특징, 서버에서 가공한 데이터를 Thymeleaf 라는 템플릿 엔진을 활용하여 클라이언트에 렌더링하는 방법, Thymeleaf 의 기본적인 문법을 이해할 수 있었다.
Share article

More articles

See more posts

👨🏻‍💻DriedPollack's Blog