(12) express 모듈 사용-③ 정적 웹페이지 vs 동적 웹페이지
Express,정적인 파일을 서비스 하는방법
app.use(express.static('디렉터리명'));
// 정적파일을 서비스 할 디렉터리의 경우 반드시 package.json 파일이 있는(즉, 패키지를 선언한 곳) 위치와 동일한 위치의 디렉토리에 생성해주자.
웹페이지(html)를 표현하는 방법
1) 순수 html 코드로!(정적) app.use(express.static('디렉터리명'));사용
장점: app.js 에 코드를 작성하지 않으므로 지저분하지 않다.
정적인파일 자체를 수정하면 되므로 cmd 창에서 (ctrl+c)껐다가 (node app.js)켤 필요가 없다.
단점: 동일한 텍스트를 입력해주고 싶을 경우, 함수등을 지원하지 않기 때문에 일일이 컨c 컨v해야한다.
Date()와 같은 함수를 사용할 수 없다.ㅠ
2) app.js 에 html 코드를 삽입해서 (동적) app.get('/dynamic'function(req,res){res.send(변수명)사용
장점: 기본적으로 자바스크립트언어를 사용할 수 있으므로 함수를 사용가능하다.
띠라서 코드의 길이를 줄일 수 있다.
Date()와 같은 함수를 사용할 수 있다. ^^
단점: 코드가 지저분해진다.
파일 자체를 수정하면 cmd 창에서 (ctrl+c)껐다가 (node app.js)켜야하므로 번거롭다.
static.html 파일을 만들어 public에 놓고 정적으로 웹페이지를 표현해보자.
======================================================================
static.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Hello, Static
<ul>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
<li>coding</li>
</ul>
</body>
</html>
<!--static 폴더에 넣어놓고 반드시 app.use(express.static('public'));
해줘야한다. 그래야 곧바로 실행가능하다. 안그러면 에러 -->
======================================================================
정적파일 서비스를 위한 디렉토리 public 안에 static.html 을 위치시켰다.
127.0.0.1:3000/static.html 을 입력하여 접근 해보자.
app.js에 (``그래이브 액센트를 사용) html 코드를 직접 작성하여 동적으로 웹페이지를 표현해보자.
======================================================================
const express =require('express'); // 모듈을 가져오자.
var app= express(); //express().get 이런식으로 사용해도 되지만! 가독성을 높여주기 위하여 app이라는 변수에 담아주자.
// use라는 api를 사용하여 express의 정적서비스를 app.js에서 사용할 수 있도록 연결시키자.
app.use(express.static('public'));
app.get('/dynamic', function(req, res){
var time =Date(); // Date(); 자바스크립트에서 제공하는 함수를 사용할 수 있다.
var lis = '';
for(var i=0; i<5; i++){ // for 문을 사용할 수 있다.
lis = lis + '<li>coding</li>';
}
var output = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Hello, Dynamic!
<ul>
${lis}
<!--변수를 담아서 표현하는 방법 use 그래이브 액센트``-->
</ul>
${time}
</body>
</html>`;
res.send(output);
});
======================================================================
command 창을 열고 node app.js 를 입력하여 express 에서 구현해 놓은 서버를 켠 후 127.0.0.1:3000/dynamic으로 접근해보자.
출처: https://sourceflower.tistory.com/12?category=561762 [소스플로우]
'JavaScript BackEnd > Node.js, Express' 카테고리의 다른 글
| (16) express 모듈 사용-⑦ 쿼리스트링 응용 (0) | 2019.04.03 |
|---|---|
| (15) express 모듈 사용-⑥ 쿼리스트링 (0) | 2019.04.03 |
| (14) express 모듈 사용-⑤ 템플릿 엔진: jade의 문법 (0) | 2019.04.03 |
| (13) express 모듈 사용-④ Intro. 템플릿 엔진 (0) | 2019.04.03 |
| (11) express 모듈 사용-② 정적 파일 서비스 (0) | 2019.04.03 |
| (10) express 모듈 사용 - ① (0) | 2019.04.03 |
| (9) 외부모듈 Express 설치 (0) | 2019.04.03 |
| (8) http모듈을 사용하여 서버를 생성해보자. (0) | 2019.04.03 |