앞전에 Express의 정적 파일 제공에 대해 살펴보았다면 이번에는 동적 파일 제공에 대해 살펴볼 것이다.
public 폴더 안에 static.html 파일을 만든다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
Hello, Static
</body>
</html>
이렇게 만들었다면 localhost:3000/static.html 을 통해 해당 html파일을 열 수 있다.
여기서 포인트는 static.html 파일을 수정한다하더라도 서버를 굳이 재시작을 안해도 된다는 것이다.
정적인 파일은 내용을 수정하면 바뀐 내용을 바로 반영시킬 수 있기 때문이다.
하지만 서버의 js파일을 수정한다면 그 경우는 재시작을 해줘야한다.
재시작을 안해도 되는 방법이 있다고 하지만 아직 배우지 않은 관계로.. 패스
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);
});
이번에는 dynamic이라는 router를 작성했다.
이 코드에서 확인할 수 있는 점은 `를 사용해 일반 html처럼 작성할 수 있다는 점이다.
그리고 /dynamic을 통해 접근하면 Hello, Dynamic! 이 출력되는 것을 확인할 수 있다.
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);
});
이번에는 lis 변수와, time이라는 변수를 추가했다.
lis는 coding을 여러번 실행하기 위함, time은 Date()를 이용해 현재시각을 저장하기 위함이다.
그렇다면 위에서 배운대로라면 Hello, Dynamic이 출력되고 coding이 5번, 현재시각이 순서대로 출력되어야한다.
결과를 확인해보자.
우리가 예상한대로 출력되는 것을 확인할 수 있다.
<전체코드>
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 = `
<!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('/route', function (req, res) {
res.send('Hello Router, <img src="/route.png">')
})
app.get('/login', function (req, res) {
res.send('<h1>Login please</h1>');
});
app.listen(3000, function () {
console.log('Conneted 3000 port!');
});
'javascript > node.js' 카테고리의 다른 글
[Node.js] Express, URL을 이용하여 query 객체 사용 (0) | 2024.07.08 |
---|---|
[Node.js] Express 템플릿 엔진 (Pug) (0) | 2024.07.08 |
[Node.js] Express 정적 파일 제공 (0) | 2024.07.07 |
[Node.js] Express를 이용한 간단한 웹서버 만들기 (0) | 2024.07.07 |
[Node.js] Node.js 간단한 웹서버 만들기 (0) | 2024.07.07 |