정적 동적 페이지의 차이점은 무엇일까?
쉽게 예를 들어보겠다.
정적 페이지는
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정적 페이지</title>
</head>
<body>
<ul>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
</ul>
</body>
</html>
위와 같은 html코드처럼 코드를 전부 적어놓은 페이지를 정적 페이지라고 한다.
그럼 동적 페이지는 무엇일까?
저번 시간에 작성했던 app.js 코드에 동적인 파일을 추가해보자
var express = require('express');
var app = express();
app.use(express.static(public));
app.get('/',function(req,res){
res.send('welcome to the main page ')
});
app.get('/login', function (req, res) {
res.send('Login Please.......!!!')
})
app.get('/rabbit',function(req,res){
res.send('hello rabbit, <img src="rabbit.png" />') //루트란??
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정적 페이지</title>
</head>
${lis} //변수 삽입
<body>
</body>
</html>
app.listen(3000,function(){
console.log('connected 3000 port')
})
정적 페이지는
<ul>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
</ul>
반복되는 코드를 모두 썼다면, 동적페이지는 변수처리해서 삽입했다(${lis} )
node를 실행해서
localhost:3030/static.html 에 접속해보고
localhost:3000/dynamic 에 접속해보면 두 코드가 같은 화면이 나온다.
그렇다면
정적 페이지와 동적 페이지의 차이점은 무엇일까?
첫 번째로, 정적 페이지는 수정할 시 새로고침 하면 바로 수정사항이 적용되는데 반해,
동적 페이지는 새로 실행되어야 하기 때문에 새로고침해도 코드가 변화가 없고, node에서 재실행 해야 코드에 변화가 있다.
정적 페이지는 수정사항이 생길 때 마다 node에서 잡아서 던저주기 때문이라고 한다.
두 번째는, 정적 페이지 순수 html은 변수를 넣을 수 없지만, 동적 페이지에서는 ${} 기호 안에 변수를 넣으면 적용이 된다.
예를들어
var time = Date();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동적 페이지</title>
</head>
${time} //변수 삽입
<body>
</body>
</html>
이렇게 html 페이지를 만들고 실행해보면
페이지에
Mon Nov 13 2017 20:30:26 GMT+0900 (대한민국 표준시)
이렇게 시간 정보가 로딩된다.
이처럼 동적 페이지는 변수를 삽입할 수 있는 장점이 있지만
수정이 쉽지 않고 어려운 편이다.
'IT 인터넷 > node.js' 카테고리의 다른 글
| [node js]쿼리스트링과 쿼리스트링을 이용한 페이지 값 출력 (0) | 2017.11.16 |
|---|---|
| [node js]templete, pug 설치 / 적용하기 (0) | 2017.11.13 |
| [node js]Express로 정적 페이지 로드하기 (0) | 2017.11.10 |
| [node js]Express로 웹 페이지 생성 (0) | 2017.11.09 |
| [node js] Express 설치 (0) | 2017.11.09 |