본문 바로가기

Javascript/nodejs

[Node.js: Express] Express를 이용한 간단한 웹앱 만들기 / 정적 파일 서비스 방법 / 동적으로 웹페이지를 표현하는 방법

https://expressjs.com/

 

Express - Node.js web application framework

Fast, unopinionated, minimalist web framework for Node.js $ npm install express --save

expressjs.com

> 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이다.