6.5.2 넌적스

넌적스(Nunjucks)는 퍼그의 HTML 문법 변화에 적응하기 힘든 분에게 유용한 템플릿 엔진이며, 파이어폭스를 개발한 모질라에서 만들었습니다. HTML 문법을 그대로 사용하되 추가로 자바스크립트 문법을 사용할 수 있으며, 파이썬의 템플릿 엔진인 Twig와 문법이 상당히 유사합니다.

넌적스를 설치합니다.

콘솔

$ npm i nunjucks

view engine을 퍼그 대신 넌적스로 교체합니다.

app.js

...
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'));
...

퍼그와는 연결 방법이 다소 다릅니다. configure의 첫 번째 인수로 views 폴더의 경로를 넣고, 두 번째 인수로 옵션을 넣습니다. 이때 express 속성에 app 객체를 연결합니다. watch 옵션이 true이면 HTML 파일이 변경될 때 템플릿 엔진을 다시 렌더링합니다.

파일은 pug와 같은 특수한 확장자 대신 html을 그대로 사용해도 됩니다. 넌적스임을 구분하려면 확장자로 njk를 쓰면 됩니다. 단, 이때는 view engine도 njk로 바꿔야 합니다.

이제 넌적스의 문법을 살펴보겠습니다. 퍼그와 예제가 같으므로 비교하면서 보길 바랍니다.