EJS란?
Embedded JavaScript Template의 약자로써
NodeJS와 Express에서 많이 사용하고 있는 템플릿 엔진입니다.
사용자 수가 많은 Jabe 템플릿은 HTML과 작성법이 많이 다른 반면에
ejs는 기존의 HTML 문법에 한해서 <% %>를 사용하여 크게 벗어나지 않아
더욱 쉽게 서버의 데이터를 사용하거나 코드를 실행 할 수 있다는 장점이 있습니다.
기본 문법
- 주석 : <%# %>
- JS 코드 : <% %>
- 변수 출력 : <%= %>
(HTML Escape 처리 : >를 $gt로 변환)
- 태그 내부 공백 제거 : <%_ _%>
- HTML Escape를 안하고 변수 출력 : <%- -%>
// <% js 코드 %>
<% for(i=0; i < board.length; i++) { %>
// <%= 변수명 %>
<%=i+1 %>
<a href='/board/<%= board[i]._id%>'>npm/yarn을 사용하여 ejs 설치
$ npm install ejs
or
$ yarn add ejsNodeJS와 연동 (= 데이터 넘겨주기)
🥕 express 없이 연동하기
const ejs = require('ejs');
ejs.render(경로, 데이터, 옵션);
🥕 express에서 연동하기
app.js에서
app.set("view engine", "ejs");처리하는 라우터에서 아래와 같은 로직이 있으면 된다.
const data = {title: "ejs init", message: "Hello World"};
res.render("index.ejs", data);
🥕 예시
// 예시
// app.js
var express = require('express');
var routes = require('./routes/index');
var app = express();
// view engine 템플릿 사용을 명시합니다.
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use('/', routes);
app.use('/test', routes);
// routes/index.js
var express = require('express');
var router = express.Router();
// /test로 uri가 들어오면 'test'로 render,
// title에 Hello World 출력
router.get('/test', function(req, res) {
res.render('test', {
title: 'Hello World!'
});
});
// 모듈 내보내기
module.exports = router;<!-- test.ejs -->
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>EJS 란
EJS = Embedded JavaScript Template nodejs 진영에서 많이 사용하는 템플릿엔진이다. 문법이 단순하다. ejs 는 html 안에서 <% %>를 이용해서 서버의 데이터를 사용하거나 코드를 실행할 수 있다. 기본 문법 주
doing-nothing.tistory.com
[Node.js] Javascript ejs 템플릿 엔진
[TIL] Node.js와 Express에서 많이 사용되고 있는 템플릿 엔진ejs
velog.io
'더 알아보기 > 개념' 카테고리의 다른 글
| JS의 메모리 누수 (0) | 2022.06.15 |
|---|---|
| EJS Include란? (0) | 2022.03.01 |
| Git fork vs clone (0) | 2022.02.05 |
| 옵셔널 체이닝 → ?. (0) | 2022.02.05 |
| 아토믹 디자인 패턴 (Atomic Design Pattern) (0) | 2022.01.27 |
댓글