템플릿 엔진

템플릿 엔진은 자바스크립트를 사용해서 HTML을 렌더링할 수 있게 한다.

1. app.set('views')는 템플릿 파일들이 위치한 폴더를 지정한다. 추후 res.render(path)가 위 폴더를 기준으로 템플릿 엔진을 찾아서 렌더링한다. 만약 app.set('views') 그리고 res.render('admin/main')와 같은 코드를 짰다면, views/admin/main.pug'를 렌더링하게 된다.

2. 어떤 종류의 템플릿 엔진을 사용할 것인지 기재한다.

res.render(템플릿, 변수 객체)는 익스프레스가 res 객체에 추가한 템플릿을 렌더링하기 위한 메서드다. 가령 res.render('index', {title: 'Expresss});라는 코드를 사용했다면, 이는 index.pug를 HTML로 렌더링하면서 {title : express} 라는 객체를 변수로 전달한다는 의미다.

pug(Jade)

퍼그는 가장 많이 쓰이는 템플릿 엔진이다. 퍼그의 문법은 HTML과는 많이 다르고 Ruby와 유사하다.

HTML과의 비교를 통한 pug의 특징 :

• 화살괄호<>를 사용하지 않는다.
• 닫는 태그가 없다.
• 탭 또는 스페이스로만 태그의 부모-자식 관계를 규정한다.
• 속성은 태그명 뒤에 소괄호로 묶어서 적용한다. link(rel='stylesheet', href=...)
• 속성 중 아이디와 클래스는 아래와 같이 선택자를 이용하여 적용할 수 있다. div 태그는 태그명의 생략이 가능하다.#login-button, .post-image, p.hidden.full
• HTML 텍스트는 태그 또는 속성 뒤에 한 칸을 띄고 입력한다. button(type=submit) 전송
• 텍스트를 여러 줄 입력하려면 파이프(|)를 넣는다. HTML 코드에선 한 줄로 나온다.

• style이나 script 태그를 html 파일 내부에 적용하려면 아래와 같이 태그 뒤에 점(.)을 붙인다.

넌적스(Nunjucks)

넌적스는 파이어폭스를 만든 모질라에서 만들었다. HTML 문법을 그대로 사용해서 적응하기에 편하다. 넌적스는 파이썬의 템플릿 엔진인 Twig와 유사하다.

npm i nunjucks

1. html 확장자가 아닌 .njk확장자를 사용해도 된다.

2. nunjucks.configure()의 첫 번째 인수로 views 폴더 경로를 전달하고, 두 번째 인수로 옵션을 넣는다. 이 옵션 중 express 속성에는 app 객체를 연결한다. watch 속성이 true이면 HTML 파일이 변경될 때 템플릿 엔진을 다시 렌더링하겠다는 의미다.

넌적스의 특징 :

• 변수는 {{ }}로 감싼다
• 변수 선언은 {% set 변수 = '값' %} 와 같은 형태로 이뤄진다.
• 반복문, 조건문 같은 특수한 구문은 {% %} 안에 사용한다.

• include를 통해 다른 html 파일을 넣을 수 있다.

• extends와 block을 이용해서 레이아웃을 지정할 수 있다. 이를 템플릿 상속(Template Inheritance)라 한다.
• main.html에서 extends 'layout.html' 키워드를 사용하면 main(자식) - layout(부모) 관계가 형성된다.
• 템플릿 상속 관계에서는 부모(base template)에서 block을 정의해서 자식(child template)이 새 콘텐츠로 재정의(override)할 수 있다.

Base templates can specify blocks and child templates can override them with new content.

레이아웃이 될 파일에는 공통된 마크업을 넣되, 페이지마다 달라지는 부분을 block으로 비워둔다. 이후 body.html 같은 block을 여러 개 만들어둬서 {% blcok 블록명 %} ~ {% endblock %}과 같이 block을 선언하여 사용한다. block이 되는 파일(body.html)에서는 extends 키워드로 레이아웃 파일을 지정하고 block을 선언하여 레이아웃 파일에서 해당 블록을 가져와 쓸 수 있게 한다.