Node.js Express EJS(Embedded JavaScript)

EJS(Embedded JavaScript)는 클라이언트 템플릿 언어이며, 이는 템플릿을 읽어 엔진의 문법과 설정에 따라서 파일을 HTML 형식으로 변환시키는 모듈이다. EJS는 HTML에서 <% %> 태그를 사용하여 서버의 데이터를 사용하거나 클라이언트에서 코드를 실행 할 수 있다.

디렉토리 구조

express_advanced/
├── data
│   └── user.json
├── node_modules
├── package.json
├── public
│   └── css
│       └── style.css
├── router
│   └── main.js
├── server.js
└── views
    ├── body.ejs
    ├── header.ejs
    └── index.ejs

EJS 는 Framework 가 아니고, 그저 클라이언트 템플릿이기 때문에, 서버의 디렉토리 구조는 Express Framework의 구조를 그대로 따라간다. 다만 EJS 를 사용하기 위해서 몇가지 설정이 바뀔 수 있다. 그러므로, [10] Express Framework 의 프로젝트를 그대로 복사해서 사용한다.

package.json 설정 및 모듈 설치

package.json

{
  "name": "express-advanced",
  "version": "1.0.0",
  "dependencies":
  {
    "express": "~4.13.1",
    "ejs": "~2.4.1"    ,
    "body-parser": "~1.14.2",
    "express-session": "~1.13.0"
  }
}

body-parser : POST 데이터 처리 [RESTful API 편에서 사용됨] express-session : 세션 관리 [세션 편에서 사용됨]

package.json 의 디펜던시 설정이 완료 되었다면, 명령어를 통해 모듈을 설치하자.

npm install

server.js

//include modules
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var session = require('express-session');
var fs = require("fs")
 
//set View, EJS
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
 
//Create Web Server:
var server = app.listen(3000, function(){
 console.log("Express server has started on port 3000")
});
 
//Static Files:
app.use(express.static('public'));
//BodyParser(RESTful API 편에서 사용됨):
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
//Session:
app.use(session({
 secret: '@#@$MYSIGN#@$#$',
 resave: false,
 saveUninitialized: true
}));
 
 
//bodyParser보다 뒤에 있어야 제대로 작동함:
var router = require('./router/main')(app, fs);

[32번 행]에서 app 객체 이외에, fs 객체도 추가되었기 때문에 main.js도 이를 수정해야 한다.

/router/main.js

module.exports = function(app, fs)
// ... 생략

EJS 문법

EJS에서는 두가지만 알면 된다.

<% JavaScript Code %> // JavaScript 실행
<%= JavaScript Object %> // JavaScript 객체 출력

라우터에서 뷰(View) 로 정보 전송하기

JSON 데이터를 render 메소드의 두번 째 인자로 전달함으로서 뷰(View) 단에서 라우터의 데이터를 출력할 수 있게 된다.

/router/main.js

module.exports = function(app, fs)
{
     app.get('/',function(req,res){
         res.render('index', {
             title: "MY HOMEPAGE",
             length: 5
         })
     });
}

데이터를 출력할 뷰(View) 를 생성하자. 확장자는 ejs 가 된다.

/views/index.ejs

<html>
  <head>
  <title><%= title %></title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <h1>Loop it!</h1>
    <ul>
        <% for(var i=0; i<length; i++){ %>
            <li>
                <%= "LOOP" + i %>
            </li>
        <% } %>
    </ul>
  </body>
</html>

밑줄 친 부분에서 라우터에서 전달한 JSON 객체의 데이터에 접근하고 있음을 확인할 수 있다.

title, length 가 제대로 출력되었음을 확인할 수 있다. 덤으로 <% %> 태그를 통해 JavaScript의 사용이 가능함을 확인했다.

Share on: