14. template

template 엔진

1위 : ejs, 2위 : handlebars, 3위 : mustache

express와 함께 사용하는 퍼그와 넌적스(https://colorlib.com/wp/top-templating-engines-for-javascript/)

1위인 EJS를 사용하지 않고 넌적스를 사용하는 이유 : 초급자가 사용하기엔 넌적스가 최고! 템플릿 상속을 통해 빠르게 UI를 구현할 수 있습니다. 물론 1위는 다 이유가 있습니다. 나중에 다 경험해보시길 권해드립니다!

npm install nunjucks 로 실행이 안되시면서 chokidar 애러 뜨시는 분은 npm install nunjucks chokidar 로 설치 해주세요!

공식 url :

Nunjucks

You've been looking for a more sophisticated templating engine for JavaScript. Here it is. Rich Powerful language with block inheritance, autoescaping, macros, asynchronous control, and more. Heavily inspired byjinja2 Fast & Lean High-performant.

https://mozilla.github.io/nunjucks/

templates 관련된 html 파일은 아래 notion page에 있습니다.

📝

010_template_engine\template


// 파일이름 : 010_template_engine\app1.js

// npm init --yes
// npm i nunjucks express
// npm i nodemon --save-dev
// -> nodemon app1 으로 실행 가능
const nunjucks = require('nunjucks');
const express = require('express');
const path = require('path');

const app = express();
app.set('view engine', 'html');

nunjucks.configure('template', {
    autoescape: true,
    express: app,
    watch: true
});
// template를 인식하고 사용하겠다
// autoescape는 보안상 true (false일 경우 html 태그 허용, DBD 공격 가능)
// express : app, 사용할 객체 지정
// watch: true 옵션을 사용하면 HTML파일이 변경될 때 템플릿 엔진 다시 렌더링

app.get('/', (req, res) => {
    res.render('test1.html', { 
        // error : __dirname + '/test.html'
        // error : path.join(__dirname, 'test.html')
        // complete : path.join(__dirname, 'template', 'test.html')
        // complete : test.html or ./test.html
        name : "hojun!",
        age : 10
    });
});

app.listen(8080);


// 파일이름 : 010_template_engine\app2.js

const nunjucks = require('nunjucks');
const express = require('express');
const path = require('path');

const app = express();
app.set('view engine', 'html');
// ejs는 app.set('view engine', 'ejs');

nunjucks.configure('template', {
    autoescape: true,
    express: app,
    watch: true
});
// template를 인식하고 사용하겠다
// autoescape는 보안상 true (false일 경우 html 태그 허용, DBD 공격 가능)
// express : app, 사용할 객체 지정
// watch: true 옵션을 사용하면 HTML파일이 변경될 때 템플릿 엔진 다시 렌더링

app.get('/', (req, res) => {
    res.render('test2.html', {
        예금 : [{
                    "은행명" : "신한",
                    "계좌번호" : 1,
                    "금액" : 100
                }, {
                    "은행명" : "우리",
                    "계좌번호" : 2,
                    "금액" : 200
                }, {
                    "은행명" : "농협",
                    "계좌번호" : 3,
                    "금액" : 300
                }],
        기술 : ['python', 'javascript', 'HTML', 'CSS'],
        습득연도 : [[2000, 2021], [2005, 2021]]
    });
});

app.listen(8080);


// 파일이름 : 010_template_engine\app3.js

const nunjucks = require('nunjucks');
const express = require('express');
const path = require('path');

const app = express();
app.set('view engine', 'html');
// ejs는 app.set('view engine', 'ejs');

nunjucks.configure('template', {
    autoescape: true,
    express: app,
    watch: true
});
// template를 인식하고 사용하겠다
// autoescape는 보안상 true (false일 경우 html 태그 허용, DBD 공격 가능)
// express : app, 사용할 객체 지정
// watch: true 옵션을 사용하면 HTML파일이 변경될 때 템플릿 엔진 다시 렌더링

app.get('/', (req, res) => {
    res.render('test3.html', {
        예금 : [{
                    "은행명" : "신한",
                    "계좌번호" : 1,
                    "금액" : 100
                }, {
                    "은행명" : "우리",
                    "계좌번호" : 2,
                    "금액" : 200
                }, {
                    "은행명" : "농협",
                    "계좌번호" : 3,
                    "금액" : 300
                }, {
                    "은행명" : "제주",
                    "계좌번호" : 4,
                    "금액" : 400
                }],
        기술 : ['python', 'javascript', 'HTML', 'CSS'],
        습득연도 : [[2000, 2021], [2005, 2021]],
        text : '<h1>hello world</h1>'
    });
});

app.listen(8080);


// 파일이름 : 010_template_engine\app4.js

const nunjucks = require('nunjucks');
const express = require('express');
const path = require('path');

const app = express();
app.set('view engine', 'html');
// ejs는 app.set('view engine', 'ejs');

nunjucks.configure('template', {
    autoescape: true,
    express: app,
    watch: true
});
// template를 인식하고 사용하겠다
// autoescape는 보안상 true (false일 경우 html 태그 허용, DBD 공격 가능)
// express : app, 사용할 객체 지정
// watch: true 옵션을 사용하면 HTML파일이 변경될 때 템플릿 엔진 다시 렌더링

app.get('/', (req, res) => {
    res.render('test4.html', {
        예금 : [{
                    "은행명" : "신한",
                    "계좌번호" : 1,
                    "금액" : 100
                }, {
                    "은행명" : "우리",
                    "계좌번호" : 2,
                    "금액" : 200
                }, {
                    "은행명" : "농협",
                    "계좌번호" : 3,
                    "금액" : 300
                }, {
                    "은행명" : "제주",
                    "계좌번호" : 4,
                    "금액" : 400
                }],
        기술 : ['python', 'javascript', 'HTML', 'CSS'],
        습득연도 : [[2000, 2021], [2005, 2021]],
        text : '<h1>hello world</h1>'
    });
});

app.listen(8080);

구조분해할당 이용한 반복문을 봐주세요.

2번째 코드는 실행이 되지 않습니다.

주석은 {# 주석 #}


{# 주석 #}
{# 주석 #}
{# 주석 #}
{# 주석 #}

<h2>습득연도</h2>
{% for i in 습득연도 %}
    <p>{{ i }}</p>
    <p>{{ i[0] }} ~ {{ i[1]}}</p>
{% endfor %}

<h2>습득연도 (안되는 코드) - 삭제하신 다음 실행해야 합니다.</h2>
{% for i in 습득연도 %}
    <p>{{ i }}</p>
    <!-- <p>{{ i.0 }} ~ {{ i.1}}</p> -->
{% endfor %}

<h2>습득연도</h2>
{% for i, j in 습득연도 %}
    <p>{{ i }} ~ {{ j }}</p>
    <!-- <p>{{ i.0 }} ~ {{ i.1}}</p> -->
{% endfor %}

14. template_engine

template 엔진