(14) express 모듈 사용-⑤ 템플릿 엔진: jade의 문법

jade문법 간단하게 알아보자.

1. 들여쓰기를 해야한다.

2. 줄바꿈을 할 경우 태그로 인식되므로 주의하자.

3. 줄바꿈을 하지 않고 띄어쓰기를 하면, 해당 태그의 text값을 의미하게 된다. ex) h1 Hello Jade! >>  <h1>Hello Jade!</h1> 

4. 페이지 소스보기를하여 예쁘게 보기위해서는 app.locals.pretty= true;를 app.js에 입력해주자.

5. 화면에 출력되지 않는 코드 즉, 함수와 같은 경우에는 -를 붙여야한다.

예를 들어 for문을 사용하기 위해서는 -for(var i= 0; i<5; i++){}이런식으로 사용해야 한다. 

6. 사용하고싶은 변수or객체가 있다면 app.js 에서 객체를 만들어주고 res.render('temp', 두번째인자);

두번째 인자로 변수를 주입해주어야한다. 변수가 두개일 경우에는 두 변수와 값을 포함하여{ } 중괄호로 묶어주자.   

7. jade에서 태그에 속성을 주고 싶은경우에는 태그 뒤에 괄호를 사용하여 나타내면 된다. 

예. meta(charset='utf-8')

8. 주의할것 notepad메모장에서 작성할 경우 태그뒤에 공백이 있어서는 안된다. 반드시 공백을 없애야한다.

안그러면 에러가 난다. 

============================================================================

app.js 에 추가해주자. 

app.get('/template',function(req, res){

res.render('temp',{_title:'jade',time:Date()});

});

============================================================================

============================================================================

temp.jade

html

head

   meta(charset='utf=8')

title=_title

body

h1 Hello Jade!

ul

-for(var i=0; i<5; i++)

li coding

div=time

============================================================================

127.0.0.1:3000/template 로 접속하여 확인해주자.

해당 페이지의 소스보기를 해보자.

출처: https://sourceflower.tistory.com/14?category=561762 [소스플로우]