EJS 템플릿 엔진은 html과 문법이 유사하다.
다른 템플릿 엔진인 jade는 html과 문법이 다르다는점에서 jade와ejs는 차이가있다.
npm프로젝트에서 npm install ejs 명령어로 설치한다.
ejs는 jsp와 문법이 비슷하다 <% %> 를 사용하여 서버의 데이터를 가져오거나 코드를 실행할수있다.
<% 자바스크립트코드 %>
<%= 자바스크립트 객체%>
app.js
| var express = require('express'); var app = express(); var fs = require('fs'); var bodyParser = require('body-Parser'); app.use(bodyParser.urlencoded({ extended : true})); app.locals.pretty = true; app.set('views','views_file'); // 정적 파일 위치 지정 app.set('view engine','ejs'); // 템플릿 엔진 세팅 app.get('/ejstest',function(req,res){ res.render('ejstest',{ title : 'title', num : 5}); }); app.listen(3000,function(){ console.log('Connected, 3000 port!'); }); |
ejstest.ejs
| <html> <head> <title><%= title %></title> //라우터에서 받은 객체의 title 값 사용 </head> <body> <h1>Loop</h1> <ul> <% for(var i = 0; i<num; i++){%> //라우터에서 받은 객체의 num 값 사용 <li> <%="Loop" + i%> </li> <%}%> </ul> </body |
<% %> 안에 for문을 넣어 사용할수도 있고 객체의 값을 꺼내올수도 있다.
<% include ejstest.ejs%> 를 사용하면 jsp의 include 처럼 다른 소스코드를 포함시킬수있다.
app.js의 라우터는 includetest.ejs 파일을 렌더링하고있다.
| app.get('/includetest',function(req,res){ res.render('includetest',{ title : 'title', num : 5}); }); |
includetest.ejs
| <% include ejstest.ejs%> |
includetest.ejs에 include 로 ejstest의 소스코드를 포함시켜 실행하면 ejstest.ejs 의 내용이 실행된다.
'Node.js' 카테고리의 다른 글
| node.js mysql 접속/SELECT/INSERT (0) | 2017.02.27 |
|---|---|
| 파일업로드 / multer (0) | 2017.02.27 |
| post 방식 데이터 전달 / 사용 (0) | 2017.02.26 |
| URL을 이용한 get방식 데이터 전달 / 사용 (0) | 2017.02.26 |
| jade 템플릿 엔진 (0) | 2017.02.26 |