이 글의 주제는 아니지만(따로 적기도 모호해서) Node.js의 뷰 템플릿 엔진 중 하나인 Jade가 작년 말에 pug로 이름을 변경했다. 이는 요즘 유행(?)하는 상표권 분쟁으로 인한 결과로 아직도 별로 알려지진 않은 듯하지만 지금은 저장소도 pug로 완전히 바뀌었다.(아직 도메인은 jade-lang.com이긴 하다.)

이제 Jade는 업데이트 예정이 없고(최종 버전 v1.12.0) pug는 2.0 릴리스를 준비하고 있고 이 글을 쓰는 시점에는 2.0.0-beta3이 나온 상태이다. 기존 .jade 파일을 .pug 확장자로 변경하고 express.js](http://expressjs.com/)를 사용한다면 app.set('view engine', 'jade');를 app.set('view engine', 'pug');로 변경하면 pug를 사용할 수 있지만 Jade 때와는 문법이 약간 달라진 부분이 있다. 2.0이 정식으로 나오면 Jade를 사용하는 프로젝트가 pug로 갈아탈 것으로 생각하지만 아직은 대부분 Jade를 그대로 쓰고 있을 것이라고 본다.

Jade에서의 undefined 출력 문제

뷰 템플릿 엔진에 {user: { name: 'Oustider' }} 객체를 전달한다고 할 때 이를 Jade에서 출력하면 다음과 같이 작성할 수 있다.

extends layout

block content
  p Welcome to #{user.name}
  input(type="text", name="name", value="#{user.name}")

이는 다음과 같이 잘 표시가 된다.

여기서는 user.name에 값이 존재하므로 상관없지만, 만약 user 객체에 name이 없다면 다음과 같이 나온다.

컴파일된 HTML 코드를 보면 다음과 같다.

<p>Welcome to </p>
<input type="text" name="name" value="undefined">

<p>태그에 넣은 값은 undefined이므로 Jade에서 알아서 처리해 줬지만 <input>태그에서 #{} 문법으로 넣은 값에는 undefined가 출력되었다. 값이 없으니까 출력할 수는 없지만 undefined가 출력된 것은 의도치 않은 부분이고 이는 결국 문자열로 처리되기 때문에 다른 문제를 일으킬 수 있다. 이런 문제를 예방하려면 속성에서 따옴표나 #{}없이 바로 변수를 지정해야 한다.

input(type="text", name="name", value=user.name)

이제 렌더링 된 HTML 코드를 보면 value의 값이 undefined이므로 해당 속성을 생략한 것을 볼 수 있다.

<p>Welcome to </p>
<input type="text" name="name">

pug에서의 undefined 출력 문제

위에서 얘기한 대로 Jade 때와는 문법이 약간 달라진 부분이 있다. 그래서 HTML의 속성에 변수를 사용할 때 Jade에서처럼 #{}이 아니라 ES2015의 템플릿 리터럴을 그대로 사용한다.

p Welcome to #{user.name}
input(type="email", name="email", value=`${user.name}`)

pug에서도 변수가 없으면 undefined가 되므로 다음과 같은 HTML이 렌더링 된다.

<p>Welcome to </p>
<input type="email" name="email" value="undefined">

이 문제를 해결하려면 Jade에서와 똑같이 속성에 바로 변수를 대입하면 된다.

<p>Welcome to </p>
<input type="email" name="email">