6.5.1.2 변수

HTML과 다르게 자바스크립트 변수를 템플릿에 렌더링할 수 있습니다. res.render를 호출할 때 보내는 변수를 퍼그가 처리합니다. routes/index.js의 코드를 보면 다음 부분이 있습니다.

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

res.render(템플릿, 변수 객체)는 익스프레스가 res 객체에 추가한 템플릿 렌더링을 위한 메서드입니다. index.pug를 HTML로 렌더링하면서 { title: 'Express' }라는 객체를 변수로 집어넣습니다. layout.pug와 index.pug의 title 부분이 모두 Express로 치환됩니다. 즉, HTML에도 변수를 사용할 수 있게 된 셈입니다.

res.render 메서드에 두 번째 인수로 변수 객체를 넣는 대신, res.locals 객체를 사용해서 변수를 넣을 수도 있습니다.

router.get('/', (req, res, next) => {
  res.locals.title = 'Express';
  res.render('index');
});

위와 같이 하면 템플릿 엔진이 res.locals 객체를 읽어서 변수를 집어넣습니다. 이 방식의 장점은 현재 라우터뿐만 아니라 다른 미들웨어에서도 res.locals 객체에 접근할 수 있다는 것입니다. 따라서 다른 미들웨어에서 템플릿 엔진용 변수를 미리 넣을 수도 있습니다.