express

express란?

express는 Node.js를 위한 개방적인 간결한 웹 프레임워크를 뜻한다.

많은 사람들이 node.js가 서버 자체라고 혼동하고 나 또한 그랬지만, node.js 자체는 간단하게 말하면 자바스크립트를 브라우저 밖에서 사용하게 해주는 런타임 환경이다.

오늘날 우리가 사용하고 있는 브라우저들, 크롬, 파이어폭스, 오페라와 같은 것들에 기본적으로 자바스크립트 엔진이 탑재되어 있어서 프론트단에서 개발을 하는데 자바스크립트가 사용되고 있다. 반면, 백엔드에서는 자바스크립트 엔진이 존재하지 않았기에, 사용되는 서버 사이드 언어는 자바, PHP가 주를 이루었다. 이후 Node.js가 세상에 나오며 자바스크립트만으로 클라이언트와 서버 개발을 할 수 있게 된 것이다.

즉, express는 Node.js의 핵심 모듈들, http와 connect 컴포넌트를 기반으로 하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체이다.

express를 사용하는 이유가 뭔가요?

편해서.

express를 사용하지 않고도 node.js의 모듈, http를 사용하면 서버를 생성할 수 있다.
하지만 작성해야 할 코드가 많아지고, 가독성 또한 현저히 떨어진다.

다음 예시를 보자.

express를 사용하였을 경우

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


app.get('/', function (req, res) {
    res.send('Welcome Home');
});

app.get('/tcs', function (req, res) {
    res.send('HI RCSer');
});


app.listen(8080, function () {
    console.log('Example app listening on port 8080!');
});

http를 사용하였을 경우

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {

    req.on('error', err => {
        console.error(err);
        res.statusCode = 400;
        res.end('400: Bad Request');
        return;
    });

    res.on('error', err => {
        console.error(err);
    });

    if (req.url === '/' && req.method === 'GET') {
        res.end('Welcome Home');
    } else if (req.url === '/tcs' && req.method === 'GET') {
        res.end('HI RCSer');
    } else {
        res.statusCode = 404;
        res.end('404: File Not Found');
    }
    } else {
        res.setHeader('Content-Type', 'application/octet-stream');
        res.end(data);
    }
    });

});

server.listen(8080, () => {
    console.log('Example app listening on port 8080!');
});

현저하게 코드 양과 가독성에 차이가 난다. express 객체로 http 기본 메소드를 사용할 수 있으므로 get을 사용하면 되지만, http로 할 경우, req의 속성인 method와 url을 확인하여 클라이언트의 요청을 구분해야 한다. 이런 과정에서 조건문이 들어가며 코드양이 많아지고 가독성이 떨어진다. 물론 코드를 따로 작성하여 나눌 수 있지만 express를 사용한 것에 비해 직관성이 현저히 떨어진다.

express을 사용할 경우 next를 사용한 미들웨어 사용, http 기본 메소드를 통한 REST api 가 훨씬 작성하기 쉽고, 코드를 이해하기도 쉬워진다. 물론 Vanila JS로 프로젝트를 진행할 경우, http를 써야겠지만 선택은 본인의 자유다.

express 사용

    const express = require('express');
    const cors = require('cors');
    const app = express();
    const routesUrls = require('/routes/routes');

    app.listen(4000, () => console.log("server is running!"));

    app.use(cors());
    app.use('/app', routesUrls);

express의 인스턴스를 통해서 서버를 쉽게 생성할 수 있다. app은 express의 인스턴스이며 listen 메소드를 통해 서버 생성이 가능하다. express의 인스턴스를 통해서 라우팅이 가능하다. 라우팅은 URI 또는 HTTP 요청 메소드(GET,POST등)의 특정 엔드 포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 뜻한다.

각 라우트 함수는 하나 이상의 핸들러 함수를 가질 수 있으며, 이러한 함수는 라우트가 일치할 때 실행된다.

라우트 정의에는 다음과 같은 구조가 요구된다.

    app.METHOD(PATH, HANDLER);

• app : express의 인스턴스입니다.
• METHOD : HTTP 요청 메소드.
• PATH : 서버에서의 경로.
• HANDLER : 라우트가 일치할 때 실행되는 함수.

위 코드에서는 HTTP 메소드를 사용하지 않고 use를 사용하였는데 use는 특정 path에 미들웨어 함수를 마운트하기 위한 메소드이며, path 인자를 생략할 시 모든 요청에서 수행된다. 위의 코드 같은 경우, routes는 express.Router() 인스턴스에 바인드된 라우터 레벨 미들웨어이며, 이를 /app 경로에 미들웨어로 마운트한 모습이다. express에서는 express.Router 인스턴스를 통해 기능별로 라우터를 나누어 쉽게 코드를 관리할 수 있다.

    const router = express.Router();

    router.get(URI 이름, 콜백함수);

    router.post(URI 이름, 미들웨어, 콜백함수);

    .
    .
    .

    module.exports = router;

다음 코드와 같이 라우터에 기능을 추가하고 module.exports를 통해 내보내어 express 인스턴스에 마운트하면 된다. 자주 사용되는 기능은 미들웨어 함수로 작성하여 따로 관리하도록 하자.

    router.get('/signin', function(req,res,next) {
        .
        .
        next();
    });

    router.post('/signin', function(req,res) {
        .
        .
    });

콜백함수의 인자로 next를 안 주는 경우, 클라이언트의 요청에 대해 최종적으로 애플리케이션이 응답하는 라우트가 된다. next를 주고, 작업을 수행하고 next() 메소드를 호출하면 다음 미들웨어 함수에 req, res를 넘긴다.

Reference

https://wikibook.co.kr/article/what-is-expressjs/
https://velog.io/@madpotato1713/JAVASCRIPT-express%EB%9E%80
https://expressjs.com/ko/starter