● 오늘 공부한 것
- express
Express "Hello World" 예제
Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. 이 앱은 하나의 파일로 된 앱이며 Express 생성기를 통해 얻게 되는 앱과는 같지 않습니다. (이 예제
expressjs.com
Express 기본 라우팅
기본 라우팅 라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말합니다. 각 라우트
expressjs.com
어제 과제를 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 🤔 차이 정리
req.params 라우터의 매개변수 예를 들어 /:id/:name 경로가 있으면 ":id"속성과 ":name"속성을 req.params.id, req.params.name으로 사용할 수 있다. www.example.com/post/1/jun 일 경우 1과 jun을 받는다. // 요청온 url : www
inpa.tistory.com
[EXPRESS] 📚 미들웨어 이론 & 실용 💯 정리
미들웨어 작성 미들웨어는 익스프레스의 핵심이다. 요청과 응답의 중간(middle, 미들)에 위치하여 미들웨어 라고 부른다. 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고, 나쁜 요청
inpa.tistory.com