4. Template Engine
템플릿 엔진이란 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성해 결과 문서를 출력하는 소프트웨어를 말합니다.
그 중 웹 템플릿 엔진이란 웹 템플릿과 컨텐츠 정보를 처리하기 위해 설계된 소프트웨어입니다.
대부분의 템플릿 엔진은 html보다 간단한 문법을 사용하고 재사용성이 높습니다.
또한 하나의 템플릿으로 여러 페이지를 렌더링할 수 있습니다.
4.1. Server Side vs Client Side
4.1.1. Server Side Template Engine
서버 사이드 템플릿 엔진은 DB 혹은 API에서 가져온 데이터를 미리 정의된 템플릿에 넣어 서버에서 html을 그립니다.
html 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿에 소스 코드를 끼워넣는 방식으로 동작합니다.
4.1.2. Client Side Template Engine
html 형태로 코드를 작성해 동적으로 DOM을 그리게 해주는 역할을 합니다.
클라이언트에서는 공통적인 프레임을 미리 템플릿으로 만들고 서버에서 필요한 데이터를 받아 적절한 위치에 replace합니다.
4.2. Mustache
저는 Spring Boot 프로젝트에 Mustache라는 마크업 언어를 사용할 것입니다.
"스프링 부트와 AWS로 혼자 구현하는 웹서비스"에서는 mustache를 사용하는 이유를 다음과 같이 소개합니다.
- mustache는 수많은 언어를 지원하는 가장 심플한 템플릿 엔진입니다.
- 문법이 다른 템플릿 엔진보다 심플합니다.
- 로직 코드를 사용할 수 없어 View와 서버의 역할이 명확하게 분리됩니다.
만약 템플릿 엔진에서 너무 많은 기능을 제공하면 api, 템플릿 엔진, js가 서로 로직을 나눠가져 유지보수가 어려워진다는 단점이 있습니다. - mustach.js와 mustache.java를 둘 다 지원해, 하나의 문법으로 클라이언트/서버 템플릿으로 모두 사용 가능합니다.
4.3. Mustache를 사용해봅시다
반복적으로 사용되는 코드는 별도의 파일로 분리하여 필요한 곳에서 가져다쓰도록 레이아웃 방식으로 추가합니다.
저는 책을 따라 header와 footer 파일을 만들었습니다.
- css는 화면을 그리는 역할이므로 먼저 로딩시키기 위해 header에서 부릅니다.
- js는 용량이 클수록 로딩이 느려 body 부분의 실행이 늦어지기 때문에 footer에 둡니다.
- bootstrap.js은 jquery.js에 의존하기 때문에 footer 내에서도 아래에 위치합니다.
//header.mustache
<!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.mustache
<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>이제 mustache 파일을 이용해 html을 구성해봅시다. 코드의 재사용성이 높아졌습니다.
{{>layout/header}}
<h1> 안녕하세요 여러분! </h1>
{{>layout/footer}}
references
* 스프링 부트와 aws로 혼자 구현하는 웹 서비스 - 이동욱님 (👍)
* <https://gmlwjd9405.github.io/2018/12/21/template-engine.html>
'Web Application > Backend' 카테고리의 다른 글
| [백엔드 시작하기] 6. 로그인 기능 구현하기 (0) | 2021.05.12 |
|---|---|
| [백엔드 시작하기] 5. 게시판 만들기 (0) | 2021.05.12 |
| [백엔드 시작하기] 3. Java Persistence Api (0) | 2021.05.12 |
| [백엔드 시작하기] 2. Testcode (0) | 2021.05.12 |
| [백엔드 시작하기] 1. Hello Backend (0) | 2021.05.12 |