7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 1

 

 

 

 

넌적스(Nunjucks)는 Pug와 비교했을 때 상대적으로 HTML의 문법을 거의 그대로 사용해서 적응이 편합니다. 거기에 추가로 자바스크립트의 문법을 사용 가능합니다. 

 

우선 예제를 위해서 npm으로 넌적스를 설치하고, 기존에 작성했던 app.js에서 view engine 선언을 Pug에서 Nunjucks로 변경해야 합니다. 

 

$npm i nunjucks

 

[app.js]

 

const express =require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const dotenv = require('dotenv');
const path = require('path');
// 추가
const nunjucks = require('nunjucks');

dotenv.config();
const indexRouter = require('./routes');
const userRouter = require('./routes/user');

const app = express();
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
// 수정
app.set('view engine', 'html');

// 추가
nunjucks.configure('views', {
    express: app,
    watch: true,
});


app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded( {extended: false} ));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
        httpOnly: true,
        secure: false,
    },
    name: 'session-cookie',
}));

app.use('/', indexRouter);
app.use('/user', userRouter);

app.use((req, res, next) => {
    res.status(404).send('NOT FOUND');
});

app.use((err, req, res, next) => {
    console.error(err);
    res.status(500).send(err.message);
});

app.listen(app.get('port'), () => {
    console.log(app.get('port'), '번 포트에서 대기');
});

 

 

Pug와 연결하는 방법에 다소 차이가 있는 것을 확인할 수 있습니다. configure 메서드의 첫 번째 인수로 views 폴더의 경로를 넣습니다. 그리고 두 번째 인수에 옵션을 작성하는데, 이 때 express 속성에 app 객체를 연결합니다. watch 옵션은 true로 선언되어 있는데, 이 경우 HTML 파일이 변경될 때 템플릿 엔진을 다시 렌더링 하게 됩니다. 

 

파일은 .pug와 달리 html을 그대로 사용이 가능하며, 구분을 위해 njk 확장자를 사용할 수 있습니다(단, view engine도 njk로 변경)