[Node.js] Express 프레임워크 사용하기 - 서버 구축, 정적 파일, 템플릿 엔진

728x90

1. Express 소개

Express는 Node.js 기반의 웹 프레임워크 중 하나이다.

웹 어플리케이션을 위해 Node.js보다 개선되어 강력한 기능을 제공하며, 빠르고 간결하고 유연하다는 장점을 가지고 있다. 뿐만 아니라, 자유롭게 활용할 수 있는 수많은 HTTP 유틸리티 메소드 및 미들웨어를 통해 쉽고 빠르게 강력한 API를 작성할 수 있다.

2. Expresss 설치

$ npm init
$ npm install --save express

3. Express 서버 구축

app.js

var express = require('express');
var app = express();

// router
app.get('/', function(req, res) {
    res.send('Hello home page');
});
app.get('/login', function(req, res) {
    res.send('Login please');
});

app.listen(3000, function() {
    console.log('Connected 3000 port!');
});

router : 사용자의 요청과 요청에 대한 응답인 controller을 중계해주는 역할

4. 정적 파일 서비스

정적 파일: image, js, css와 같이 직접 변화를 주지 않는 이상 변하지 않는 파일
public 폴더에 정적 파일 저장 ex) img.png
app.js

app.use(express.static('public'));

app.get('/image', function(req, res) {
    res.send('THis is image, <img src="/img.png>');
});

5. 템플릿 엔진

동적 파일과 정적 파일의 장단점을 결합한 새로운 체계
동적인 결과를 정적파일에 담기 위해 사용
jade, pug, ejs 등 다양한 종류

jade

& npm install jade --save

app.js

app.set(view engine', 'jade');
app.set('views','./views'); // views 폴더 생성 필수

app.get('/template', function(req, res) {
    res.render('example'); // example.jade
});

문법 example.jade

html
    head
    body
        h1 Hello Jade
        ul
            -for(var i=0; i<5; i++)
                li coding

이는 아래 html코드와 동일한 결과를 나타낸다.

<html>
	<head></head>
    <body>
    	<h1>Hello Jade</h1>
        <ul>
        	<li>coding</li>
            <li>coding</li>
            <li>coding</li>
            <li>coding</li>
            <li>coding</li>
        </ul>
    </body>
</html>