Outsider's Dev Story

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

node.js 템플릿엔진 jade

jade는 node.js 뷰 템플릿 엔진으로 웹프레임워크인 express에서 사용할 수 있으며 HTML 태그보다 상당히 심플한 형태의 마크업을 작성하면 자동으로 HTML을 생성해 주는 역할을 하고 있습니다.  express에서 view engine을 jade로 설정해 주거다 파일명.jade 를 사용하면 jade 템플릿엔진을 사용할 수 있습니다.

jade는 HTML을 심플하게 표현할 수 있는 마크업언어인 HAML에 영향을 받아 대부분의 문법은 HAML의 것을 차용한 것으로 보입니다.(저는 HAML을 사용해 본적은 없습니다.) ScalaRuby에서 Jade를 사용할 수 있도록 한 구현체들도 있습니다.


!!!
html
  head
    title Hello jade
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1 Hello jade 
    div
      p Welcome to jade
    script(src='script.js')

간단히 페이지를 만들면 jade로 위와같이 작성할 수 있습니다. jade는 블락단위를 들여쓰기(indent)를 기준으로 하고 있습니다. 들여쓰기를 하면 상위태그에 소속되기 때문에 들여쓰기가 꺼꾸로 되거나 잘못되면 제대로 파싱이 되지 않고 오류가 나게 됩니다. 들여쓰기로 구분을 하기 때문에 소스도 명확하고 HTML에 비해서 가독성도 상당히 좋게 느껴집니다. 태그 다음에 문자역을 적으면 태그의 컨텐츠로 들어가게 되소 속성(attribute)는 괄호를 이용해서 정의하게 됩니다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Hello jade</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
</head>
<body>
    <h1>Hello jade</h1>
    <div>
        <p>Welcome to jade</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

jade를 파싱하면 위의 html처럼 변환되게 됩니다. 간단한 문법이므로 작성이나 수정도 편하고 html에 실수도 줄일 수 있을것 같습니다.


!!!
html
  head
    title Hello jade
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1 Hello jade 
    div#contents
      p.message Welcome to jade
        |test message
    .footer
      // footer here

    script(src='script.js')
    :javascript
      |console.log('debug');


좀더 확장된 형태의 jade파일입니다. 어떤면에서는 zen Coding과 비슷한 성격을 보이고 있다고 느껴집니다. zen coding처럼 전체는 아니지만 태그를 정의할때 CSS셀렉터형태의 샵(#)이나 점(.)을 이용해서 id나 class를 지정해 줄수 있습니다. 텍스트가 길 경우에는 세로바(|)를 이용해서 적어주면 멀티라인으로 내용을 작성해 줄수 있으며 태그명 없이 .footer나 #footer와 같이 적을 경우에는 자동적으로 div가 적용이 됩니다. 주석은 슬래쉬 2개(//)로 적어줍니다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Hello jade</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
</head>
<body>
    <h1>Hello jade</h1>
    <div id="contents">
        <p class="message">Welcome to jadetest message</p>
    </div>
    <div class="footer"><!-- footer here--></div>
    <script src="script.js"></script>
    <script type="text/javascript">
        console.log('debug');
    </script>
</body>
</html>


jade파일이 변환된 HTML 코드입니다.

DOCTYPE를 선언하는 !!!뒤에 옵션을 지정하면 DOCTYPE을 바꿔줄 수 있습니다. !!! strict와 같이 지정하면 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">와 같이 XHTML 1.0 Strict가 선언되고 !!! 5로 사용하면 <!DOCTYPE html>와 같이 선언되며 HTML5 문서가 됩니다.

구현체는 다른 언어에도 있지만 제가 사용한 jade는 node.js에서 사용한 것이기 때문에 npm install jade를 사용하면 jade를 설치해서 사용할 수 있으며 jade *.jade라는 명령어를 사용하면 jade파일을 같은 파일명의 html파일로 변환해서 볼 수 있습니다. --pipe옵션을 사용해서 jade filename.jade --pipe명령어를 사용하면 터미널에서 변환된 html파일을 볼 수 있으며 변수를 사용할 경우에는 --options을 사용해서 JSON형태로 넘겨주면 됩니다.

jade 사용법에 대한 자세한 문서는 github 저장소에 자세히 나와 있습니다. (불편하게 jade공식페이지에는 아무런 정보도 없더군요.) 뷰 템플릿은 많이 사용해 본 경험이 없기는 한데 약간 사용해보니 어렵지 않으면서 편리한게 꽤 맘에 드는군요.
2011/02/03 21:49 2011/02/03 21:49