Express - 템플릿 엔진 (Template Engine)

템플릿 엔진

웹페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. 그러나 자바스크립트와 함께라면 가능하다. 예를 들어 HTML로 1,000개의 데이터를 모두 표현하고 싶다고 해보자. HTML만 사용한다면 일일이 직접 써서 넣어야 할 것이다. 그러나 자바스크립트로 표현하면 반복문으로 아주 간단하게 처리할 수 있다. 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링할 수 있게 해준다. 따라서 기존 HTML과 문법이 살짝 다를 수도 있고, 자바스크립트 문법이 들어가기도 한다.

 

템플릿 엔진에는 대표적으로 퍼그 (Pug), 넌적스 (Nunjucks), EJS, Handlebars 등이 있다. 퍼그는 사용법이 아주 간단하고 배우는데 얼마 걸리지 않는다. 아래 문서를 참고하여 배우도록 하자.

 

https://jeong-pro.tistory.com/65

Pug 문법 정리 요약 (템플릿 엔진)

 

넌적스

넌적스는 HTML의 문법을 그대로 사용하되, 추가로 자바스크립트 문법을 사용할 수 있다. 먼저 넌적스를 npm으로 설치해주자. 그 후, 코드에 다음과 같이 추가해준다.

 

dotenv.config();
const app = express();
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'html');

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

 

연결 하는 방법은 위와 같다. 먼저 첫 번째 인수로 views 폴더의 경로를 넣고, 두 번째 인수로 옵션을 넣는다. 이 때 express 속성에 app 객체를 연결하고, watch 옵션을 true로 설정하면 HTML 파일이 변경될 때 템플릿 엔진을 다시 렌더링하도록 한다.

 

파일은 퍼그와 같은 특수한 확장자 대신 html을 그대로 사용하여도 되고, 넌적스임을 구분하려면 확장자로 njk를 쓰면 된다. 이 때는 위에 app.set에서 view engine을 html 대신 njk로 바꾸어 주어야 한다.

 

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

Nunjucks

 

문법은 위를 참고하자.

 

 

출처

Node.js 교과서 개정 2판 - 길벗, 조현영

https://jeong-pro.tistory.com/65

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