퍼그 - 변수

HTML과 다르게 자바스크립트 변수를 템플릿에 렌더링할 수 있습니다. res-render를 호출할 때 보내는 변수를 퍼그가 처리합니다. routes/index.js의 코드를 보면 다음 부분이 있습니다.

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

 

res.render(템플릿, 변수 객체)는 익스프레스가 res 객체에 추가한 템플릿 렌더링을 위한 메서드입니다.

index.pug를 HTML로 렌더링하면서 { title: 'Express' }라는 객체를 변수로 집어넣습니다. layout.pug와 index.pug의 title 부분이 모두 Express로 치환됩니다. 즉, HTML에도 변수를 사용할 수 있게 된 셈입니다.

res.render 메서드에 두 번째 인수로 변수 객체로 넣는 대신, res.locals 객체를 사용해서 변수를 넣을 수도 있습니다.

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

 

위와 같이 하면 템플릿 엔진이 res.locals 객체를 읽어서 변수를 집어넣습니다. 이 방식의 장점은 현재 라우터뿐만 아니라 다른 미들웨어에서도 res.locals 객체에 접근할 수 있다는 것입니다. 따라서 다른 미들웨어에서 템플릿 엔진용 변수를 미리 넣을 수도 있습니다.

 

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

 

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

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

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

퍼그는 기본적으로 변수의 특수 문자를 HTML 엔티티(entity)로 이스케이프(escape)(문법과 관련 없는 문자로 바꾸는 행위)합니다. 이스케이프를 원하지 않는다면 = 대신 !=을 사용하면 됩니다.