💡 EJS란?
Node.js와 Express에서 많이 사용되고 있는 템플릿 엔진이다.
사용자 수가 많은 Jade 템플릿은 HTML과 작성법이 많이 다른 반면,
ejs는 기존의 HTML 문법에 한해서 <% %>를 사용하여 크게 벗어나지 않아
더욱 쉽게 서버의 데이터를 사용하거나 코드를 실행할 수 있는 장점이있다.
EJS <% %>?
// <% js 코드 %>
<% for(i=0; i < board.length; i++) { %>
// <%= 변수명 %>
<%=i+1 %>
<a href='/board/<%= board[i]._id%>'>
Include ?
<%-include('경로입력')%>
경로 = header or footer 등
페이지 내 반복되는 header나 footer등의 코드는 include를 사용하면
간편하게 레이아웃 작업을 할 수 있다.
<header>
<% include ./header %>
</header>
<body>
<p>Welcome to templating using EJS</p>
</body>
<footer>
<% include ./footer %>
</footer>routing
// 예시
// 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>
Backend Developer