Node.js | EJS 템플릿 엔진 | EJS에 의해 템플릿 표시

Tags:

그럼 준비한 템플릿 파일을 로드하여 Web 페이지를 표시해 보자. 여기에는 몇 가지 작업이 필요하다.

파일 가져 오기. EJS 자체에 파일을 로드 기능은 없다. 로드는 fs 객체를 이용하게 된다. (다만, 이번에는 비동기가 아니라 동기화 메소드를 사용하여 이전 readFile보다 간단한 스크립트을 작성할 수 있다.)
가져온 템플릿 데이터의 렌더링. 그것으로 템플릿에 있는 <%= %> 태그 등의 특수 태그가 실제로 출력되는 텍스트로 변환된다.
생성된 데이터를 응답에 작성하여 완료한다.

결국, EJS는 템플릿 엔진이 수행해 주는 것는 2번 렌더링 부분뿐 나머지는 보통의 Node.js 기능을 사용하여 처리해야 한다는 것이다.

그럼, 방금 만든 hello.ejs을 렌더링하고 표시하는 스크립트를 만들어 보도록 하자. 아래에 샘플을 올려두기에, 이를 작성하고 움직여 보자. 제목과 내용 부분에는 스크립트 측에서 준비해 놓은 텍스트를 끼워 넣어 표시되는 것을 알 수 있을 것이다. 동작을 확인한 후 스크립트의 포인트를 확인한다.

var http = require('http');
var fs = require('fs');
var ejs = require('ejs');
 
var hello = fs.readFileSync('./hello.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:"이것은 샘플에서 만든 템플릿입니다.",
    });
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(hello2);
    res.end();
}

ejs 읽어오기

var ejs = require('ejs');

먼저 EJS 라이브러리를 로드한다. 이것은 require 함수에서 “ejs"를 인수로 지정한다. 여기에서 얻은 ejs 개체를 사용하여 템플릿 렌더링을 수행한다.

동기화 방식으로 파일 로드

var hello = fs.readFileSync('./hello.ejs', 'utf8');

fs 개체를 사용하여, 템플릿 파일을 로드한다. 여기에서는 readFile 대신 “readFileSync"라는 메소드를 사용하고 있다. 기본적으로 readFile과 동일하지만, 비동기가 아닌 동기화에서 가져온다. 즉,이 메소드를 호출하여 파일을 로드하고, 그것이 완료될 때까지 계속 진행한다는 것이다.

동기화이기 때문에, 읽기 끝나면 호출하는 “콜백 함수"는 없다. 끝나면 그대로 이어 스크립트를 실행하기 때문에 콜백는 필요없다.

“하지만, 파일로드 시간이 걸릴 수도 있기 때문 비동기하지 않으면 다른 처리가 멈춰 버린다……” 라고 생각하는 사람이 있을 것이다. 그렇다. readFileSync 실행 중에는 다른 프로세스가 있었다고 하더라도 정지중이다. 하지만, 이를 호출하는 곳을 살펴보자. http.createServer에서 서버를 만들기 전에 파일로드를 끝 마치고 있는 것을 알 수 있다.

템플릿이라고 하는 것은, 요청이 있을 때마다 사용하는 것이라면, 최초에 글로벌 변수에 로드해 놓고 사용하는 것이 절대적으로 편한다.

템플릿을 렌더링하기

var hello2 = ejs.render(hello, {
    title:"타이틀입니다",
    content:"이것은 샘플에서 만든 템플릿입니다.",
});

템플릿 렌더링을 하는 것이 ejs 개체 “render"메소드이다. 이것은 정리하면 다음과 같이 된다.

ejs.render(템플릿 데이터, 옵션);

첫번째 인수 : 렌더링 대상 데이터 (=가져온 템플릿 문자열)을 지정한다.
두번째 인수 : 템플릿에 전달하는 변수 등의 정보를 연관 배열에 모은 것을 지정한다.

포인트는 두번째 인수이다. 방금 템플릿에 title과 content라는 변수를 출력하도록 태그를 마련한 것을 기억해 내자. 이러한 변수가 연관 배열에 포함되어있는 것을 알 수 있을 것이다. 이와 같이, 두번째 인수에 변수의 값을 제공하고, render하여 템플릿 측에 있는 그 변수에 값이 대입되는 것이다.

헤더 정보에 ‘Content-Type’: ’text/html’을 설정

res.writeHead(200, {'Content-Type': 'text/html'});

마지막으로 잊지 말아야 것이, writeHead에 의해 헤더를 출력한다. Content-Type에 “text/html"을 설정한다. 그러면 응답에 기록되는 내용이 HTML임을 알 수 있다.

최종 수정 : 2018-07-16