[Web Server] Building server using Express.js

MERN stack은 JavaScript 생태계에서 인기있는 프레임워크인 MongoDB, Express, React, Node를 지칭하는 말이다.

이 중에서 Express.js는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기있는 프레임워크이다.
(Node.js 의 de facto 서버 프레임워크로 여겨지고 있다 - 위키피디아)

Library vs Framework

Library - 구현은 안되어있지만 방향성을 제시. 환경만 제공. 땅을 제공해주면 직접 씨를 뿌려야 됨.
Framework - 구현된 기능들의 집합체. 이미 다 만들어져있고 데이터만 넣어주면 됨. 재배한 농작물을 구입만 하면 됨.

Front 는 library 를, server 쪽은 framework 를 많이 쓰는 편.

Express.js

Express 의 장점

• Middleware 추가가 편리하다.
• 자체 router를 제공한다.

Routing

메소드와 URL(/lower, /upper 등)로 분기점을 만드는 것을 routing 이라고 한다. Express 는 프레임워크 자체에서 라우터 기능을 제공한다.

Middleware

미들웨어 함수란 request, response 객체에 접근하는 함수를 말한다. 미들웨어 함수를 직접 정의하여 추가할 수도 있으며, 이미 express에서 제공하는 미들웨어 함수를 가져와 사용할 수 있다.

미들웨어는 작성 순서가 중요하다.
미들웨어는 next()가 있어야 다른 함수 실행이 된다.
에러 처리용 미들웨어는 메소드 요청 다음에 작성한다.

From express guide:

• Middleware
  http://expressjs.com/en/guide/writing-middleware.html
• Using middleware
  http://expressjs.com/en/guide/using-middleware.html
• List of express middlewares
  http://expressjs.com/en/resources/middleware.html

미들웨어를 사용하는 상황

1. 모든 요청에 대해 url이나 메소드를 확인할 때
   • app.use(middleware)
2. POST 요청 등에 포함된 body(payload)를 구조화할 때(쉽게 얻어내고자 할 때)
   • app.use(express.json({strict: false}));
3. 모든 요청/응답에 CORS 헤더를 붙여야할 때
   • app.use(cors());
4. 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

Using express.js

// 1. 외부 모듈
const express = require('express') // express 모듈을 불러온다.
const cors = require('cors') // cors 미들웨어를 불러온다.

// 2. 내부 모듈
// 요청을 log 하는 middleware 만들기
const logger = (req, res, next) => {
  console.log(
    `http request method is ${req.method}, 
     url is ${req.url}`);
}

// 3. 전역변수
const app = express(); 
// Express 객체이다. 여기에는 서버, 메소드, 다른 모든 패키지가 포함되어 있다.
const port = 5000;
const ip = 'localhost';

// 4. 라우트 모듈

// 5. 실행 로직
// app.use() 는 () 안에 있는 것을 express 에 등록하는 것이다.
// 모든 요청에 대해 CORS 를 허용한다.
app.use(cors()); 
// 혹은 특정 요청만 CORS 허용하기
app.get('products/:id', cors(), (req, res, next) => {
  res.json({msg: 'This is CORS-enabled for a single route'})
})
app.use(express.json({strict: false})); 
/* Express.json: a built-in middleware function in Express. 
 * It parses incoming requests with JSON payloads 
 * and is based on body-parser. 
 */
// {strict: false}: primitive data type 도 parsing 해주도록 설정
app.use(logger); // 모든 요청에 middleware 적용

// Express.js way of routing:
// GET
app.get('/', (req, res)=>{
  res.status(200).send('Hello world!');
  /* Express 는 200 번대 http status code 는 알아서 넣어준다.
   * 근데 넣는 습관 들이면 좋다. */
})

// POST
app.post('/upper', (req, res)=>{
  let result = req.body;
  result = result.toUpperCase();
  res.json(result);
})

// 에러 처리 미들웨어 (메소드 요청 뒤로 작성)
// 앞에 작성하면 메소드 요청 처리가 안되고 에러로 처리됨.
app.use((req, res, next) => {
  res.status(404).send('Not Found!');
});

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send({
    message: 'Internal Server Error',
    stacktrace: err.toString()
  });
});

// listener
app.listen(port, ()=>{
  console.log(`http server listen on ${ip}:${port}`);
})
/* listener 는 실제로 서버를 켜는 메소드이다.
 * listener의 callback 함수는 서버 시작과 동시에 딱 한번 실행되는 함수이다.
 * 보통 초기화 함수 혹은 서버 정보를 출력하도록 만든다.
 */

Server structure

app.js
├─ Router - 라우팅
├─ Control - 실제 로직
└─ Repository - DB 만들기 전 잠시 쓰는 저장소

app.js

const flightRouter = require('./router/flightRouter');

app.use('/flight', flightRouter);

Router

// flightRouter.js

const { findAll, findById, update } = require('../controller/flightController');
const exress = require('express');
const router = exress.Router();

router.get('/', findAll); // '/flight'

router.get('/:id', findById); // '/flight/:id'

router.put('/:id', update); // '/flight/:id'

module.exports = router;

Control

// flightController.js
module.exports = { 
  // key - value pairs
  findAll: async (req, res) => {},
  findById: async (req, res) => {},
  update: async (req, res) => {}
}