● node.js express 미들웨어 파악하기

서버만드는 짱구

 

express 를 쓰기 전에는 원래 내장 객체인 http를 불러서 서버를 만들어야합니다.

const http = require('http');

http.createServer((req, res)=>{
  res.writeHead(200, { 'Content-Type' : 'text/html; charset=utf-8'});
  res.write(`<h3>안냐세염</h3>`)
})
  .listen(4000, ()=>{
    console.log('4000포트에서 대기중입니다..')
  })

하지만 http로 서버를 만들게되면, if로 처리하는 분기가 너무 많아져서 복잡해집니다. 아래는 복잡해지는 예시입니다.

const http = require('http');

http.createServer( async (req, res)=>{
  try{
    if(req.method === 'GET'){
      if(req.url === '/'){
        ~~
      }
    } else if ( req.method === 'POST'){
      if ( req.url ==='~~')
    }

  } catch (err){
    ~~
  }
})
  .listen(4000, ()=>{
    console.log('4000포트에서 대기중입니다..')
  })

또한, http방식을 사용해서 request의 body를 받아오게되면 스트림 방식으로 버퍼를 하나씩 모두 모아서(concat) string문자로 바꿔주어야하는데, 그 방식또한 express에 비해 복잡해집니다.

대충 요약된 예제입니다.

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

  if( req.method === 'POST'){
    if (req.url === '/'){
      let body = '';
      req.on('data', data => {
        body += data;
      })
    }
  }
})

• url에 따른 분기처리가 if문으로 들어가 if문 지옥이 시작된다.
• request의 body를 우리가 파싱해서 데이터를 정리해 사용해야한다.
• 쿠키를 받아올 때도, 쿠키를 문자열로 나누고,, 데이터를 정리해 객체로 만들어주어야하는데, 이런건 매우 비효율적입니다 ㅠ

 

따라서 이런 것들은 express를 활용하면 쉬워집니다.

 

● express

const express = require('express');

const app = express();

app.listen(4000, ()=>{
  console.log('안녕하세요? 4000에서 서버가 대기중입니다.')
})

서버 만들기 끗;; 겁나 쉽죠잉?

근데 대부분 환경변수에 port가 입력되어있으면 그 포트를 쓰고 없다면 4000번을 쓰겠다고 입력해줍니다.

const express = require('express');

const app = express();
const port = process.env.PORT || 4000;

app.listen(port, () => {
  console.log(`server is listening at localhost:${process.env.PORT}`);
});

그리고 http 모듈에서는 각각 메서드와 url에 따라 분기처리를 해줘야해서 if문 지옥이었지만, express에서는 한방에 처리가됩니다.

 

const express = require('express');

const app = express();
const port = process.env.PORT || 4000;

app.get('/', (req, res) => {
  res.send('안녕?')
});

app.post('/', (req, res) => {
  res.send('포스트..햇니?')
});

app.listen(port, () => {
  console.log(`server is listening at localhost:${process.env.PORT}`);
});

app. get, post 들로 한방에 분기처리가 해결! 확실히 더 코드가 보기 편합니다.

 

● morgan

npm i -D morgan

morgan같은 경우는 서버 콘솔창에 요청마다의 기록을 콘솔에 찍어줍니다.

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

const app = express();
app.use(morgan('dev'));

const port = process.env.PORT || 4000;

app.get('/', (req, res) => {
  res.send('안녕?')
});

app.listen(port, () => {
  console.log(`server is listening at localhost:${process.env.PORT || 4000}`);
});

'dev'는 개발용이고, combined는 배포용이라고합니다. 이외에 common속성도 있음

 

● express.json, express.urlended

예전에는 request의 body, 즉 요청의 바디를 파싱하기위해 버퍼를 합쳐줘서 문자열로 변환시켜주어야했는데, body-parser로 쉽게 해결할 수 있었습니다. 하지만 그것도 옛날 방식이며 요즘은 바디를 파싱해주는 객체가 express 자체에 내장되어있기 때문에, 이를 사용하기로합니다.

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

const app = express();
app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({extended : 'false'}));

const port = process.env.PORT || 4000;

app.get('/', (req, res) => {
  res.send('안녕?')
});

app.listen(port, () => {
  console.log(`server is listening at localhost:${process.env.PORT || 4000}`);
});

• json도 모두 res로 json을 보내줄 때에도, json.stringify해서 보내주어야했는데, 이 또한 해결 됨 + 바디 파싱
• urlencoded의 extended는 폼태그의 쿼리파라미터를 해결해주는 부분이라고 합니다.

 

● cookie-parser

쿠키 이제 우리가 파싱 안해도 됨 .. 알아서 객체로 만들어줌

const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');

const app = express();
app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({extended : 'false'}));
app.use(cookieParser());

const port = process.env.PORT || 4000;

app.get('/', (req, res) => {
  res.send('안녕?')
});

app.listen(port, () => {
  console.log(`server is listening at localhost:${process.env.PORT || 4000}`);
});

 

● cors

cors도 알아서 저절로 헤더에 잘 넣어주는 미들웨어 물론, cors의 헤더 사항들은 기입을 해주어야한다.

const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const cors = require('cors');

const app = express();
app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({extended : 'false'}));
app.use(cookieParser());

const corsOptions = {
  origin : 'http://localhost:3000',
  // credentials : true,
  methods : ['GET', 'POST', 'OPTION']
}
app.use(cors(corsOptions));

const port = process.env.PORT || 4000;

app.get('/', (req, res) => {
  res.send('안녕?')
});

app.listen(port, () => {
  console.log(`server is listening at localhost:${process.env.PORT || 4000}`);
});

 

대략적인 미들웨어 소개는 이정도?이다..

그리고 만약에 response 응답으로 html과같은 파일을 보내주고 싶을 때는 fs 모듈을 사용해서 readFile을 하고 데이터로 변수를 저장하고.. res.end(data);를 해주어야했다. 근데 express쓰면 좋은게, sendFile로 처리하면 끝이다.

http.createServer(async (req, res) => {
  const data = await fs.readFile(__dirname, './index.html');
  res.end(data);
});

대충 위와 같았다면,

app.get('/', async (req, res) => {
  res.sendFile(__dirname, './index.html');
});

이런식으로 가능해짐.