생활 코딩 Server Side Language - NodeJS
4강
정적 페이지 vs 동적 페이지
정적 페이지
- 한 번 만들면, 계속 같은 내용을 담고 있음.
- 파일을 수정해도 서버를 재시작 할 필요 없이 바로 반영 된다.
- 코딩적인 방법으로 HTML코드를 동적으로 활용 할 수 없다.
동적 페이지
- 만들 때마다 내용이 변경 됨.
- JavaScript 코드내에서 HTML코드를 작성하는 것은 지저분하다.
이미지, css파일을 로딩 시킬 때는 Express 기본 미들웨어 함수인 static 사용
app.use(express.static('public'));
static.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
Hello, Static
<ul>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
</ul>
</body>
</html>
app.js file
var express = require('express');
var app = express();
app.use(express.static('public'));
app.get('/',function(req, res){
res.send('Hello Express Home');
});
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 = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
Hello, dynamic
<ul>
${lis}
</ul>
${time}
</body>
</html>`;
res.send(output);
});
app.get('/girl', function(req, res){
res.send('Hello Img, <img src="/IMG.jpg">');
});
app.get('/login', (req, res) => {
res.send('Login page');
});
app.listen(3000, function(){
console.log('Connected App listen on 3000 port');
});
정적 페이지 방식과 동적 페이지 방식 차이는 위의 경우에는 시간 출력 빼고 없다.
다만, 정적 페이지는 코딩적인 방법 사용 불가능. 시간 출력등 …
그래서!!!
템플릿이 필요하다.
설치를 해야 한다. 우리는 Jade를 쓸거다.
npm install jade --save
jade에서 사용되는 html 코드를 이쁘게 표현하기 위해서는 Express에서 설정이 필요하다.
app.locals.pretty = true;
app.set('view engine','jade');
app.set('views','./views');
node server 파일 변경시마다 서버를 재시작해야 하는데 이 supervisor는
watching 기능으로 파일 변경을 추적하여, 변경시 node 서버를 재시작 한다.
npm install supervisor -g