스프링부트 쇼핑몰 프로젝트(3)

Study with cocochichi·2023년 11월 22일

스프링부트 쇼핑몰 프로젝트

목록 보기

4/6

🛒 Thymeleaf 소개

✏️ 서버 사이드 렌더링

: 화면을 동적으로 만들기 위해 템플릿 엔진을 사용해야 함.
➡️ 미리 정의된 템플릿을 만들고 동적으로 HTML페이지를 만들어서 클라이언트에 전달하는 방식. 요청이 올 때마다 서버에서 새로운 HTML 페이지를 만들어주는 방식이다.

서버 사이드 템플릿 엔진
ex) Thymeleaf, JSP, Freemarker, Groovy, Mustache 등

Thymeleaf 장점

가장 큰 장점은 'natural templates'
Thymeleaf 문법을 포함하고 있는 hmtl 파일을 서버 사이드 렌더링 하지 않고 브라우저에 띄워도 정상적인 화면 출력
(↔️ JSP : 서버 사이드 렌더링을 하지 않으면 정상적인 화면 출력 결과 볼 수 없음)

🛒 웹 브라우저에서 Thymeleaf 파일 열어보기

🛒 Thymeleaf 예제용 컨트롤러 클래스 만들기

(✔️ex02로 수정해서 실행함)
➡️ 1) 클라이언트의 요청에 대해서 어떤 컨트롤러가 처리할지 매핑하는 어노테이션. url에 "/thymeleaf"경로로 오는 요청을 ThymeleafExController가 처리하도록 함
➡️ 2) model 객체를 이용해 뷰에 전달한 데이터를 key, value 구조로 넣어줌
➡️ 3) templates 폴더를 기준으로 뷰의 위치와 이름(thymeleafEx01.html)을 반환함

➡️ 1) Thymeleaf의 문법을 사용하기 위해서 추가
➡️ 2) ThymeleafExController의 model의 data라는 key값에 담아준 값을 출력. 이때 사용하는 Thymeleaf의 문법이 "th:text"임!

➡️ "대신" 대신 "타임리프 예제임!!" 출력
➡️ Thymeleaf가 지향하는 'natural templates" html 파일을 받아서 html 태그 안에Thymeleaf 문법 추가하는 것만으로 동적으로 html 파일로 생성 가능하다!

🛒 Spirng Boot Devtools

: 애플리케이션 개발 시 유용한 기능들을 제공하는 모듈

대표적인 기능

Automatic Restart
: classpath에 있는 파일이 변경될 때마다 애플리케이션을 자동으로 재시작해줌. 개발자가 소스 수정 후 애플리케이션을 재실행하는 과정을 줄일 수 있으므로 생산성을 향상시켜준다.

Live Reload : 정적 자원(html, css, js) 수정 시 새로고침 없이 바로 적용할 수 있다.

Property Defaults : Thymeleaf는 기본적으로 성능을 향상시키기 위해서 캐싱 기능을 사용. 하지만 개발하는 과정에서 캐싱 기능을 사용한다면 수정한 소스가 제대로 반영되지 않을 수 있기 때문에 cache의 기본값을 false로 설정할 수 있다.

➡️ 위의 기능을 추가하려면 pom.xml에 spring-boot-devtools 의존성 추가 후 "Reload All Maven Projects" 클릭

🛒 pom.xml에 의존성 추가하기

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
		</dependency>

<dependencies>사이에 추가</dependencies>

🛒 Automatic Restart 적용하기

(✔️ Registry에서 complier.automake.allow.when.app.running 항목이 없어서 세팅 다시 함!)
🛒 Live Reload 적용하기

Live Reload를 적용하면 브라우저의 새로고침을 하지 않아도 변경된 리소스가 반영

🛒 application.propertoes Live Reload 적용 설정 추가하기

➡️ Live Reload를 활용하며 애플리케이션 재구동 없이 웹브라우저에 반영
🛒 Property Defaults 적용하기

🛒 Thymeleaf 예제 진행하기

🛒 th:text 예제

com.shop 아래 경로에 dto 패키지를 생성 후 뷰 영역에서 사용할 ItemDto 클래서 생성 ➡️ 데이터를 주고받을 때는 Entity 클래스 자체를 반환하면 안되고 데이터 전달용 객체(Data Transfer Object)를 생성해서 사용해야 한다. 데이터베이스의 설계를 외부에 노출할 필요 없으며, 요청과 응답 객체가 항상 엔티티와 같지 않기 때문.

🛒 th:text를 이용한 상품 데이터 출력용 Dto 클래스

🛒 th:text를 이용한 상품 데이터 출력용 컨트롤러 클래스

🛒 th:text를 이용한 상품 데이터 출력용 thymeleaf 파일

🛒 th:each 예제
➡️ 1) 반복문을 통해 화면에서 출력할 10개의 itemDto 객체를 만들어서 itemDtoList에 넣어줌
➡️ 2) 화면에서 출력할 itemDtoList를 model에 담아서 View에 전달

➡️ 1) th:each를 이용하면 자바의 for문처럼 반복문 사용 가능! 전달받은 itemDtoList에 있는 데이터를 하나씩 꺼내와서 itemDto에 담아줌. status에는 현재 반복에 대한 상태 데이터가 존재함. 변수명은 status 대신 다른 것을 사용해도 된다.
➡️ 2) for문의 데이터 인덱스를 출력함

🛒 th:if, th:unless 예제

➡️ 1) status에는 현재 반복에 대한 정보가 존재함으로 인덱스가 짝수일 경우 status.even은 true가 됨. 인덱스가 짝수라면 짝수 출력
➡️ 2) 현재 인덱스가 짝수가 아닐 경우 홀수 출력
🛒 th:switch, th:case 예제
🛒 th:href 예제
✏️ th:href

: Thymeleaf에서 링크를 처리하는 문법
- Absolute URL
  : 이동할 서버의 URL을 입력해줌 'http://' , 'https://'
- Context-relative URL
  : 가장 많이 사용되는 URL 형식(우리가 실행하는 애플리케이션의 서부 내부 이동 방법) 웹 애플리케이션 루트에 상대적인 URL 입력(상대경로는 URL의 프로토콜이나 호스트 이름 지정하지 않음)

➡️ 1) "th:href=@{이동할경로}"
➡️ 2) 애플리케이션 외부의 사이트에 접근하는 절대 경로 입력

🛒 th:href 파라미터 데이터 전달용

➡️ 전달할 매개변수를 입력한 경로 끝에 "(key=value)" 구조로 입력함. 전달할 매개 변수 param1, param2에는 각각 데이터 입력.
➡️ 전달했던 매개변수와 같은 이름의 String 변수 param1, param2를 파라미터로 설정하면 자동으로 데이터가 바인딩됨. 매개변수를 model에 담아서 View로 전달.

🛒 Thymeleaf 페이지 레이아웃

🛒 Thymeleaf Layout dependency 추가하기

		<dependency>
			<groupId>nz.net.ultraq.thymeleaf</groupId>
			<artifactId>thymeleaf-layout-dialect</artifactId>
			<version>2.5.1</version>
		</dependency>  
  
<dependencies>사이에 추가</dependencies>

(✔️ WhiteLabel pasing 에러 발생
몇시간을 이거때문에 고생함,,🤐 footer header 둘 다 안뜨고 파싱에러까지 뜨고 버전 몇번을 바꾸고 했는데 결국 버전을 주석처리 하고 했더니 성공!) (✔️ 스프링부트 버전 문제로 의존성도 버전을 높여야 한다는 깃허브 참고)

➡️ 다른 페이지에 포함시킬 영역을 th:fragment로 선언

➡️ 1) layout 기능을 사용하기 위해 html 태그에 layout 네임스페이스 추가
➡️ 2) th:replace 속성은 해당 속성이 선언된 html 태그를 다른 html 파일로 치환한 것. fragments 폴더 아래의 header.html 파일의 "th:fragment=header"영역을 가지고 옴.
➡️ 3) layout에서 변경되는 영역을 fragment로 설정.
➡️ 4) footer.html 파일의 "th:fragment=footer" 영역을 가지고 옴
(✔️ th:replace="fragments/header::header
th:replace="~{/fragments/footer::footer}" 동일)