Jade는 node.js 웹프로젝트를 할 때 내가 애용하는 뷰 템플릿 엔진이기는 하지만 공부할 것도 많은 가운데 뷰 템플릿 엔진의 변화까지 추적하는 것은 쉽지 않기 때문에 큰 변화외에는 처음 알게된 부분 외에는 잘 안쓰게 되는 부분이 약간 있다. 직접 HTML을 작성할 때 Jade를 사용하면 실수도 줄일수 있고 훨씬 쉽게 작성할 수 있지만 Jade 특유의 들여쓰기를 이용한 계층구조때문에 복잡한 태그 구조는 오히려 표현하기 어려운 점도 있다.

<p class="copyright">
  Copyright 2013 <a href="https://jquery.org/team/">The jQuery Foundation</a>.<br>
  <span class="sponsor-line">
    <a href="http://mediatemple.net" rel="noindex,nofollow" class="mt-link">Web hosting by Media Temple</a> | 
    <a href="http://wordpress.org/" class="wp-link">Powered by WordPress</a> | 
    Thanks: <a href="https://jquery.org/members/">Members</a>, 
    <a href="https://jquery.org/sponsors/">Sponsors</a>
  </span>
</p>

예를 들어 jQuery의 footer에 HTML인 위와 같은 HTML을 보자. 이를 순수 Jade의 구조에 따라 작성하면 다음과 같이 작성할 수 있다.

p.copyright
  | Copyright 2013
  a(href="https://jquery.org/team/") The jQuery Foundation
  | .
  br
  span.sponsor-line
    a(href="http://mediatemple.net", rel="noindex,nofollow").mt-link Web hosting by Media Temple
    |  |
    a(href="http://wordpress.org/").wp-link Powered by Wordpress
    |  | Thanks:
    a(href="https://jquery.org/members/") Members
    | ,
    a(href="https://jquery.org/sponsor/") Sponsors

Jade에서는 HTML 태그안에 들어가는 텍스트를 여러줄로 표현할 때 파이프(|)를 사용하게 되는데 이 텍스트에 HTML이 섞여있는 경우(위의 footer처럼) Jade 구조로 표현하기가 오히려 불편해지고 가독성도 떨어지게 되고 라인이 변경될 때마다 원하는 대로 공백을 제대로 표현하려면 Jade 마크업이 오히려 이상한 모양이 된다.

footer처럼 html태그가 잘게 쪼개지는 경우는 다음과 같이 HTML 태그를 섞어서 사용하는 것이 더 낫다. 사실 이 기능들은 0.15에서 이미 지원한것 같은데(지금은 0.30이고 2년정도 됐다..) 크게 신경안쓰고 있어서 모르고 있었따.

p.copyright
  | Copyright 2013 <a href="https://jquery.org/team/">The jQuery Foundation</a>.<br>
  span.sponsor-line.
    <a href="http://mediatemple.net" rel="noindex,nofollow" class="mt-link">Web hosting by Media Temple</a> |
    <a href="http://wordpress.org/" class="wp-link">Powered by WordPress</a> |
    Thanks: <a href="https://jquery.org/members/">Members</a>,
    <a href="https://jquery.org/sponsors/">Sponsors</a>

Jade는 텍스트에 HTML을 사용해도 그대로 렌더링을 해주기 때문에 불필요하게 라인바꾸는 대신 텍스트가운데 HTML을 그대로 사용해서 작성할 수 있다. 그리고 3번 라인처럼 태그의 마지막에 마침표(.)를 찍어주면 파이프(|)가 없이도 그 하위내용은 모두 텍스트로 인식하기 때문에 그대로 HTML마크업을 작성해서 넣을 수 있다.