Node.js | Express 프레임워크 | Express에서 템플릿 사용


우선, Express를 이용한 기본적인 처리의 흐름은 대체로 알 수 있었다. 이어서 템플릿을 이용하여 표시을 해 보도록 한다. 템플릿 파일을 준비하고, app.js 스크립트를 수정하면 가능할 것이다.

템플릿 준비

먼저 템플릿부터 작성한다. 이번에는 “test.ejs"라는 파일명으로 생성할 수 있다. 아래에 소스 코드를 올려 두었다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title><%=title %></title>
    <style>
    body { font-size:12pt; color:#000066; }
    h1 { font-size:18pt; background-color:#DDDDFF; }
    pre { background-color:#EEEEEE; }
    </style>
    </head>
<body>
    <header>
        <h1><%=title %></h1>
    </header>
    <article>
        <%-content %>
    </article>
</body>
</html>

이번에 작성한 test.ejs는 Web 어플리케이션에 그대로 배치는 하지 않는다. Web 어플리케이션의 폴더에 새로운 “views"라는 폴더를 준비한다. 그리고 이 폴더에 test.ejs을 넣어 둔다.

Express에는 화면 표시 관련 템플릿은 이렇게 “views"폴더에 정리 된다(설치 장소 및 폴더 이름은 변경할 수 있지만, 디폴드로 views라는 폴더로 되어서 여기에서는 그대로 작성한다).

만든 템플릿은 기본적으로 앞전에 EJS 템플릿과 거의 동일하다.

여기에서는 헤더 부분과 바디에 <%=title %>라는 제목을 출력하는 태그를 준비하고, 컨텐츠를 표시하기 위해 <%-content %>라는 태그를 준비하고 있다. Node.js의 스크립트에는 이러한 태그로 출력하는 title과 content 같은 변수에 값을 전달하는 방식으로 처리를 준비하면 된다.

템플릿 이용한 처리

그럼 Node.js 스크립트를 작성해 보도록 한다. app.js를 아래과 같이 작성한다.

var express = require('express');
var ejs = require("ejs");
  
var app = express();
  
app.engine('ejs', ejs.renderFile);
  
app.get("/", function(req, res){
    res.render('test.ejs',  {title: 'Test Page',  content: 'this is test.'});
});
  
var server = app.listen(3000, function(){
    console.log('Server is running!');
})

다시 “node app.js"에서 서버를 시작하고, localhost:3000에 액세스해 본다. 템플릿을 렌더링한 표시가 나타날 것이다.

템플릿 이용 포인트

이것으로 EJS을 사용한 템플릿 기능이 Express에서도 제대로 사용할 수 있게 되었다. 그럼 수정 사항을 체크해 보겠다.

EJS 로드

var ejs = require("ejs");

우선 먼저 require으로 EJS을 로드해야 한다. 이것은 이미 익숙한 작업이기 때문에 알것이다.

템플릿 엔진 설정

app.engine('ejs', ejs.renderFile);

템플릿 엔진을 설정한다. 이것은 Application 객체의 “engine"메소드를 사용하여 설정한다. 첫번째 인수는 템플릿 파일의 확장명을 두번째 인수에는 템플릿 엔진의 콜백 함수를 설정한다. 이 콜백 함수는 ejs 객체의 renderFile 프로퍼티를 설정한다. 이것으로 템플릿 엔진의 설정이 완료되었다.

GET 콜백 함수 준비

콜백 함수안에서 수행하고 있는 것은 EJS 템플릿을 사용한 페이지 표시이다. response의 render 메소드를 호출하고 있다.

res.render( 템플릿 파일, 객체 );

첫번째 인수에 사용하는 템플릿 파일 이름, 두번째 인수에는 템플릿에 전달할 변수 이름을 키로 값을 연관 배열로 정리하여 결합을 지정한다. 이것으로 페이지가 렌더링된다.

주의할 것은 템플릿 파일 이름이다. 이것은 “views"폴더에 저장되어 있어야 한다. 여기서 “views/test.ejs"와 같은 식으로 views 폴더의 경로를 쓸 필요는 없다. 다만 “test.ejs” 파일 이름만 지정하면 된다.

Express는 자동으로 “views"폴더에서 파일을 검색할 수있게 되어있는 것이다. 반대로, “views” 폴더가 아닌 어플리케이션 폴더안에 파일이 있거나 하면 발견되지 않고 오류가 발생되므로 주의한다.

자, 이것으로 우선 Express를 사용한 응용 프로그램의 기본은 알았다. 사용법만 알면, Node.js 단독으로 사용하는 것보다 전체가 정리되어 알기 쉬워진다.