정적 언어인 HTML을 자바스크립트를 사용해서 렌더링할 수 있게 해주는 것입니다.

Pug(Jade)

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

'views'는 템플릿 파일들이 있는 폴더를 지정합니다. views 폴더에 템플릿 파일들이 있으며, render 메서드가 이 폴더를 기준으로 템플릿 엔진을 찾아 렌더링합니다. res.render( 'index' ) → views/index.pug 렌더링 'view engine'은 어떤 종류의 템플릿 엔진을 사용할지 명시합니다.

HTML과 문법이 조금 상이하므로 문법을 알아야 합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>템플릿 엔진</title>
        <link rel="stylesheet" href="/stylesheets/style.css">
    </head>
</html>

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')

< > 가 없고 들여쓰기로 태그의 관계를 정의합니다. 자식 태그는 부모 태그보다 들여쓰기 되어 있어야 합니다.

{ }의 내부와 =의 뒷부분은 자바스크립트로 해석한다는 것을 기억해야 합니다.