💡 웹 계층 개발
- 홈 화면과 레이아웃
- 회원 등록
- 회원 목록 조회
- 상품 등록
- 상품 목록
- 상품 수정
- 변경 감지와 병합(merge)
- 상품 주문
- 주문 목록 검색, 취소
💡 Thymeleaf란
-
view template: JSP과 같은 템플릿 엔진의 일종 -
서버 사이드 HTML 렌더링(SSR)
- 백엔드 서버에서
HTML을 동적으로 렌더링하는 용더로 사용됨 controller가 전달하는 데이터를 이용하여 동적으로 화면을 구성함- html의 태그를 기반으로
th:속성을 이용하여 동적인 view를 제공해줌
- 백엔드 서버에서
-
Natural templates
- 순수 HTML을 최대한 유지하는 특성을 갖기 때문에, 타임리프로 작성한 파일은 HTML을 유지해서 웹 브라우저에서 파일을 직접 열어서 내용을 확인하거나 서버를 통해 뷰 템플릿을 거쳐서 동적으로 변경된 결과를 확인할 수 있음
-
스프링 통합 지원
- 스프링과 통합되어 있기 때문에 JSP보다 타임리프 사용을 권장함
-
HTML 태그에
th:*속성을 지정하는 방식으로 동작th:*로 속성을 적용하면 기존 HTML 속성을 대체하고 기존 속성이 없으면 새로 만듦
1. 홈 컨트롤러 등록
package jpabook.jpashop.controller;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@Slf4j
public class HomeController {
@RequestMapping("/")
public String home(){
log.info("home controller");
return "home";
}
}return "home"home.html찾아가서 그 타임 리프 파일을 찾아가게 됨
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
Logger log = LoggerFactory.getLogger(getClass());- 위와 같은 코드를 작성하는 대신에
lombok의@Slf4jannotation을 사용하여 로그를 남길 수 있음
1) 스프링 부트 타임리프 기본 설정
spring:
thymeleaf:
prefix: classpath:/templates/
suffix: .html- 스프링 부트 타임리프 viewName 매핑
resources:templates/ +{ViewName}+ .htmlresources:templates/home.html
- 반환한 문자(
home)과 스프링부트 설정prefix,suffix정보를 사용해서 랜더링할 뷰(html)을 찾음
2. 타임리프 템플릿 등록
resources/templates/hello.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header">
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
<div th:replace="fragments/bodyHeader :: bodyHeader" />
<div class="jumbotron">
<h1>HELLO SHOP</h1>
<p class="lead">회원 기능</p>
<p>
<a class="btn btn-lg btn-secondary" href="/members/new">회원 가입</a>
<a class="btn btn-lg btn-secondary" href="/members">회원 목록</a>
</p>
<p class="lead">상품 기능</p>
<p>
<a class="btn btn-lg btn-dark" href="/items/new">상품 등록</a>
<a class="btn btn-lg btn-dark" href="/items">상품 목록</a>
</p>
<p class="lead">주문 기능</p>
<p>
<a class="btn btn-lg btn-info" href="/order">상품 주문</a>
<a class="btn btn-lg btn-info" href="/orders">주문 내역</a>
</p>
</div>
<div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html><head th:replace="fragments/header :: header">
<div th:replace="fragments/bodyHeader :: bodyHeader" />
<div th:replace="fragments/footer :: footer" />-
자주 사용하는 부분들을 header, bodyHeader, footer로 나눠서 import를 해서 사용
-
hello.html 파일이 위치한 templates 하위에 fragments 디렉터리를 새로 생성한 후 그 하위 파일로 header, bodyHeader, footer 생성
-
home 실행 테스트
- 작성했던 로그가 그대로 찍혔고, 아직 다른 html 파일을 생성하지 않았기 때문에 화면을 넘어가면서 오류가 발생했다는 것을 확인할 수 있음
home.html
<head th:replace="fragments/header :: header">fragements/header.html
<head th:fragment="header">- home controller에서
th:replace로 지정한 위치fragments/header에서th:fragment="header"를 찾아서 들고와서 home에 replace 해줌
- header, bodyHeader, footer가 모두 home에
replace되어서 화면에 뿌려짐
3. view 리소스 등록
Bootstrap 사용 : https://getbootstrap.com/docs/5.3/getting-started/download/
- Bootstrap에서 다운받은 파일을
resources/static아래에 옮겨 놓은 후 project를 한 번 빌드해준 뒤에 application을 실행해줘야 함
- 디자인이 예쁘지는 않지만 그래도 html만 뿌려준 것보단 나아짐...ㅎ
Backend development
멋지네요