node - 6.5 템플릿 엔진 사용하기(nunjucks)

더북(TheBook): Node.js 교과서 개정 2판

* 위 내용을 정리하였음

 

6.5.2 넌적스

- pug같은 템플릿 엔진이다.

- 설치 후 app.js와 연결한다.

$ npm i nunjucks

...
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('view engine', 'html');

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

app.use(morgan('dev'));

- 퍼그와 좀 다른점으로 nunjucks.configure를 지정해준다.

- 첫번째 인수는 폴더경로, 두번째는 express속성에 app객체를 연결해주고 watch속성에 true를 넣는다.

- watch:true이면 HTML 파일이 변경될 때 템플릿 엔진을 다시 랜더링 한다.

 

- vew engine으로 html을 그대로 쓴다. 

- 파일 확장자가 njk라면 view engine도 njk로 써야 한다.

 

6.5.2.1 변수

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

- 넌적스에서는 변수를 {{}}로 감싼다.

- 내부에서 변수를 사용할 수 있다.

 

6.5.2.2 반복문

- 넌적스에서는 특수 구문을 {% %}안에 쓴다.

- 반복문에서 루프 인덱스를 쓸때는 loop.index 사용

 

6.5.2.3 조건문

- {{}}안에서 위처럼 사용도 가능하다.

 

6.5.2.4 include

 

6.5.2.5 extends와 block

 

6.5.3 에러 처리 미들웨어

{% extends 'layout.html' %}

{% block content %}
<h1>{{message}}</h1>
<h2>{{error.status}}</h2>
<pre>{{error.stack}}</pre>
{% endblock %}

- error.html이 위처럼 있을때 에러처리 미들웨어를 약간 고쳐보자.

... 
app.use((req, res, next) => { 
  const error = new Error(`${req.method} ${req.url} 라우터가 없습니다.`); 
  error.status = 404; 
  next(error); 
}); 

app.use((err, req, res, next) => { 
  res.locals.message = err.message; 
  res.locals.error = process.env.NODE_ENV !== 'production' ? err : {}; 
  res.status(err.status || 500); 
  res.render('error'); 
}); 
...

- 404에러가 발생하면 로그를 띄우고 맨 마지막 에러처리 미들웨어로 넘어간다.

- 에러처리 미들웨어는 건네 받은 에러 문구를 res.locals.message에 저장한다. 마찬가지로 locals.error값도 저장해준다.

- 이렇게 res.locals 속성에 값을 대입하여 템플릿 엔진에 변수를 주입한다.

 

- error 객체의 스택 트레이스(error.html의 error.stack)는 시스템 환경(process.env.NODE_ENV)이 production(배포 환경)이 아닌 경우에만 표시된다.

- 배포 환경인 경우에는 에러 메시지만 표시된다.

- 에러 스택 트레이스가 노출되면 보안에 취약할 수 있다.

- 서버를 실행하고 localhost:3000/abc에 접속하면 에러 메시지와 함께 응답 코드, 스택 트레이스를 확인할 수 있다.