[ 목차 ]
728x90
반응형
✔ 템플릿 엔진
템플릿 엔진
- 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어
- 서버 템플릿 엔진
- velocity : 과거 스프링에서 많이 사용하던 엔진. 현재 권장하지 않음
- freemarker : 템플릿 엔진으로 많은 기능을 지원. Apache 템플릿 엔진으로
템플릿 및 변경 데이터를 기반으로 텍스트, 메일, 파일등을 생성하는 Java 라이브러리를 제공
- thymeleaf : 스프링 부트에서 적극 지원하고 있는 엔진. 문법이 쉽지 않음. react, vue의 경험이
있다면 최적의 템플릿 엔진
- mustaches : 문법이 다른 템플릿 엔진보다 쉽다. 비즈니스 로직을 사용할 수 없음. view의 역할과
서버의 역할이 명확하게 구분됨
타임리프(Thymeleaf)
타임리프는 컨트롤러가 전달하는 데이터를 이용해 동적으로 화면을 만들어주는 역할을 하는 뷰 템플릿 엔진이다. 타임리프가 갖는 대표적인 특징은 다음과 같다.
✔ 서버상 동작하지 않아도 HTML 파일 내용을 바로 확인 가능
✔ 순수 HTML 구조를 유지
project 생성 시 Template Engines에서 Thymeleaf 선택한다.
resources에서 static에는 css, 이미지 등을 생성한다.
templates는 html을 생상한다.
✔ Index 메인페이지
<html lang="ko"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org/">
<!-- cafe_head.html -->
<div th:replace="cafe_head :: head"></div>"
<!-- cafe_head.html END-->
<body>
<div id="container">
<header>
<nav>
<ul>
<li><a href="#intro">카페소개</a></li>
<li><a href="#map">오시는길</a></li>
<li><a href="#choice">이달의 추천</a></li>
</ul>
</nav>
</header>
<section id="intro">
<div class="page-title">
<h1>카페소개</h1>
</div>
<div class="content">
<div class="photo"><img src="/이미지/coffee.jpg" alt="커피"></div>
<div class="text">
<p>영업 시간 : 오전 9시 ~ 밤 10시</p>
<p>휴무 : 매주 수요일 <i><small>(수요일이 공휴일인 경우 수요일 영업,
다음날 휴무)</small></i></p>
</div>
</div>
</section>
<section id="map">
<div class="page-title">
<h1>오시는 길</h1>
</div>
<div class="content">
<div class="photo"><img src="/이미지/map.jpg" alt="지도"></div>
<div class="text">
<p>서귀포시 안덕면 사계리 000-000</p>
<p>제주 올레 10코스 산방산 근처</p>
</div>
</div>
</section>
<section id="choice">
<div class="page-title">
<h1>이달의 추천</h1>
</div>
<div class="content">
<div class="photo"><img src="/이미지/ice.jpg" alt="추천"></div>
<div class="text">
<p>핸드드립 아이스 커피</p>
<ol>
<li>1인분 기준으로 서버에 각 얼음 5조각(한조각은 20cc) 넣고 추출을 시작한다.</li>
<li>평상시 보다 원두의 양은 2배정도(20g)와 추출액은 얼음 포함해서 200cc까지 내린다.</li>
<li>아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다.</li>
</ol>
</div>
</div>
</section>
<!-- cafe_head.html -->
<div th:replace="cafe_footer :: footer"></div>"
<!-- cafe_head.html END-->
</div>
</body>
</html>th:repalce ="cafe_footer :: footer는 replace(반복 부분을 대체) 이며 cafe_footer는 파일경로 :: footer는 파일 경로에 있는 반복 부분의 명칭을 의미한다.
✔ Head 부분
<html lang="ko"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org/">
<head th:fragment="head">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/cafe.css">
<title>카페소개</title>
</head>
✔ Footer 부분
<html lang="ko"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org/">
<footer th:fragment = "footer"><p>My time with Coffee</p></footer>자주 반복적으로 사용하는 부분을 따로 분리한다.
th:fragment = footer 는 fragment 즉 파편(반복 부분) 을 의미하고 이 명칭을 footer로 하겠다는 의미이다
나머지 html 부분은 타임리플르 사용하기 위한 부분이다.
✔ PageController 부분
package com.koreait.day7.controller.page;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller // 일반 컨트롤러 생성 경우
@RequestMapping("pages") // http://localhost:8888/pages
public class PageController {
@RequestMapping(path="/cafe") //http://localhost:8888/pages/cafe
public ModelAndView cafe(){
return new ModelAndView("/cafe_index.html");
}
}
✔ 결과화면
반응형
'Spring' 카테고리의 다른 글
| Spring Project Board(게시판) 1 (0) | 2023.01.02 |
|---|---|
| Spring 유용한 Setting, 사이트 (0) | 2022.12.29 |
| Spring Main Page Project (0) | 2022.12.18 |
| Spring Join (0) | 2022.12.13 |
| Spring (리스너, 연관 관계 메핑, 어노테이션) (0) | 2022.12.13 |
