[스프링 부트 쇼핑몰 프로젝트 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 프레임워크이다.

🏁결론