7. 익스프레스 (4) - 템플릿 엔진 : Pug 5

 

 

 

 

Pug에서의 변수 사용에 대해서 이어서 좀 더 살펴보겠습니다. 앞서서 라우터에서 변수 객체를 선언하고( { title: 'Express' } ) 변수를 사용할 때 =를 사용하거나(h1= title) #{ }를 사용하는 방식을 설명했습니다. 

 

이와 다르게 직접 Pug 내부에서 변수를 선언할 수도 있습니다. 빼기( - )를 먼저 입력하면 이어서 자바스크립트 구문을 입력할 수 있고, 여기에 변수를 선언한 다음 다음 줄부터 해당 변수를 사용할 수도 있습니다. 

 

[HTML]

<p>Node.js와 Javascript</p>

 

 

[Pug]

- const node = 'Node.js'
- const js = 'Javascript'
p #{node}와 #{js}

 

 

 

---

 

 

Pug는 기본적으로 변수에 있는 특수 문자를 HTML 엔티티로 이스케이핑 합니다. 즉, 문법에 영향을 주지 않는 일반 문자로 취급한다는 뜻이죠. 만일, 오히려 이스케이핑을 원하지 않는다면 = 대신 !=를 사용해야 합니다. 아래 예제를 보겠습니다. 

 

[HTML]

 

<p>&lt;strong&gt;이스케이프&lt;/strong&gt;</p>
<p><strong>이스케이프하지 않음</strong></p>

 

 

[Pug]

p= '<strong>이스케이프</strong>'
p!= '<strong>이스케이프하지 않음</strong>'

 

 

이 경우, 아래와 같이 실제로 출력된다는 점을 참고하시면 됩니다.