Node.js 입문 - (4) pug를 이용한 동적 웹페이지

이번에는 정적인 페이지가 아닌 동적인 페이지를 만들어 보려고 한다

이번에도 기본 구조는 똑같이 '/'에 들어오면 index파일을 읽어낼 계획이다.

동적인 파일은 만들어내는 엔진으로는 pug를 사용할 것이므로
npm install --save pug를 이용하여 설치하자
pug사이트

var express= require('express');
var app = express();
var router = require('./router/main.js')(app);

app.set('views', __dirname + '/views');
app.set('view engine','pug');

var _port = 3000;
app.use(express.static('public'));

app.listen(_port, function(){
    console.log("PORT : " + _port);
});

위와 같이 app.js에 작성하면
Views라는 폴더에서 pug파일을 읽어들일 준비가 된 것이다

이제

html
    title Hello Title
    body
        h1 Hello Message

와 같이 Views폴더 내에 index.pug파일을 생성하자

그 후 main.js파일을

module.exports = function(app){
    app.get('/',function(req,res){
        res.render('index');
    });
}

처럼 바꿔준 후에 127.0.0.1:3000로 접속해보면 제목이 Hello Title이고 내용이 Hello Message로 출력되는것을 볼 수 있다

pug 파일은 위에 처럼 보통 html태그와 태그는 같지만 <,>같은 꺽쇠 기호를 사용하지 않으며, 닫히는 태그또한 없고 tab으로 구분되므로 tab사용에 유의 하여야 한다

하지만 여기까지는 정적인 html파일과 문법만 다를뿐, 동적인 효과를 볼 수가 없으므로 동적인 요소를 확인해 보자

첫번째로, 변수설정이 있다.

pug 파일을

html
    title=title
    body
        h1=message

으로 바꿔주고,
main.js 파일을

module.exports = function(app){
    app.get('/',function(req,res){
        res.render('index',{title:'Hello Title',message:'Hello Message'});
    });
}

로 바꾼후에 다시 접속해보면 같은 메세지가 뜨는 것을 볼 수 있다
pug파일에서 태그 바로옆에 = 을 붙이고 써준 title, message들이 변수로 작용하고,
main.js파일에서 title:'Hello Title'과 같이 Json형식으로 써주면 그 변수로 값이 넘어가는 방식이다.

이번에는 사용자로 부터 get방식으로 값을 받는 방식으로 동적으로 설계해보자

우선 Get방식은 변수에대한 값을 주소로 나타나게 값을 전달 받는다

이제 NodeJs에서 이 값을 받기 위해서,

main.js 파일을

module.exports = function(app){
    app.get('/:title/:message',function(req,res){
        var title = req.params.title;
        var message = req.params.message;
        res.render('index',{title:title,message:message});
    });
}

처럼 바꿔주고 127.0.0.1:3000/Hello World/Hello Message 으로 접속해보면 같은 결과가 나오는것을 볼 수 있다

즉 처음에 온 값은 req.params.title에, 두번째 값은 req.params.message에 들어가서 pug파일에 전달되어 표시되는 것이다

이 방법은 parameter로 몇개의 값이 들어오는지 정확하게 알 때만 쓸 수 있지만, 주소가 간결하다는 장점이 있다

다른 GET방식으로는 몇개의 값이 들어오는지에 상관없이 처리 하는 방법이 있는데,

module.exports = function(app){
    app.get('/',function(req,res){
        var title = req.query.title;
        var message = req.query.message;
        res.render('index',{title:title,message:message});
    });
}

이런 방식으로, 대신에 주소값은
http://127.0.0.1:3000/?title=Hello World&message=Hello Message 처럼 상대적으로 주소길이가 길어 질 수 밖에 없다.