템플릿 엔진인 EJS에 대해서 알아보도록 하겠습니다.

템플릿 엔진

템플릿 엔진이란, 템플릿을 읽어 엔진의 문법과 설정에 따라서 파일을 HTML 형식으로 변환시키는 모듈입니다. NPM Express에서 가장 많이 사용하는 템플릿은 엔진은 Jade이며 기존의 HTML에 비해 작성법이 완전 다른데, 그에 비해 EJS는 똑같은 HTML에서 <% %> 를 사용하여 서버의 데이터를 사용하거나 코드를 실행 할 수 있습니다.

EJS

기존의 HTML을 그대로 사용할 수 있으며 <% %>를 이용하여 데이터를 전달하거나 받을 수 있습니다

  1. <% Javascript Code %>
  2. <% Javascript Object for output%>

설치

$ npm install ejs

사용법

// app.js

var express = require('express');
var app = express();

app.set('view engine', 'ejs'); // view engine으로 ejs를 사용하겠다는 의미

View로 데이터 넘기기

// app.js, index.ejs에 title이란 키워드로 'Hello EJS'란 메시지를 전달 
express.render = function(req, res) {
    res.render('index', {title : 'Hello EJS'});
}

<!-- index.ejs, app.js에서 전달 받은 title의 메시지를 받아서 <h1> 에 넣어줌 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <h1><%= title %></h1>
</body>
</html>

include를 이용해 EJS 분할하기

PHP 같이 EJS에서도 <% include 파일명 %>를 이용하여 코드를 분할할 수 있습니다.

<!-- index.ejs -->
<html>
    <head>
        <% include ./header.ejs %>
    </head>
    
    <body>
        <% include ./body.ejs %>
    </body>
</html>

<!-- header.ejs -->
<title>
    <h1> Hello World </h1>
</title>

<!-- body.ejs -->
<ul>
    <% for(var i = 0; i < length; i++){ %>
        <li>
            <%= "LOOP" + i %>
        </li>
    <% } %>
</ul>