이번에도 기본 구조는 똑같이 '/'에 들어오면 index파일을 읽어낼 계획이다.
동적인 파일은 만들어내는 엔진으로는 pug를 사용할 것이므로
npm install --save pug를 이용하여 설치하자
pug사이트
동적인 파일은 만들어내는 엔진으로는 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파일을 읽어들일 준비가 된 것이다
이제
와 같이 Views폴더 내에 index.pug파일을 생성하자
그 후 main.js파일을
처럼 바꿔준 후에 127.0.0.1:3000로 접속해보면 제목이 Hello Title이고 내용이 Hello Message로 출력되는것을 볼 수 있다
pug 파일은 위에 처럼 보통 html태그와 태그는 같지만 <,>같은 꺽쇠 기호를 사용하지 않으며, 닫히는 태그또한 없고 tab으로 구분되므로 tab사용에 유의 하여야 한다
하지만 여기까지는 정적인 html파일과 문법만 다를뿐, 동적인 효과를 볼 수가 없으므로 동적인 요소를 확인해 보자
첫번째로, 변수설정이 있다.
pug 파일을
으로 바꿔주고,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=messagemain.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});
});
}즉 처음에 온 값은 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 처럼 상대적으로 주소길이가 길어 질 수 밖에 없다.
