EJS (Embedded JavaScript templating)
- 자바스크립트가 내장되어있는 HTML 파일
- 템플릿 엔진이란, 템플릿을 읽어 엔진의 문법과 설정에 따라서 파일을 HTML 형식으로 변환시키는 모듈.
ejs는 HTML 태그처럼 자바스크립트 내용을 삽입할 수 있다.
이를 이용하면 페이지를 동적으로 생성되도록 더 효율적으로 코드를 작성할 수 있다.
일반적인 HTML 파일에서 스크립트 코드는 내부에 작성해야 하는 번거로움이 있었지만,
ejs는 지정된 태그를 사용해 스크립트 내용을 하나의 요소처럼 사용할 수 있게 한다.
가장 큰 장점은 서버에서 보낸 변수를 가져와서 사용할 수 있다.
기본 문법
- 주석 :
<%# ... %> - JS 코드 :
<% ... %> - 변수 출력 :
<%= ... %> - 파일 분할 :
<%-include('경로입력')%>- 페이지 내 반복되는 header나 footer등의 코드는 include를 사용하면 간편하게 레이아웃 작업을 할 수 있다.
<!DOCTYPE html>
<html>
<%- include(./head.ejs) %>
<body>
<h2>
<%= title %>
</h2>
<%- include(./footer.ejs) %>
<a href='/home/<%= products[i]._id%>'>
</body>
</html>Install
> npm install ejs Node.js 연동
const ejs = require('ejs');
// 뷰 엔진 설정 - express에서 사용할 템플릿 엔진을 설정.
app.set("view engine", "ejs");
// views -> 사용하는 템플릿 엔진 이 있는 디렉토리 설정
app.set('views ', path.join(__dirname,'views'));- 예시
// index.js
app.get("/", (req, res) => {
let person = {
name = "Son",
age = 30,
}
res.render("home",{ name });
});<!-- index.ejs -->
<h1> name : <%= person.name %> </h1>ejs-mate
- ejs 탬플릿 엔진을 위한 패키지
- layout을 통해 상용구 정의 가능, 상용구를 통해 콘텐츠 사이에 코드 삽입 가능
<%- include('경로입력') %>를 통해 분할이 가능하지만 번거로움- ejs-mate를 사용하면 사용하고 있거나 추가적으로 사용할 코드에 상용구 정의
Install
> npm i ejs-materequire
const ejsMate = require("ejs-mate");
// Express가 사용하고 있는 default 엔진 대신 사용
app.engine("ejs", ejsMate);Usage
<!-- /views/layouts/boilerplate.ejs -->
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Boilerplate</title>
</head>
<body>
<h1>BEFORE</h1>
<%- body %>
<h1>AFTER</h1>
</body>
</html><!-- /views/campgrounds/index.ejs -->
<% layout("layouts/boilerplate") %>
<h1>All Campgrounds</h1>
<div>
<a href="/campgrounds/new">Create Campground</a>
</div>
<ul>
<% for(let campground of campgrounds) {%>
<li>
<a href="/campgrounds/<%= campground._id %>"><%= campground.title %></a>
</li>
<% } %>
</ul>