6.5 템플릿 엔진 사용하기
HTML을 사용해본 적이 있나요? HTML은 정적인 언어입니다. 주어진 기능만 사용할 수 있고, 사용자가 기능을 직접 추가할 수 없습니다. 물론 자바스크립트가 없을 때의 이야기입니다.
HTML로 1,000개나 되는 데이터를 모두 표현하고 싶다면 일일이 직접 코딩해서 넣어야 합니다. 자바스크립트로 표현하면 반복문으로 간단하게 처리할 수 있는데 말이죠. 템플릿 엔진은 자바스크립트를 사용해서 HTML을 렌더링할 수 있게 합니다. 따라서 기존 HTML과는 문법이 살짝 다를 수도 있고, 자바스크립트 문법이 들어 있기도 합니다.
이번 절에서는 대표적인 템플릿 엔진인 퍼그(Pug)와 넌적스(Nunjucks)를 살펴봅니다. 앞으로의 예제는 넌적스를 사용합니다.
Note ≣ ⎮ EJS를 사용하지 않는 이유가 있나요?
노드 생태계에서 EJS나 Handlebars 같은 템플릿 엔진도 많이 사용하지만, 레이아웃 기능이 없으므로 개인적으로는 추천하지 않습니다.
Note ≣ ⎮ 템플릿 엔진 대신 리액트, 뷰 등을 써도 되나요?
요즘에는 템플릿 엔진 대신 프런트엔드에서 리액트(React)나 뷰(Vue)를 더 많이 사용하는 추세입니다. 하지만 이 책의 주제와는 거리가 있으므로 리액트나 뷰에 대한 내용은 이 책에서 다루지 않습니다. 프런트엔드를 리액트나 뷰 등으로 제작한 뒤 노드 서버와 Restful한 방식으로 데이터를 주고받으면 됩니다. 이 책의 예제는 모두 넌적스로 되어 있지만, 리액트나 뷰를 별도로 공부해서 예제를 리액트나 뷰로 전환해보는 것도 좋은 경험이 될 것입니다.