학원에서 배운 서버템플릿엔진 : JSP
독학중이었던 템플릿엔진 : tymeleaf
사용결정된 템플릿엔진 : 머스테치
학원에서는 JSP 사용하는 방법을 배웠었고,
학원 종료 후 시작할 개인 프로젝트 [뜨개장터] 에서는 타임리프를 사용할 계획으로 공부중에 있었다
(실제로 타임리프로 index 정도는 만들어놓은 상태이다)
스프링부트 책을 읽고 머스테치를 사용해보기로 최종결정했다
결정사유는 다음과 같다 🔽
JSP : 스프링부트에서 권장하지않는 템플릿엔진임
Thymeleaf : 문법이 어렵다고 함
Mustache : 문법이 다른 엔진들에 비해 심플함
로직코드를 사용할 수 없어 view 와 서버의 역할이 명확하게 분리됨
Controller 에서 URL 매핑을 할 때 앞의 경로와 뒤의 파일 확정자는 자동으로 지정된다
앞 경로 : src/main/resources/templates
뒤 파일 확장자 : .mustache
근데 !!
thymeleaf 에서 mustache 로 변경하는 도중 org.thymeleaf.exceptions.TemplateInputException 에러가 자꾸 발생한다 .. ㅠ
▶ 템플릿엔진 thymeleaf => mustache 변경 시 TemplateInputException 에러
해결
1. build.gradle 에서 thymeleaf 관련 코드 삭제
2. 설정 > 플러그인에서 thymeleaf 비활성화
아놔 저 이것때문에 몇시간 날렸게요 .... 3시간ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
안웃김
ㅠ
▶ 템플릿엔진 mustache 사용 시 한글깨짐
build.gradle 에서 스프링부트 버전을 2.6.7 로 다운그레이드
※ 머스테치 include
▷ 폴더구조
▶ top
<!doctype html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Ogani Template"/>
<meta name="keywords" content="Ogani, unica, creative, html"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>index</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;900&display=swap" rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="/css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/main.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="header__logo">
<a href="/knitmarket"><img src="/img/LOGO.png" alt="로고사진" id="logo"></a>
</div>
</div>
<div class="col-lg-6">
<nav class="header__menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Pages</a>
<ul class="header__menu__dropdown">
<li><a href="#">테스트</a></li>
<li><a href="#">Shoping Cart</a></li>
<li><a href="#">Check Out</a></li>
<li><a href="#">Blog Details</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="col-lg-3">
<div class="header__cart">
<ul>
<li><a href="#"><i class="fa fa-heart"></i> <span>1</span></a></li>
<li><a href="#"><i class="fa fa-shopping-bag"></i> <span>3</span></a></li>
</ul>
</div>
</div>
</div>
<div class="humberger__open">
<i class="fa fa-bars"></i>
</div>
</div>
</header>
▶ bottom
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="footer__about">
<div class="footer__about__logo">
<a href=""><img src="" alt=""></a>
</div>
<ul>
<li>Address: 60-49 Road 11378 New York</li>
<li>Phone: +65 11.188.888</li>
<li>Email: hello@colorlib.com</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/d4af3bb512.js" crossorigin="anonymous"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
▶ index
{{>layout/top}}
<!--페이지소스 시작-->
<section class="hero">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="hero__categories">
<div class="hero__categories__all">
<i class="fa fa-bars"></i>
<span>All departments</span>
</div>
<ul>
<li><a href="#">테스트</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit & Nut Gifts</a></li>
<li><a href="#">Fresh Berries</a></li>
<li><a href="#">Ocean Foods</a></li>
<li><a href="#">Butter & Eggs</a></li>
<li><a href="#">Fastfood</a></li>
<li><a href="#">Fresh Onion</a></li>
<li><a href="#">Papayaya & Crisps</a></li>
<li><a href="#">Oatmeal</a></li>
<li><a href="#">Fresh Bananas</a></li>
</ul>
</div>
</div>
<div class ="hotItemDiv">
</div>
</div>
</div>
</section>
<!--페이지소스 끝-->
{{>layout/bottom}}
'프로젝트' 카테고리의 다른 글
| [SpringBoot & JPA 프로젝트] common/message (0) | 2022.08.11 |
|---|---|
| [SpringBoot & JPA 프로젝트] requestRejectedException / Error executing DDL / FileNotFoundException (0) | 2022.08.11 |
| [SpringBoot & Mybatis 프로젝트] 비대면 세탁 서비스 LAUNER (0) | 2022.07.22 |
| [ Spring Boot 프로젝트 ] 결제하기 / 결제완료 문자발송 (0) | 2022.07.14 |
| [ Spring Boot 프로젝트 ] 포인트 로직 (0) | 2022.07.12 |