Node.js | EJS 템플릿 엔진 | 배열 데이터 반복 출력

EJS 템플릿에서는 <% %> 태그를 사용하여 JavaScript 스크립트를 실행시킬 수 있다. 이는 서버에서 렌더링할 시에 실행되기 때문에, 브라우저에 실제로 표시되는 페이지에는 나타나지 않는다. 스크립트의 실행 결과가 표시될 뿐이다.

<% %>에 의한 스크립트를 작성하는 경우, 주의해야 할 점이 몇 가지 있다. 정리하면 아래와 같다.

  1. <% %> 내에 뭔가를 작성하여도 표시되지 않는다. 그 경우는 일단 태그를 빠져 나와서, <%= %> 태그로 값을 출력해야 한다. <% %> 태그 안에 <%= %> 태그를 사용할 수 없다.

  2. JavaScript 스크립트이지만, 일반적인 JavaScript 기능에는 사용할 수 없는 것도 있다. 예를 들어, Date 및 Math 등의 개체는 사용할 수 있지만, alert 같이 브라우저 의존 기능은 사용할 수 없다. 또한 document 등 DOM을 조작하는 기능도 사용할 수 없다.

  3. 스크립트에서 렌더링할 때에 전달되는 변수의 값은 그대로 <% %> 안에서 변수로 사용할 수 있다.

그러면, 실제로 간단한 예제를 만들어 보자. 먼저 content1.ejs의 내용을 아래와 같이 변경해 보도록 한다.

content1.ejs

<p>예제로 만든 탬플릿입니다.</p>
<p>배열 데이터를 반환하여 목록으로 표시한다.</p>
<p><ol>
<% data.forEach(function(val){ %>
    <li><%= val %></li>
<% }) %>
</ol></p>

sampleapp.js

var http = require('http');
var fs = require('fs');
var ejs = require('ejs');
 
var hello = fs.readFileSync('./hello.ejs', 'utf8');
var content1 = fs.readFileSync('./content1.ejs', 'utf8');
 
var server = http.createServer();
server.on('request', doRequest);
server.listen(1234);
console.log('Server running!');
 
// 요청 처리
function doRequest(req, res) {
    var hello2 = ejs.render(hello, {
        title: "제목입니다.",
        content: ejs.render(content1, {
            data: [
                "이것은 최초의 데이터입니다.",
                "다음 데이터이다.",
                "제일 마지막의 데이터이다."
            ]
        })
    });
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(hello2);
    res.end();
}

여기에서는 data의 내용을 꺼내어 표시하는 처리를 <% %> 이용하여 작성하고 있다.

이어서 Node.js 스크립트를 아래에 올린 것처럼 수정한다. 그리고 실제로 액세스해 본다. 배열에 포함된 데이터가 목록으로 표시된다.

여기에서는 render 메소드의 인수에 “data"값을 포함하고 있다. 이것은 보면 알 수 있듯이 텍스트의 배열이 설정되어 있다. 이 배열의 값을 순서대로 얻어서 표시하는 것이다. 출력되는 부분을 보면,

<% data.forEach(function(val){ %>
    <li><%= val %></li>
<% }) %>

이렇게 되어 있다. <% %> 태그를 사용하여 반복 처리를 작성하고 있다. “forEach"라고 하는 낯선 메소드가 사용되고 있는데, 이것은 배열(Array 객체)에 있는 메소드에서, 배열에서 요소를 차례로 얻어와서 인수의 함수를 실행하는 것이다. 얻어온 값은 인수의 함수에 인수로 전달된다. 움직임을 잘 모르는 사람은 다음과 같이 작성을 변경하여도 된다.

<% for (var i = 0;i < data.length;i++){ %>
    <li><%= data[i] %></li>
<% } %>

구문의 값을 내보낼 부분은 <%= %> 태그로 되어 있다. <% %>를 사용하는 경우에는 이와 같이 “처리 부분만 <% %>에 쓰고, 그 출력은 <%= %>에 작성"하는 것과 같이, 처리 및 출력을 제대로 분리하여 생각할 필요가 있다라는 것을 잊지 않도록 하자.