Frameworks/Express.js

4-2. Express 템플릿 - EJS

양디 2016. 1. 16. 00:32

EJS?

이번 포스트는 저번 포스트에 이어서 Express의 템플릿 엔진에 대해서 공부한다.


EJS 는 Embedded JavaScript 의 약자로, 내부에 javascript 를 집어 넣어둔다는 의미인데, 사실 조금 다르다.

사용법

사용법은 크게 EJS 문서 내부의 문법과 Render 할 때에 변수(또는 object)를 넘기는 두가지를 알면 됩니다.



EJS!

문서 내부에서는 위에서 처럼 JSP와 유사한 방식을 사용합니다.


<% 임시로 작동할 코드들 %>


<%= 라우터에서 받은 객체들, escaped character%>


<%- unescaped character%>



따라서 예시는 다음과 같다. 

1
2
3
<% if (user) {%>
    <h2><%= user.name%></h2>
<% }%>
cs

만약 Render할 때에 user라는 객체를 넘겨 받았다면,

<h2>태그 안에 user.name 을 출력시킨다.


<% %> 내부에는 보통 조건문, 반복문을 주로 사용하고


<%= %>가 매우 유용하게 쓰인다.


html로 띄우기 전에 <%%> 내부를 먼저 수정하므로 html의 속성들 속에도 들어갈 수 있고, 서버에서 일어나는 작업들을 html에서는 숨길 수 있다.


문서를 Render할 떄에 객체를 넘기는 것은 Router에서 해주어야 한다.


1
2
3
router.get('/skin'function(req, res, next){
  res.render('skin');
});
cs


위의 코드는 render할 때에 넘기는 객체 없이 skin.ejs 파일을 html로 컴파일한다.


1
2
3
router.get('/skin'function(req, res, next){
  res.render('skin', {user:{name:'Dalkom'}});
});
cs


위와 같이 사용하면 user라는 객체를 넘기는데, json 형태로 넘어가기 때문에 내부 조건들에 접근할 수 있다.


jade는 너무 적응하기가 어려워서 ejs가 간편하고 쓸만해 보인다.









댓글