Jade
Node.js에서 기본적으로 사용되는 view 템플릿 엔진입니다.
HTML 문서에 비해 축약형 문법이며, Tag를 일일이 열고 닫고 할 필요가 없이 들여쓰기를 통해 구분됩니다.
익숙해진다면 확실히 빠르고 편한 코딩이 가능한 엔진입니다.
사용법
우선 Express에서 기본적으로 제공하는 jade 파일을 통해 알아보도록 하겠습니다.
Jade(layout.jade) | HTML |
doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="/stylesheets/style.css"> </head> <body> </body> </html> |
우선 가장 두드러진 차이점은 위에서 설명했다시피 Tag를 열고 닫지 않으며, 대신 들여쓰기로 구분하게 됩니다.
속성은 ()괄호를 이용하여 javascript와 비슷하게 (, )로 구분하여 설정합니다.
index.js |
router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); |
또한 자신을 호출한 index.js에서 인자로 넘겨받은 title 변수를 사용합니다.
그리고 또 하나의 편리한 점은 block을 통해 템플릿 상속이 가능하다는 것입니다.
아래처럼 extends 지시어를 통해 레이아웃을 확장할 수 있습니다.
Jade(index.jade) | HTML |
extends layout block content h1= title p Welcome to #{title} | <h1></h1> <p>Welcome to</p> |
Tag에 변수를 넣고 싶을 때는 =기호를 사용하고 문자열 사이에 넣고 싶을 때는 #{변수명}을 사용합니다.
이외의 자세한 문법은 여기를 참고하세요.
'Node.js' 카테고리의 다른 글
| HTTP 요청, 응답 이해하기(Express 프로젝트 기준) (0) | 2017.02.01 |
|---|---|
| socket.io server 만들기 (0) | 2016.11.25 |
| npm, express (0) | 2016.11.18 |