이제 퍼그에서 변수를 사용하는 방법을 살펴봅시다.

h1= title
p Welcome to #{title}
button(class=title, type='submit') 전송
input(placeholder=title + ' 연습')

<h1>Express</h1>
<p>Welcome to Express</p>
<button class="Express" type="submit">전송</button>
<input placeholder="Express 연습" />

서버로부터 받은 변수는 다양한 방식으로 퍼그에서 사용할 수 있습니다. 변수를 텍스트로 사용하고 싶다면 태그 뒤에 =을 붙인 후 변수를 입력합니다. 속성에도 =을 붙인 후 변수를 사용할 수 있습니다. 텍스트 중간에 변수를 넣으려면 #{변수}를 사용하면 됩니다. 그러면 변수가 그 자리에 들어갑니다. #{}의 내부와 = 기호 뒷부분은 자바스크립트로 해석하므로 input 태그의 경우처럼 자바스크립트 구문을 써도 됩니다.

서버에서 데이터를 클라이언트로 내려보낼 때 #{}와 =을 매우 빈번하게 사용하니 꼭 기억해두길 바랍니다.

내부에 직접 변수를 선언할 수도 있습니다. 빼기(-)를 먼저 입력하면 뒤에 자바스크립트 구문을 작성할 수 있습니다. 여기에 변수를 선언하면 다음 줄부터 해당 변수를 사용할 수 있습니다.

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

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