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

 

 

 

○ 변수 

 

Pug에서는 기본 HTML과 다르게 JS 변수를 템플릿에 렌더링할 수 있습니다. res.render 호출 과정에서 보내는 변수를 Pug가 처리하게 되죠. 아래와 같이 routes/index.js의 코드 예제가 있다고 가정해 봅시다.

router.get('/', (req, res, next) => {
    res.render('index', { title: 'Express'});
});

 

위와 같이 res.render(템플릿, 변수 객체) 형태는 익스프레스가 res 객체에 추가한 템플릿 렌더링을 위한 메서드를 의미합니다. 즉, index.pug를 HTML로 렌더링 하면서 { title: 'Express' } 라는 객체를 변수로 할당하게 됩니다. 이런 방식으로 HTML에서 변수를 사용할 수 있게 만들어주는 구조이지요. 

 

 

---

 

 

한편, 위와 같이 res.render 메서드의 두 번째 파라미터로 변수객체를 넣는 방법 말고 변수 객체를 할당하는 별도의 방법도 있습니다. 바로 res.locals를 사용하는 방법입니다. res.locals.title과 같은 방식으로 할당하는 방법이죠. 아래 예제를 참고하세요.

router.get('/', (req, res, next) => {
    res.locals.title = 'Express';
    res.render('index');
});

 

 

위와 같이 사용할 경우, 템플릿의 엔진이 res.locals 객체를 읽어 변수를 할당하게 됩니다. 이 방식을 굳이 사용하는 이유는, 이런 방식으로 변수를 할당하게 될 경우 현재의 라우터 뿐만 아니라 다른 미들웨어에서도 res.locals 객체에 접근할 수 있다는 점이죠. 

 

 

---

 

 

이제 Pug에서 변수를 사용하는 예제를 살펴보겠습니다. 일단 title이라는 변수에 Express라는 스트링이 할당된 상태입니다.

 

[HTML]

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

 

 

[Pug]

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

 

 

- 변수를 단순 텍스트로 사용하고 싶다면 태그 뒤에 =를 붙여서 사용합니다. h1의 예제처럼 말이죠. 

- 속성에서 사용할 경우에도 =를 붙여서 사용합니다. class=title처럼요.

- 텍스트 중간에 변수를 넣는 경우에는 #{변수} 형태로 사용합니다. 

- #{ } 내부와 = 기호 뒷부분은 자바스크립트로 해석합니다. 그래서 placeholder 부분은 JS 문법을 사용했습니다.