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가 간편하고 쓸만해 보인다.
댓글