node.js 를 통해 웹어플리케이션 만들 때 express 에서 제공하는 기본 템플릿 엔진대신 ejs-mate를 사용하면 각 화면에서 내비게이션바 같이 boilerplate(상용구) 같이 반복적인 기능을 효율적으로 구성할 수 있는 layout 템플릿 기능을 사용할 수 있습니다.
다음과 같이 예시를 들어 어떻게 효율적으로 화면을 구성할 수 있는지 알아보겠습니다.
- ejs-mate 설치 및 사용환경 구성
- boilerplate 화면 만들기
- 다른 화면에 적용하기
https://www.npmjs.com/package/ejs-mate
ejs-mate
Express 4.x locals for layout, partial.. Latest version: 4.0.0, last published: a year ago. Start using ejs-mate in your project by running `npm i ejs-mate`. There are 23 other projects in the npm registry using ejs-mate.
www.npmjs.com
1. ejs-mate 설치 및 사용환경 구성
$ npm install ejs-mate app.js 파일에 ejs-mate 사용등록하고,
express 기본 엔진 대신 ejs 엔진을 사용하도록 합니다.
const ejsMate = require("ejs-mate");
app.engine("ejs", ejsMate);
2. boilerplate 화면 만들기
ejs-mate의 layout 사용하기 위해 views/layouts 디렉토리를 만들고, boilerplate.ejs 파일을 만듭니다.
이 파일은 모든 페이지 화면에서 공통적으로 사용하며, 단지 아래의 body 태그에 각 페이지별 변경되는 내용이 그대로 들어가게 됩니다.
<%- body -%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BOILERPLATE!!!</title>
</head>
<body>
<h1>BEFORE</h1>
<%- body -%>
<h1>AFTER</h1>
</body>
</html>모든 페이지에 적용되는지 확인해보기 위해 body 태그 앞 뒤로 h1 태그로 BEFORE / AFTER 를 붙여서 그대로 보여지는 지 확인해봅니다.
3. 다른 화면에 적용하기
홈화면에 해당하는 index.ejs 내용을 다음과 같이 수정합니다.
[수정전]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Campgrounds</title>
</head>
<body>
<h1>All Campgrounds</h1>
<div><a href="/campgrounds/new">Add Campground</a></div>
<ul>
<% for (let campground of campgrounds) { %>
<li>
<a href="/campgrounds/<%= campground._id %>"><%= campground.title %></a>
</li>
<% } %>
</ul>
</body>
</html>[수정후]
body에 해당되는 내용만 남기고 모두 삭제하고, 상단에 layout 태그내 boilerplate 파일 경로로 추가해 줍니다.
<% layout('/layouts/boilerplate') %>
<h1>All Campgrounds</h1>
<div><a href="/campgrounds/new">Add Campground</a></div>
<ul>
<% for (let campground of campgrounds) { %>
<li>
<a href="/campgrounds/<%= campground._id %>"><%= campground.title %></a>
</li>
<% } %>
</ul>
다른 화면들도 boilerplate 적용하려면 body 내용에 해당하는 내용만 남겨두고 삭제합니다.
주의 사항으로 boilerplate 내 body 태그명은 변경하지 않도록 합니다.
'자바스크립트(Javascript)' 카테고리의 다른 글
| Express 보안 - Helmet 사용하기 (0) | 2023.10.02 |
|---|---|
| 이미지 파일 저장하기 - multer (0) | 2023.09.23 |
| 평점 표현 하기 - Starability 라이브러리 (0) | 2023.09.18 |
| 유효성 검증 - Joi (0) | 2023.09.02 |
| bootstrap validation 폼(form) 태그에 적용하기 (0) | 2023.08.29 |
