[Node.js] Javascript ejs 템플릿 엔진

Inah-_-·2021년 8월 6일
1

Node.js

목록 보기
2/2
post-thumbnail

💡 EJS란?


Node.jsExpress에서 많이 사용되고 있는 템플릿 엔진이다.
사용자 수가 많은 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>
profile
Backend Developer

0개의 댓글