내맘대로 살기🎉

[Node.js] express 정적&동적, 템플릿 엔진 Jade 본문

개발자의 길/Node.js

[Node.js] express 정적&동적, 템플릿 엔진 Jade

해림😶 2017. 4. 26. 23:34

정적인 파일은 우리가 내용을 수정하면 리로드만 해주면 바로 반영가능.



`[그레이브액센트] 안에 ${here}를 이용하여 here에 넣으면 변수로 입력받음. 


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var express = require('express');
var app = express();
app.use(express.static('public'));
app.get('/',function(req, res){
    res.send('Hello home page');
});
app.get('/dynamic', function(req, res){
    var lis = '';
    for(var i=0; i<5; i++){
        lis = lis + '<li>coding</li>';
    }
    var time = Date();
    var output = `
     
        <head>
            <title></title>
        </head>
         
            <h1>Hello, Dynamic!!!</h1>
            <ul>
                ${lis}
            </ul>
            ${time}
         
    `;
    res.send(output);
});
app.get('/route',function(req, res){
    res.send('Hello Router, <img src="/me.jpg">')
});
app.get('/login',function(req,res){
    res.send('<h1>Login please</h1>');
});
app.get('/introduction', function(req, res){
    res.send('<h2 style="color:blue">Hi! My name is Harris Lim.</h2></br>who are you?')
});
app.listen(3000, function(){
    console.log('Conneted 3000 port!');
});
- 동적인 것.

?
1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <title></title>
</head>
 
    <h1>Hello, Static!!!</h1>
    <ul>
        <li>coding</li>
        <li>coding</li>
        <li>coding</li>
        <li>coding</li>
        <li>coding</li>
    </ul>

- 정적인 것.


정적인 것의 장점과, 동적인 적의 장점을 모은 것이 템플릿 엔진.



Jade의 첫인상은 정리되어있지 않고 자유로워 보인다.

5개의 <li>를 사용할 때 for문을 사용하는 것도 너무나 새롭다.


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

res.render('temp');    // send()와 같지만, template에서는 render()를 사용.

});

- temp에 해당하는 template파일을 가져와서 rendering한다.


* supervisor app2.js를 하면 app2.js의 파일이 수정되면 supervisor라는 녀석이 알아서 재실행 시켜줌.


app.locals.pretty = true; // jade코드를 예쁘게 만드는 코드.


프로그래밍 적인 코드를  .jade에서 사용할 경우 그 코드 앞에 '-'를 붙인다. 

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


.jade파일에서 Date()같은 함수를 이용하려면 그 jade파일을 사용하겠다고 선언한 js파일에서 app.render()안에 넣어줘야한다.

* jade-lang.com에서 jade와 html의 차이를 알 수 있음.



?
1
2
3
4
5
6
7
8
9
10
html
    head
        title= _title
    body
        h1 hello Jade
        ul
            -for(var i=0; i<5; i++)
                li coding
        //- 이 타임은 temp를 불러오는 js파일에서 미리 선언해줘야함.
        div= time

- .jade파일에서 javascript의 메소드를 사용하려면 


?
1
2
3
app.get('/template',function(req,res){
    res.render('temp', {time:Date(), _title:'Jade'});//send()와 같지만, template에서는 render()를 사용. 'temp',{} 이렇게 객체의 자리는 약속.
});
- 이렇게 객체에 넣어준다. 객체는 그냥 약속이라고 생각.

* 주석은 //- comments 이런 식으로 달아준다.

저작자표시

'개발자의 길 > Node.js' 카테고리의 다른 글

[Node.js] express. POST방식을 이용한 정보 전달  (1) 2017.04.27
[Node.js] express 쿼리스트링(query string), 시멘틱 URL  (0) 2017.04.27
[Node.js] express 정적인 파일 저장하기  (0) 2017.04.25
[Node.js] express의 hello word 예제 (..syntax highlighter 사용법)  (0) 2017.04.25
npm으로 express 설치하기.  (0) 2017.04.25
공유하기 링크
'개발자의 길/Node.js' Related Articles more
Comments