Node.js | EJS 템플릿 엔진 | 템플릿 부분 결합

템플릿의 기본적인 사용법은 이제 알았다. 하지만 이것만으로는 템플릿로서의 기능은 충분하지 않다. 페이지를 표시하기 위해 템플릿을 렌더링하여 작성해 한다. 그 뿐이다.

템플릿 결합

예를 들어, 여러 페이지가 있는 사이트에는 전체의 구성을 기록한 템플릿을 제공하고 여기에 필요한 컨텐츠용의 템플릿을 끼워 넣어 표시하거나 한다(사실 이 싸이트도 그런 형태로 만들고 있다). 이러한 “전체 템플릿 안에 컨텐츠의 템플릿을 끼워 넣어 표시한다"라고 하는 것은 어떻게 할 수 있을까? 해보도록 하자.

기반이 되는 템플릿에는 앞에서 만든 hello.ejs을 그대로 사용한다. 이 템플릿에는 콘텐츠를 표시하는 부분에 <%- content %>라는 태그를 준비해 두었다. 것은 실제로 표시하는 내용의 템플릿을 준비해 두고, 그것을 여기에 끼워 넣어 출력하면, 콘텐츠만을 여러가지로 변경하여 페이지를 만들 수 있게 된다.

그럼 콘텐츠용의 템플릿으로 “content1.ejs"라는 파일을 만들어 보자. 내용은 아래의 예제로 올려 두었다. 작성 후에 Node.js 스크립트 파일과 같은 위치에 저장하도록 한다.

content1.ejs

<p>예제로 만든 탬플릿입니다.</p>
<p>다른 파일로 준비한 것을 읽어와서 사용합니다.</p>
<p><%= message %></p>

이 파일에는 콘텐츠로 표시할 내용을 HTML로 작성되어 있다. 또한 <%= message %>와 같이 템플릿용의 태그도 준비해 두었다.

이 content1.ejs을 앞전에 hello.ejs의 <%- content %>에 끼워 넣어 표시해 본다. 스크립트를 아래에 올려 두었고 작성 다시 변경하여 시도해 보도록 한다.

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,{
           message:"텍스트 메세지"
       })
   });
   res.writeHead(200, {'Content-Type': 'text/html'});
   res.write(hello2);
   res.end();
}

여기에서는 다음과 같은 순서로 표시를 작성한다.

  1. 서버를 만들기 전에, 미리 2개의 템플릿을 변수에 로드 둔다.

  2. 먼저 컨텐츠 템플릿(content1.ejs)를 render으로 렌더링한다.

  3. 페이지 전체의 템플릿 (hello.ejs)를 render 렌더링한다. 이때 content1.ejs을 렌더링한 데이터를 옵션의 값으로 반환한다.

  4. 렌더링된 데이터를 적어 낸다.

여러 템플릿을 조합하여 사용하는 경우의 기본은, “안에 있는 것을 먼저 렌더링하고, 그 결과를 옵션으로 지정하여 외부 렌더링을 한다"는 것이다.

어떤 템플릿 안에 다른 템플릿을 끼워 넣는 경우, “렌더링 끝난” 데이터를 끼워 넣는 것이 기본이다. 끼워 넣은 후에 렌더링하다고 생각하면, 끼워 넣은 템플릿 안에 태그가 렌더링 되지 않고 표시되어 버리거나 하기 때문에 조심해야 한다.