더 알아보기/개념

EJS란?

은돌1113 2022. 3. 1. 11:35

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 ejs

NodeJS와 연동 (= 데이터 넘겨주기)

 

🥕 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