Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

Pug(구 Jade)에서 `undefined` 문제 해결하기

이 글의 주제는 아니지만(따로 적기도 모호해서) 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이 없다면 다음과 같이 나온다.

앞의 코드가 브라우저에서 undefined가 표시된 화면

컴파일된 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">
2016/07/03 23:17 2016/07/03 23:17