● 4월 5일 Section 2 / Unit10 - [Web Server] 기초

● 오늘 공부한 것

• express

 

Express "Hello World" 예제

 

Express 기본 라우팅

어제 과제를 express 설치 후 다시 풀어보았습니다.

Mini-node-server

const express = require('express');
cosnt app = express();
const port = 3000;
const cors = require('cors');
const jsonParser = express.json({strict : false});


app.use(cors{
	origin : '*'
})

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

// 위의 내용을 아래와 같이 적을 수 있다.
// app.route('/upper')
//   .post(jsonParser, (req, res)=>{
//     res.json(req.body.toUpperCase());
// })

app.post('/lower', jsonParser, (req, res)=>{
	res.json(req.body.toLowerCase());
})

// 위의 내용을 아래와 같이 적을 수 있다.
// app.route('/lower')
// .post(jsonParser, (req, res)=>{
//   res.json(req.body.toLowerCase());
// })

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

 

 

• 미들웨어

내장 미들웨어들을 사용하면서 미들웨어란 무엇인가에 대한 탐구를 하게 되었습니다. 그리고 미들웨어를 왜써야하는가? 에 대한 탐구를 페어와 함께 진행하게 되었는데요, 개발을 배울 때 가장 중요한 것은 '왜' 쓰냐에 대해 고민을 하는 것이 중요한 것 같습니다.

express.json()

body-parser ---> express.json() 이라는 미들웨어가 내장 미들웨어로 자리잡게 되었습니다. 왜 쓰게 되었을까요?

let body = [];
request
.on('data', (chunk)=>{
	body.push(chunk);
})
.on('end', ()=>{
	body = Buffer.concat(body).toString();
})

request의 body에 담긴 데이터를 가져오려면 이런 과정을 겪어야 했습니다. 하지만 express.json() 미들웨어를 사용하게 된다면?

const jsonParser = express.json();

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

왐마.. 넘나리 편해버리는 것..

 

Cors

cors 미들웨어를 사용하지 않았을 때에 Node.js 만으로 만들었다면 매번 writeHead를 통해 매번 헤더에 적어주어야 했습니다.

const server = http.createServer((req, res)=>{
	if (req.method === 'OPTIONS'){
    	res.writeHead(200, defaultCorsHeader);
    }
})

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};

게다가 넘나리 긴 .. 헤더놈..

하지만 미들웨어 cors를 사용한다면?

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

app.use(cors({
	origin : '*'
}))

왐마 이거 너무 편해버리는 거임

 

● 내가 놓치고 있던 것

• 'data' 이벤트 다음 'end' 이벤트가 실행되기 때문에 on 메서드로 받아도 순차적으로 실행되는 것으로 보이는 것이다. 사실은 각각 실행되는 비동기 함수임 (차례대로 진행되지 않는다는 말)
• 이벤트 함수와 미들웨어는 다른 것이다.

제가 문제를 풀면서 의아했던 점은, 미들웨어는 한 개 이상 적을 수 있다고 하는데, 어떻게 작동방식이 되는 것인지? 그리고 jsonParser 미들웨어와 cors 미들웨어를 use 메서드 안에 다같이 넣고 싶다면 어떻게 써야하는 것일까?

app.use('/', (req, res, next)=>{
	console.log('이것도 미들웨어랍니다?');
    next();
}, (req, res)=>{
	console.log('나는 이벤트 함수지롱');
})

위와 같이 미들웨어는 한 개 이상 쓰일 수 있고 미들웨어는 function (req, res, next){ } 로 쓰이는 것을 미들웨어라고 합니다.

미들웨어의 next 는 다음 미들웨어로 넘어갈 수 있게 됩니다. or 다음 이벤트 함수로 넘어갈 수 있게 됩니다.

const express = require('express');

app.use('/' (req, res, next)=>{
	if (true) next('route');  // 다음 라우트로 넘어갑니다.
    else next();  // 여기는 실행되지 않습니다.
}, (req, res, next)=>{
	console.log('이건 다음 미들웨어지롱');  // 여기는 실행되지 않습니다.
})

app.get('/', (req, res)=>{
	console.log('이건 다음 라우터지롱ㅋ'); // next('route')로 넘어온 여기가 실행됩니다.
})

위의 예시를 보면, if가 true니까 next('route')를 적어주면 같은 'route' 즉, 같은 경로에 있는 다음 미들웨어 or 이벤트 함수가 실행됩니다.

 

● 수업 이외의 공부

• 알고리즘 1개 풀기

참고했던 자료들

[EXPRESS] 📚 req.params / req.query / req.body 🤔 차이 정리

 

[EXPRESS] 📚 미들웨어 이론 & 실용 💯 정리