Installing Pug
•
Pug를 사용하기 위해서, express()을 app에 할당하고 난 뒤 app에 대한 Global Configuration을 처리하는 app.set()으로 Pug Template을 설정해줘야 한다. (set()이라고 하는 Method는 Express Application내에서 사용할 수 있는 Value를 Global하게 지정할 수 있게 한다. Reserved된 Key Value는 get()을 통해 가져올 수 있다.)
•
set()을 이용할 때 유심히 봐야하는 Property는 'views'와 'view engine'이라는 Property이다.
•
app.set('view engine', 'pug')와 같이 이용한다.
•
'view engine'에 대한 정의 말고, 'views'에 대한 정의를 할 때 default 값으로 pwd/views로 되어 있으므로 Path만 맞다면 정의하지 않아도 된다. (명시한다면, app.set('views', 'views')와 같이 주면 된다.)
Pug Features
•
Pug는 아무 것도 없이 Dot만으로 클래스를 두면 알아서 div라고 인식한다.
•
Pug에서 id 값을 명시하기 위해서, #idName을 사용한다.
•
Pug에서 Multiple Class를 쓰기 위해서는 .으로 Concatenating해줘야 한다.
•
Pug에서 JavaScript의 render() Method의 인자로 받은 데이터를 JavaScript로 이용할 때, #{}를 이용한다. (해당 문법을 이용할 때는 Pug에서 HTML Code를 작성하는 부분에서 이용한다. 반복문, 분기문 등에서는 해당 문법 없이 변수를 이용할 수 있다.)
•
Pug에서 반복문을 돌리고 싶을 때, each in라는 키워드를 이용한다.
•
Pug에서 분기문을 사용하고 싶다면, if-else문을 이용한다.
•
Pug에서 Dotting을 통해서 Class임을 명시할 수 있었는데, Dot이 아니더라도 Attribute로 명시하여 Class를 지정할 수 도 있다. 이렇게 했을 때의 이점은 Class를 지정하는데 있어서 JavaScript 문법을 쓸 수 있기에 동적으로 Class를 할당하는 것도 가능하다는 것이다. 이 때, 아래와 같은 구문이 가능하다.
class="(path === '/admin/add-product' ? 'active' : '')"
Pug Layouts
•
Pug의 Layout에 대해서 Boiler Plate 작업인 Hook과 Placeholder에 대한 작업이 끝났다면, 해당 Layout을 이용하는 Pug 파일에서도 이 Layout을 불러오는 작업이 필요하다. extends layouts/main-layout.pug와 같이 extends 키워드를 통해 Layout을 불러올 수 있다. 또한 Layout에 block으로 작업한 부분에 대해서는 Pug 파일에서 Layout을 불러온 다음, block에 대한 표기를 하여 Content를 채워 넣는다. 이는 Pug 파일 작성한 것과 마찬가지로 Indent를 이용하여 Inject한다.