Web Server - Express

Express

• Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 프레임워크
• 미들웨어 추가, 라우터 제공 에 있어서 Node.js 와의 차이점 존재

1. Express 설치
   npm install express

2. 웹 서버 만들기

const express = require('express');
const app = express()
const port = 3000

app.get('/', (req, res) => {
	res.send('Hello world!');
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

3. 라우팅

• 메서드(get, post, put, delete)와 url(/~) 로 분기점을 만드는 것
• 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는 것

const router = express.Router();

router.get('/lower', (req, res) => {
  res.send(data);
})
router.post('/lower', (req, res) => {
})

node.js와 다르게 Express 는 Router 기능을 프레임워크 자체에서 제공하기 때문에 더 직관적인 코드를 작성할 수 있다.

미들웨어 Middleware

프로세스 중간에 관연하여 요청에 필요한 기능을 더하거나 문제 발견 시 걷어내는 역할

POST 요청 등에 포함된 body(payload)를 구조화할 때(쉽게 얻어내고자 할 때)

Node.js에서 HTTP body 데이터를 받을 때는 네트워크 상의 chunk를 합치고, buffer를 문자열 형태로 변형시키는 작업을 통해 얻을 수 있었다.

• body-parser 미들웨어 이용
  npm install body-parser

const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();

app.post('/users', jsonParser, function(req, res){
  //작업
});

• body-parser 설치 필요없이 Express 내장 미들웨어 express.json() 이용 (v4.16.0)

const jsonParser = express.json();

app.post('/users', jsonParser, function(req, res){
  //작업
})

• express.json([options])

모든 요청/응답에 CORS 헤더를 붙여야 할 때

Node.js 에서 응답 객체의 writeHead 메서드를 이용하여 CORS 헤더를 붙이고, OPTIONS 메서드에 대한 라우팅을 따로 구현해야 했다.

• cors 미들웨어 이용
  npm install cors

const cors = require('cors');

app.use(cors()); //모든 요청에 대해 CORS 허용
app.get('/products/:id', cors(), function(req, res, next){
  res.json({msg: 'This is CORS-enabled for a Single Route'})
}); //특정 요청에 대해 CORS 요청

모든 요청에 대해 url 이나 메서드를 확인할 때

로거 (logger) 는 가장 단순한 미들웨어의 일종으로 디버깅이나 서버 관리에 도움이 되기 위해 console.log 를 이용하여 데이터나 정보를 출력한다.
특정 endpoint 가 아니라 모든 요청에 동일한 미들웨어를 적용하려면 app.use 를 사용한다.

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

const myLogger = function(req, res, next){
  //console.log('LOGGED');
  console.log(`http request method is ${req.method}, url is ${req.url}`);
  next();
};

app.use(myLogger);

app.get('/', function(req, res){
  res.send('Hello World!');
});

app.listen(3000);

요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

HTTP 요청에 토큰의 여부 판단하여, 이미 로그인한 사용자일 경우 성공, 아닐 경우 에러를 보내는 미들웨어
* 토큰 (Token) : 주로 사용자 인증에 사용

app.use((req, res, next) => {
	if(req.headers.token){
      req.isLoggedIn = true;
      next();
      //토큰이 있다면 사용자 로그인 true, next 실행
    } else {
      res.status(400).send('invalid user');
      //토큰이 없다면 400 Bad Request 에러 보냄
    }
})

[과제2] - Express로 Server 구축

1. 웹 서버 만들기
   npm install express

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

2. POST 요청 바디 데이터 읽어오기 위한 미들웨어 설정

• 구 버전에는 body-parser 미들웨어 사용
  npm install body-parser

const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();

• 신 버전에는 body-parser 미들 웨어가 내장되어 있고 use 메서드 사용

app.use(express.json()); // 배열과 객체만 파싱
app.use(express.json({strict:false})); // 모든 바디 부문 파싱

3. 모든 요청과 응답에 CORS 처리
   npm install cors

const cors = require('cors');
app.use(cors());

4. POST 요청 처리

//대문자 변환
app.post('/upper', function(req, res){
	let result = req.body.toUpperCase();
  	res.json(result); //응답보낼 때 json화 하여 보냄
})

//소문자 변환
app.post('/lower', function(req, res){
	let result = req.body.toLowerCase();
 	res.json(result);
})

//에러 처리
app.use(function(req, res, next){
	res.status(404).send("Error 404!");
})

//listen
const PORT = 4999;
const ip = 'localhost';
app.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
})

Node.js 보다는 훨씬 Express 가 미들웨어를 사용해서 그런지 직관적이고 쉬운 것 같다. 하지만, error 처리하는데 있어서는 어렵게 느껴진다. 그렇지만 서버 개념은 이전보다는 확실히 잡힌 것 같다.