Node.js | Express : Template Engine

Notice

Recent Posts

Recent Comments

Link

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

공부하는 블로그

Node.js | Express : Template Engine 본문

Node.js

Node.js | Express : Template Engine

치킨닮은닭 2019. 12. 28. 03:29

Template Engine

템플릿 엔진(Templete Engine)은 PHP나 JSP처럼 동적인 결과를 정적인 파일(HTML)에 담기 위해 사용한다. 즉, 서버 코드인 Javascript로 연산된 결과를 변수에 넣고 변수를 뷰(view) 파일에서도 사용할 수 있도록 도와준다. 따라서 서버파일(app.js) 내에 HTML 코드를 쓰지 않아도 되므로 뷰와 서버 코드를 따로따로 관리할 수 있도록 해준다. 이러한 템플릿 엔진의 종류에는 pug(구 jade)와 ejs가 있다.

템플릿 엔진을 사용하기 위해서는 npm을 이용하여 사용할 엔진을 설치해주어야 한다.

$ npm install pug
$ npm install ejs

설치가 끝나면 사용할 템플릿 엔진을 서버에 등록하여 사용할 수 있다.

app.set('view engine', 'ejs');	// 원하는 엔진을 템플릿 엔진으로 사용하기 위한 설정
app.set('views', './views');	// view 파일들이 모여있는 폴더 지정

위의 예시는 ejs를 기준으로 하였다. pug를 사용하고자 한다면 'ejs'를 'pug'로 변경해주자. 이제 원하는 서버데이터가 전송된 뷰를 클라이언트에게 응답해주기 위해서는 'res.render()'를 이용하면 된다.

PUG

PUG는 기존의 HTML을 더욱 간결하게 만든 코드로 Javascript 코드를 사용하기 위해서는 'Hyphen(-)'을 코드 앞에 붙여주어야 한다. 그리고 서버 사이드의 코드를 가져올 경우에는 태그 뒤에 '= '를 붙여야 한다. PUG는 코드를 간결화한 덕분에 가독성이 좋고 코드량이 적어 생산성이 좋다는 장점이 있다.

HTML 코드와 차이점은 다음과 같다.

· 태그(Tag)의 꺽쇠기호 '<>'를 표시하지 않는다.
· 닫는 태그가 없이 여는 태그만 존재하여 들여쓰기(Tab키)를 이용하여 종속성을 구분한다.
· 페이지에 나타낼 텍스트 문자열은 앞에 '|'를 붙여주어야 한다.
· id나 class를 선언하기 위해서는 CSS의 기본 선택자를 사용하면 된다. (id '#', class '.' )
· 태그 없이 id나 class만 선언하면 자동으로 div 태그가 생성된다.
· 태그에 속성을 부여할 때에는 괄호 '()'를 이용한다.
· Script나 CSS로 태그를 사용할 때에는 끝에 '.'을 입력한다.

PUG를 이용하여 간단한 동적 뷰를 만들어보자.

app.js

var express = require('express');
var app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'pug');

app.get('/', function (req, res) {
    res.render('template.pug', {title:'PUG : EXPRESS TEMPLATE ENGINE'});
});

app.listen(3000, function () {
    console.log('Server running on port 3000...');
});

먼저 익스프레스를 이용하여 서버를 구축한 후 뷰 폴더의 경로를 지정해주고 템플릿 엔진을 PUG로 설정하였다. 그 후 라우터에서 'res.render()'를 이용하여 응답해줄 템플릿 파일(template.pug)을 결정하고 서버 사이드에서 'title'이란 변수명으로 문자열을 뷰로 전송하였다.

template.pug

html
    head
        meta(charset='utf-8')
        title PUG
        style.
            .contents {
                background : #ccc;
                padding : 30px;
                margin : 10px;
                font-weight : bold
            }
    body
        h1(style = 'color : #C80000')= title
        -for(i = 0; i < 3; i++)
            li Hello pug!
        .contents
            | content box
        input#btn(type='button' value='Click!')

        script.
            var btn = document.getElementById('btn');
            btn.addEventListener('click', function() {
                alert('click! click!');
            });

위의 코드는 클라이언트에게 응답해줄 PUG 파일의 코드이다. 기존의 HTML과는 다른 형식이며 동적으로 서버 사이드의 코드를 사용할 때에만 '-' 또는 '='을 이용하여 선언한다. 이 코드를 익숙한 HTML 코드로 변환하면 아래와 같다.

<html>
    <head>
        <meta charset="utf-8"/>
        <title>PUG</title>
        <style>
            .contents {
                background : #ccc;
                padding : 30px;
                margin : 10px;
                font-weight : bold
            }
        </style>
    </head>
    <body>
        <h1 style="color : #C80000">PUG : EXPRESS TEMPLATE ENGINE</h1>
        <li>Hello pug!</li>
        <li>Hello pug!</li>
        <li>Hello pug!</li>
        <div class="contents">
            content box
        </div>
        <input id="btn" type="button" value="Click!"/>
        
        <script>
            var btn = document.getElementById('btn');
            btn.addEventListener('click', function() {
                alert('click! click!');
            });
        </script>
    </body>
</html>

EJS(Effective Javascript Templatine)

EJS는 기존의 HTML을 그대로 따르며 Javascript 코드를 사용하기 위해서는 '<% %>' 안에 코드를 입력해주어야 한다. 만약 서버 사이드에서 전송된 데이터를 사용하려면 '<%= %>'를 사용해야 한다. HTML 코드를 그대로 사용하기 때문에 디자이너가 웹페이지를 디자인할 때 덜 부담스러워 협업하기에 좋다.

EJS를 이용하여 위와 같은 간단한 동적 뷰를 만들어보자.

app.js

var express = require('express');
var app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

app.get('/', function (req, res) {
    res.render('template.ejs', {title:'EJS : EXPRESS TEMPLATE ENGINE'});
});

app.listen(3000, function () {
    console.log('Server running on port 3000...');
});

템플릿 엔진과 응답해주는 파일을 ejs로 바꾼 것을 제외하면 위의 PUG 템플릿을 이용할 때와 동일한 코드이다.

template.ejs

<html>
    <head>
        <meta charset="utf-8"/>
        <title>EJS</title>
        <style>
            .contents {
                background : #ccc;
                padding : 30px;
                margin : 10px;
                font-weight : bold
            }
        </style>
    </head>
    <body>
        <h1 style="color : #C80000"><%=title %></h1>
        <% for(i = 0; i < 3; i++) { %>
        <li>Hello ejs!</li>
        <% } %>
        <div class="contents">
            content box
        </div>
        <input id="btn" type="button" value="Click!"/>
        
        <script>
            var btn = document.getElementById('btn');
            btn.addEventListener('click', function() {
                alert('click! click!');
            });
        </script>
    </body>
</html>

위의 코드는 클라이언트에게 응답해줄 ejs 파일의 코드이다. 기존의 HTML의 형식을 그대로 따르고 있으며 동적으로 서버 사이드의 코드를 사용할 때에만 '<% %>' 또는 '<%= %>'을 이용하여 선언한다. HTML로 변환한 코드는 생략하도록 하겠다.

'Node.js' 카테고리의 다른 글

Node.js \| Node.js - MySQL : Multiple Statements (0)	2020.01.18
Node.js \| Node.js - MySQL : 연동하기 (16)	2019.12.28
Node.js \| Express : Request Parameters (0)	2019.12.23
Node.js \| Express : Routing (0)	2019.12.19
Node.js \| Express : Intro (0)	2019.12.19