Jade ?
Jade는 Express가 기본으로 제공하는 템플릿 엔진이다.
템플릿 엔진이란, 파일을 읽어들일 때에 엔진의 규칙과 설정에 의해 파일을 변환시키고, 화면에 출력시켜주기 위한 HTML 형식으로 바꿔주는 모듈을 의미한다.
Jade 모듈 또한 같은 역할을 한다.
Jade 문법대로 파일을 작성하면, 이를 Express에서 엔진을 사용하여 사용자에게 보여지기 위한 형태로 바뀐다.
이를 설정하는 곳은 express 폴더 내부의 ./app.js 파일인데, 그 중에서 다음의 내용에 해당한다.
14번 15번 줄이 엔진을 설정하는 곳인데, 14번은 엔진을 통해서 렌더링할 파일이 들어갈 폴더를 지정해준다.
15번은 14번에 해당하는 폴더의 파일을 jade engine으로 변환하겠다는 내용이다.
Jade는 굉장히 뭐랄까.. 미래지향적이다.
핵심만 필요로 하며, 따라서 불필요한 부분은 다 삭제했다.
사용자는 필요한 내용만 딱 적으면 되고, 나머지 부가적인 부분은 엔진이 알아서 다 채워 넣는다....
그러나 오히려 그렇기 때문에 기존에 웹 문서 문법에 익숙한 사람은 당황하게 된다.
Jade !
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | doctype html html(lang="en") head title= pageTitle script(type='text/javascript'). var isJade = 1; body h1 Jade - node template engine #container.col p Jade가 어렵나요? p(style="display:inline;"). Jade는 조금 이해하기 어려운 면이 있다. indentation을 반드시 지켜야 한다. 익숙해지면 굉장히 편하고, 깔끔할지도 모른다. | cs |
위의 내용은, Jade 파일입니다. jade 파일을 jade 엔진으로 렌더링을하면 다음과 같이 변합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript">var isJade = 1;</script> </head> <body> <h1>Jade - node template engine</h1> <div id="container" class="col"> <p>Jade가 어렵나요?</p> <p style="display:inline;"> Jade는 조금 이해하기 어려운 면이 있다. indentation을 반드시 지켜야 한다. 익숙해지면 굉장히 편하고, 깔끔할지도 모른다. </p> </div> </body> </html> | cs |
보면, html에서 항상 있어왔던 태그의 <> 부호가 사라졌습니다.
태그를 열고 닫는것이 사라졌지요.
태그를 열고 닫는 것은 indent로 대체하였습니다.
즉 앞에 띄어쓰기 혹은 Tab이 얼마나 되어있느냐를 기준으로 자동으로 태그를 열고 닫아줍니다.
익숙해지면 빠르고 짧은 코딩이 가능하겠지만, 익숙해지기가 어려워 보이네요..
다음에 나오는 ejs 모듈은 html과 동일하며, jsp의 문법을 사용하기에 기존의 웹서버 공부를 하셨던 분에게는 더 익숙하고 편한 편입니다.
그럼 이만..!