Node.js 에서 정적인 파일을 Express 를 통해 적용해보기
기존에 사용했던 코드에 추가시킨다.
doc : http://expressjs.com/ko/starter/static-files.html
var express = require('express');
var app = express();
// 추가 : 정적인 파일을 위치시키고 싶은 디렉토리를 지정
app.use(express.static('public'));
app.get('/', function(req, res){
res.send('Hello homepage');
});
app get('/login', function(req,res){
res.send('Login');
});
app.listen(4170, function(){
console.log('Connected 4170 prot!');
});
Express 를 통해 웹페이지를 정적과 동적으로 표현하기
정적이다 : 한번만 만들면 언제나 똑같은 모습인 HTML을 만들겠다.
public 디렉토리에 HTML파일을 넣는 것이다. -> 사용자가 접근했을때 위에서 추가한 코드에 의해서 pubilc 디렉토리에서 파일을 찾는다.
public 디렉토리에서 static.html이라는 HTML문서를 만들고 주소/static이라는 것을 하면
정적인 파일은 내용을 수정하면 바로 적용시킬 수 있다.
var express = require('express');
var app = express();
app.use(express.static('public'));
app.get('/', function(req, res){
res.send('Hello homepage');
});
// 추가 get으로 것은 정적인 것과 다르게 서버를 껐다가 다시 켜야지 적용된다.
app.get('/dynamic', function(req,res){
var output = `<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> Hello, Dynamic! </body> </html>`
res.send('output')
});
app get('/login', function(req,res){
res.send('Login');
});
app.listen(4170, function(){
console.log('Connected 4170 prot!');
});
그럼 정적인 것이 좋은데 왜 동적인 것을 사용하나??
정적인 HTML과 다르게 프로그래밍적(동적)으로 코드를 짤 수 있다.
(순수 HTML은 현재 시간을 표시하는 능력 이미 화면에 표시된 것을 동적으로 바꾸는 것이 어럽다.)
var express = require('express');
var app = express();
app.use(express.static('public'));
app.get('/', function(req, res){
res.send('Hello homepage');
});
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('/login', function(req,res){
res.send('Login');
});
app.listen(4170, function(){
console.log('Connected 4170 prot!');
});
'WEB (Feat.FOO) > WEB 제작(Node.js)' 카테고리의 다른 글
| 11. Node.js Express-URL을 통한 정보 전달 <query string> (0) | 2017.01.07 |
|---|---|
| 10. Node.js Express 적용하기 : 템플릿 엔진 (jade) (0) | 2017.01.07 |
| 8. Node.js Express 적용해보기 (0) | 2017.01.07 |
| 7. Node.js에서의 동기와 비동기 (1) | 2017.01.07 |
| 6. callback 함수, 콜백함수 (0) | 2017.01.07 |