> npm install express --save
express@4.17.1가 설치되었다.
Express를 이용한 간단한 웹앱 만들기
// app.js: main application or entry application
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => res.send('Hello World!')) // 라우터
app.get('/login', (req, res) => res.send('<h1>Login Please!<h1/>'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
* https://expressjs.com/ko/starter/hello-world.html
정적 파일 서비스 방법
public 디렉토리 안에 coding.jpg 이미지가 있다고 할 때
// app.js
var express = require('express');
var app = express();
// 이 부분 추가
app.use(express.static('public'));
app.get('/coding', function(req, res){
res.send('This is coding image <img src="/coding.jpg">');
});
// 여기까지
app.get('/', function(req, res){
res.send('Hello, world!');
});
app.get('/login', function(req, res){
res.send('<h1>login please!<h1/>');
});
app.listen(3000, function(){
console.log('Connected 3000 port!');
});
http://127.0.0.1:3000/coding.jpg or http://127.0.0.1:3000/coding 로 접속하면 된다.
동적으로 웹페이지를 표현하는 방법
// app.js
//...
app.get('/dynamic', function(req, res){
var lis = '';
for(var i=0; i<5; i++) {
lis += '<li>coding</li>';
}
var date = Date();
var output = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello, Dynamic!
<ul>
${lis}
</ul>
${date}
</body>
</html>`;
res.send(output);
});
app.js를 실행시킨 후 정적인 파일은 수정후에 reload하면 그것에 웹페이지에 반영되지만,
동적 웹페이지는 반영되지 않는다. (Ctrl+C를 눌러서 중지시킨 후에 재실행 시켜야 한다.)
정적/동적으로 웹페이지를 만드는 것의 장점을 모은 방법이 template engine이다.
'Javascript > nodejs' 카테고리의 다른 글
[Node.js: Express: URL을 이용한 정보의 전달] query string / query 객체 / Semantic URL (0) | 2020.03.20 |
---|---|
[Node.js: Express Template Engine] 템플릿 엔진 사용법, Jade 문법 (0) | 2020.03.20 |
[Node.js: 비동기(Asynchronous)] 비동기와 동기 처리 방식 (0) | 2020.03.20 |
[Node.js: 모듈(Module)] NPM / 모듈 설치 (0) | 2020.03.20 |
[Node.js: 간단한 웹앱 만들기] 기본 실행 방법 (0) | 2020.03.19 |