@doortts (doortts) 님이 작성한 게시글입니다. ---

doortts | 2011-11-12 토요일 오후 11:5 | node.js (OctoberSkyJs) | 원본

따라배우기에서 Jade 템플릿 엔진을 사용하고 있습니다. 전반적으로 사용되는데다, 배워놓으면 괜찮을 듯 해서 메뉴얼을 번역했습니다. 사용법이 아닌 컴파일 설치등의 일부 매니악한 부분은 제외했습니다.

Jade가 뭐냐고 물으신다면 node.js용으로 만들어진 view 템플릿 엔진이라고 생각하시면 되겠습니다. Jade 문법에 맞게 작성하면 해당 내용을 html이나 자바스크립트로 만들어 줍니다. 관련해서는 Part 3: RESTful 메소드와 테스트에서 일부 설명해 놓았습니다만, 역시 정석으로 배우면 더 좋겠죠? : )

Jade - template engine

제이드는 Haml로부터 큰 영향을 받은 고성능 템플릿 엔진이며 node를 위해 자바스크립트로 구현되었다.

기능들

클라이언트 사이드 지원
뛰어난 가독성
유연한 띄어쓰기
블럭 확대(block-expansion)
믹스인(mixins, 섞어쓰는 것)
스태틱 인클루드(static includes)
속성 인터폴레이션(attribute interpolation)
보안을 위해 코드는 기본적으로 이스케이프 처리된다.
컴파일과 런타임시에 문맥에 맞는 에러 출력
커맨드 라인을 통해 jade 템플릿을 컴파일 할 수 있음
html 5 모드 (!!! 5 doctype)
선택적인 메모리 캐싱
다이내믹과 스태틱 태그 클래스 조합
필터를 이용한 트리구조 파싱 parse tree manipulation via filters
템플릿 상속
외부 모듈로 Express JS 지원
객체, 배열, 그리고 열거형이 아닌것들에 대해서도 each 를 이용하여 투명하게 이터레이션 지원
블럭 코멘트
tag를 이용한 접두어처리 없음
AST 필터
필터들
- :stylus 는 stylus가 인스톨 되어 있어야 한다.
- :sass 는 sass.js가 인스톨 되어 있어야 한다.
- :less 는 less.js가 인스톨 되어 있어야 한다.
- :markdown 은 markdown-js 혹은 node-discount가 설치되어 있어야 한다.
- :cdata
- :coffeescript 는 coffee-script가 인스톨 되어 있어야 한다.
Vim Syntax
TextMate Bundle
스크린캐스트 보기(추천!!)
html2jade converter

구현체들

설치

npm을 이용한다.

npm install jade

Public API

 var  jade  =  require('jade');

 // Compile a function
 var  fn  =  jade.compile('string of jade',  options);
 fn(locals);

Options

self 로컬 값을 포함하기 위해 self 네임스페이스를 사용한다. 기본값은 false
locals 로컬 변수 객체
filename Used in exceptions, and required when using includes
debug Outputs tokens and function body generated
compiler Compiler to replace jade's default
compileDebug When false no debug instrumentation is compiled

문법

Line Endings

CRLF 와 CR 은 파싱되기 전에 LF로 변환된다.

태그 텍스트(Tag Text)

태그 뒤에 내용을 표시한다.

p wahoo!

렌더링하면 wahoo! 가 된다.

꽤 쓸만하다. 그럼 긴 텍스트 문장일 경우엔 어떻게 할까?

p
   | foo bar baz
   | rawr rawr
   | super cool
   | go jade go

위 코드는 다음처럼 렌더링 된다. foo bar baz rawr.....

인터폴레이션(interpolation, 중간중간 끼워넣어 완성시키는 것)은? 당근! 만약 다음과 같은 값 { name: 'tj', email: 'tj@vision-media.ca' } 을 컴파일 함수로 넘긴다면, 아래와 같은 일을 할 수 있다.

#user #{name}

결과는 tj

옮긴이 주석 인터폴레이션의 뜻을 좀 명확히 보기 위한 다른 언어 인터폴레이션의 예

"#{animals} on a #{transport}".interpolate({ animals:  "Pigs", transport:  "Surfboard"  });

 출력은
 "Pigs on a Surfboard"

특정 이유로 #{} 를 출력하고 싶다면? 이스케이프 처리해라!

p \#{something}

위와 같이하면 다음 처럼 된다. #{something}

이스케이프 처리하지 않길 바랄때 다음과 같이 #대신 !를 쓴다. !{html},

- var html =  ""
 | !{html}

위 html 변수안의 코드는 이스케이프 처리되지 않는다.

중첩된 태그들 또한 선택적으로 텍스트 블럭을 사용할 수 있다.

label
   | Username:
   input(name='user[name]')

혹은 바로 태그 텍스트를 불일 수 있다.

label Username:
   input(name='user[name]')

오직 텍스트만 쓸 수 있는 script, style, 그리고 textarea 같은 태그들은 긴 문장이라도 앞에 | 문자를 붙일 필요가 없다.

   html
     head
       title Example
       script
         if (foo) {
           bar();
         } else {
           baz();
         }

반대로, 텍스트 블럭의 을 나타내기 위해 마지막에 '.'을 붙일 수도 있다.

   p.
     foo asdf
     asdf
      asdfasdfaf
      asdf
     asd

출력:

     foo asdf
     asdf
       asdfasdfaf
       asdf
     asd

끝에 '.'을 붙일 때 공백을 주면 Jade파서는 무시한다. 일반 문자로 간주하게 된다.

p .

출력:

만약 이스케이프 문자()를 찍고 싶으면 두개를 붙인다. 즉, 다음처럼 출력하고 싶다면

foo\bar

아래 처럼 쓴다.

p.
   foo\\bar

주석(Comments)

한 줄 주석은 자바스크립트 코멘트랑 같다. '//'를 붙이고 한 줄로 쓴다.

// just some paragraphs
 p foo
 p bar

출력은 다음처럼 된다.


 foo
 bar

하이픈을 붙이면 파싱할 때 제외한다.

//- will not output within markup
 p foo
 p bar

출력

foo
 bar

블럭 주석(Block Comments)

블럭 주석은 일반적으로 다음과 같다.

   body
     //
       #content
         h1 Example

출력은

Jade는 조건절 주석도 잘 지원한다.

head
   //if lt IE 8
     script(src='/ie-sucks.js')

출력:

중첩(Nesting)

Jade는 일반적인 방식으로 태그 정의에 중첩을 지원한다.

ul
   li.first
     a(href='#') foo
   li
     a(href='#') bar
   li.last
     a(href='#') baz


   foo

   bar

   baz

블럭 확장(Block Expansion)

블럭 확장은 한줄짜리 중첩 태그를 만들 수 있게 해준다. 다음 예제는 위 예제와 동일하다.

   ul
     li.first: a(href='#') foo
     li: a(href='#') bar
     li.last: a(href='#') baz

속성들(Attributes)

Jade는 현재 속성 구분자로 '(' 와 ')'를 사용한다.

a(href='/login', title='View login page') Login

속성의 값이 undefined 나 null 이면 표시되지 않는다.

div(something=null)

boolean 속성도 지원한다.

input(type="checkbox", checked)

코드가 붙은 boolean 속성은 코드의 값이 true 일 때만 속성이 표시된다.

input(type="checkbox", checked=someValue)

여러 라인에 걸쳐서도 잘 동작한다.

input(type='checkbox',
   name='agreement',
   checked)

콤마가 없는 여러 라인일 경우도 잘 된다.

input(type='checkbox'
   name='agreement'
   checked)

펑키한 공백? 된다:

input(
   type='checkbox'
   name='agreement'
   checked)

콜론도 된다.

rss(xmlns:atom="atom")

{ id: 12, name: 'tobi' } 값을 나타내는 user라는 로컬 변수가 있다고 가정해보자. 앵커 태그가 "/user/12"를 가르키길 원한다면, 자바스크립트의 문자열 연결방식을 사용할 수 있다.

a(href='/user/' + user.id)= user.name

혹은 jade은 인터폴레이션을 쓸 수도 있다. 왜냐하면 루비를 쓰거나 커피스크립트를 쓰는 사람들이 일반적으로 쓰는 것 같아서 나도 추가했다.

a(href='/user/#{user.id}')= user.name

class 속성은 배열을 받는 특별 케이스다. bodyClasses = ['user', 'authenticated'] 를 다음처럼 넘길 수 있다.

body(class=bodyClasses)

HTML

인라인 HTML도 잘 동작한다. 파이프 문법을 이용해서 수직으로 글자를 내려 쓸 수 있다.

html
   body
     | Title
     | foo bar baz

파이프를 생략하기 위해 끝에 .을 붙여서 Jade에게 텍스트 블럭임을 알려줄 수 있다.

html
   body.
     Title
     foo bar baz

위 코드는 아래와 같다

Title
 foo bar baz

위와 같은 규칙은 어턴 텍스트가 있던 jade에서는 동일한 규칙으로 동작한다.

html
   body
     h1 User #{name}

Doctypes

독타입을 추가하려면 !!!, 혹은 선택적으로 doctype 을 붙인다.

!!!

위 내용은 transitional doctype이 된다.

!!! 5

혹은

!!! html

혹은

doctype html

독타입은 대소문자를 가리지 않는다. 따라서 다음 내용은 동일하다.

doctype Basic
 doctype basic

독타입 문자열을 전달 할 수도 있다.

doctype html PUBLIC  "-//W3C//DTD XHTML Basic 1.1//EN

결과:

doortts / blog

[메뉴얼] Jade - 템플릿 엔진 for Node.js #221