템플릿 엔진이란 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 말한다.
그 중, 서버에서 구동되는 서버 템플릿 엔진으로는 JSP, Freemarker 등이 있고,
브라우저 위에서 작동하는 클라이언트 템플릿 엔진으로 Javascript, vue, React 등이 있다.
머스테치(Mustache)란 수많은 언어를 지원하는 심플한 템플릿 엔진이다.
문법이 심플하고 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능하다.
머스테치를 이용한 화면 구성은 레이아웃 방식으로 header, 본문, footer로 나누자.
header는 아래와 같이 구성하고
<!DOCTYPE HTML>
<html>
<head>
<title>스프링부트 웹서비스</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>footer는 아래와 같이 구성한다.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--index.js 추가-->
<script src="/js/app/index.js"></script>
</body>
</html>눈여겨 볼 점은 부트스트랩을 이용한 CSS는 header에, js는 footer에 둔 점이다.
이는 페이지 로딩속도를 높이기 위함이다.
HTML은 위에서부터 코드가 실행되기때문에 head가 끝난 후에 body가 실행된다.
따라서 js를 상단에 두면 로딩에 속도가 오래 걸리고, 로딩을 하는 동안 흰 화면만 보이기 때문에,
CSS를 이용해 화면을 먼저 표시한 후, 기능을 위한 js는 나중에 로딩하는 것이다.
이제 본문 코드 index.mustache를 보면 아래와 같다.
{{>layout/header}}
<h1>스프링 부트로 시작하는 웹 서비스 Ver.2</h1>
{{>layout/footer}}{{> }}는 현재 본문 파일 index.mustache을 기준으로 다른 파일을 가져오는 문법이다.
레이아웃으로 헤더와 푸터를 분리했기때문에 위와 같이 호출해서 내용을 구성한다.
머스테치를 이용해 게시글 등록/수정/삭제 등의 화면 표시는 github를 참고하자.
github/SpringBoot : https://github.com/chosh95/Spring_Boot
chosh95/Spring_Boot
스프링 부트 공부. Contribute to chosh95/Spring_Boot development by creating an account on GitHub.
github.com
'프로그래밍 이론 & 책 > 스프링 부트와 AWS로 혼자 구현하는 웹 서비스' 카테고리의 다른 글
| [Spring Boot] JPA (0) | 2020.04.29 |
|---|---|
| [Spring Boot] 시작 & 테스트 코드 작성 (0) | 2020.04.28 |