jade는 HTML을 심플하게 표현할 수 있는 마크업언어인 HAML에 영향을 받아 대부분의 문법은 HAML의 것을 차용한 것으로 보입니다.(저는 HAML을 사용해 본적은 없습니다.) Scala나 Ruby에서 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공식페이지에는 아무런 정보도 없더군요.) 뷰 템플릿은 많이 사용해 본 경험이 없기는 한데 약간 사용해보니 어렵지 않으면서 편리한게 꽤 맘에 드는군요.
자세한 설명 정말 감사합니다. ^^
Jade도 이 뒤로 기능이 많이 추가되서 Jade사이트의 문서에서 새로운기능을 참고하시면서 쓰셔야 할겁니다.
안녕하세요.ㅎ nodejs를 접한지 얼마 안되어서 이것저것 글을 읽고있는데 웹페이지를 동적으로 구성하는 부분에서 ejs와 jade 모듈을 사용하는것을 들었습니다. ejs의 경우는 jsp처럼 html형식을 그대로 따른 상태에서 추가적인 문법을 제시하는 느낌인반면 jade는 HAML이라는 형식? 사실 이번에 처음 보게된 형식인데요. 어차피 jade도 html로 다 변환을 해서 사용하게 되는거라면 처음부터 jade로 작성하는 이유에는 어떤것이 있나요? 위에서 말씀하신 부분중에서는 가독성이 좋다라는 부분밖에 잘 모르겠어서요.
이런건 약간 취향문제이기도 한데요.
jade는 같은건 빠르게 작성하기 위한 축약형 문법이라고 할 수 있고 보통 프리프로세서같은 식으로 부르는데 Css에서 sass나 less도 비슷한 성격으로 볼 수 있습니다.
작성이라면 보시듯 훨씬 적은 량의 코드로 작성할 수 있고 여는태그/닫는태그의 실수를 할 여지도 훨씬 줄어들기 때문에 더 빠르게 마크업을 작성할 수 있습니다. 그 외에도 뷰는 성격상 중복코드가 상당히 많이 발생하는데 mixin이나 템필릿 상속등을 통해서 중복코드를 많이 줄일 수 있습니다.(뭐 이런 부분은 템플릿엔진에서는 대부분 제공하는 기능이죠.)
단점이라면 html을 작성해 주는 분이 따로 있는 경우에는 html로 받은 파일은 jade로 변환하는 것은 오히려 부담이기 때문에 처음부터 jade로 만들어주지 않으면 효과를 보기 어렵습니다.
안녕하세요 node.js를 공부하고 있는 일인입니다.
잘 정리해두신 blog 덕분에 node.js에 대해서 흥미롭게 보고 있습니다.
그런데 jade 뷰 엔진을 보던 차에 궁금한 점들이 많이 생겼는데요.
프로젝트의 생산성과 연관해서 생각해봤을때, 과연 jade 뷰 엔진을 사용하는 것이 옳은가?
라는 질문이 생겼습니다.
보통은 퍼블리셔가 HTML을 cording 하는 부분에서 툴을 사용을 하는데,
저런 류의 코딩 규약이라면 지원하는 툴들이 있을까요?
없다면 퍼블리싱 하는 부분에서 많은 리소스가 소요 될 것 같네요.
혹시 이와 같은 문제점을 해소시킬 방법이 있나요?
그렇지 않다면 jade 엔진을 사용하는 것은 리스크가 큰 것 같아요.
jade 작성을 지원하는 IDE는 있지만 말씀하시는바는 퍼블리셔가 HTML로 생성한다면 jade로 변환해야 사용가능합니다. 변환도구도 있긴 하지만 이건 단순 변환이기 때문에 큰 의미는 없습니다.
이런 부분은 선호도 문제라고 생각되는데요 jade를 사용한다면 html을 작성하는 입장에서 사용해야 된다고 봅니다. 보통은 퍼블리셔겠죠. 프로젝트에 직접 퍼블리셔가 인볼브되서 jade로 작성할 수도 있지만 html로 전달된다면 어차피 copy & paste인데 개발자가 jade로 변환해서 얻을 수 있는 이점은 별로 없어보입니다. 이런경우는 차라니 ejs가 더 나은 접근이겠죠.
뭐 이런 부분은 기술의 문제보다는 협업의 문제쪽에 더 가까워서요.