[Node.js] 바디파서 미들웨어
바디파서 미들웨어
서버로 요청을 보낼 때, 요청 본문에 담긴 것을 파싱하는 미들웨어로,
익스프레스에서 자주 사용하는 미들웨어 중 하나임.
* 바디는 요청 본문, 파서는 파싱을 처리해주는 것을 뜻한다.
* 파싱이란, 요청할 때 전송한 자료를 프로그램에서 사용할 수 있는 형식으로 변환하는 것을 뜻한다.
바디파서는 요청 본문에 어떤 유형의 자료형을 포함하는 가에 따라 사용하는 함수가 달라진다.
| 함수 | 설명 |
| .json() | JSON 형식의 본문을 파싱 |
| .urlencoded() | URL로 인코딩된 본문을 파싱 |
| .raw() | 가공되지 않은 바이너리 자료를 파싱 |
| .text() | 텍스트 형식의 본문을 파싱 |
* urlencoded 란?
: 구글 검색창에 아무 검색어를 입력하면, url에 search?q=검색내용&oq=검색내용&gs_lcrp=알수없는문자... 이런 식으로 데이터가 서버로 넘어간다. (key=value가 &로 연결된 형태의 데이터를 쿼리 스트링 이라 한다)
서버로 넘어가는 데이터가 form에 담겨서 넘어가는 게 아니라, url을 통해서 쿼리스트링으로 넘겨지는 데이터를 어떻게 파싱할 것인지 지정하는 게 urlencoded 함수이다.
예전 버전의 익스프레스에서는 위와 같은 함수를 사용하려면 바디파서 모듈을 따로 설치했어야 했지만,
최신 버전의 익스프레스에서는 일부 바디파서 기능이 익스프레스 형식에 포함되어 있다.
JSON형식, urlencoded 형식이 익스프레스 내장 함수에 포함되어 있어서 바로 사용할 수 있고,
raw 형식과 text 형식은 바디파서를 따로 설치한 다음 사용할 수 있다.
아래와 같이 작성하여 미들웨어로 등록할 수 있다.
app.use(express.json());
app.use(express.urlrecoded({ extended: true }));
urlrecoded 함수에는 extended:true 와 extended:false 옵션이 있음.
extended:true 일 경우, 쿼리 스트링이 중복된 개체도 처리할 수 있다. ( 좀 복잡한 자료 형태더라도 처리할 수 있는 옵션)
보통은 extended:true 옵션을 넣고 사용한다.
바디파서 미들웨어 사용해보기 (예제 코드)
app.js
const express = require('express');
const app = express();
//메인 화면
app.get("/", (req, res)=>{
res.send("Hello Node!");
})
//바디파서 미들웨어 등록
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
//라우터 파일
app.use("/contacts", require("./routes/contactRoutes"));
app.listen(3000, () =>{
console.log("서버 실행중");
})MyContacts 라는 프로젝트 아래에 app.js 파일 내용이다.
app.use로 json 형식과 urlencoded 형식을 처리하는 바디파서 미들웨어를 등록하였고,
라우터 파일도 미들웨어로 등록했다.
라우터 최상위 경로는 /contacts 로 지정했다. (localhost:3000/contacts 관련 경로들만 관리)
라우터 파일 경로는 MyContacts > routes > contactRoutes.js 이다.
contactRoutes.js
const express = require('express');
const router = express.Router();
//목록조회, 데이터 저장
router.route("/")
.get((req,res)=>{
res.send("contacts 목록 조회");
})
.post((req,res)=>{
console.log(req.body); //요청본문으로 오는 데이터 찍어보기
res.send("contacts 데이터 create")
});
//(특정 id) 조회, 수정 삭제
router.route("/:id")
.get((req, res)=>{
res.send(`특정 id ${req.params.id}의 연락처 조회`);
})
.put((req, res)=>{
res.send(`특정 id ${req.params.id}의 연락처 수정`);
})
.delete((req, res)=>{
res.send(`특정 id ${req.params.id}의 연락처 삭제`);
});
module.exports = router;localhost:3000/contacts 과 localhost:3000/contacts/:id
위 두 주소로 들어오는 get, post, put, delete 의 라우터 처리의 내용이다.
localhost:3000/contacts로 post 요청할 때, 요청의 바디본문(req.body) 를 콘솔창에 찍어보려고 한다.
*위와 같이 console.log(req.body); 를 할 경우, json 형식의 파싱이 필요하다.
즉, 메인 실행파일인 app.js에 app.use(express.json()); 으로 미들웨어를 등록해야 정상적으로 내용이 잘 찍힌다.
미들웨어 등록하지 않을 경우 undefinded 가 출력된다. (파싱이 제대로 이뤄지지 않음)
그 다음 썬더프로젝트를 열어 테스트 해본다.
1. 먼저 서버를 시작한다. (nodemon app.js)
2. 좌측 번개 아이콘 클릭 > New Request 클릭 > POST 선택하고 localhost:3000/contacts 작성
3. Body 선택하여 json 형식의 임의데이터 작성 > Send 버튼 클릭
4. 콘솔창에 console.log(req.body) 가 잘 찍힌 것을 확인한다.
정리
위와 같이, 요청 본문(req.body)을 프로그래밍에 사용할 수 있도록 파싱하려면,
바디파서 미들웨어를 꼭 등록해주어야 한다!
활용
(...생략...)
//목록조회, 데이터 저장
router.route("/")
.get((req,res)=>{
res.send("contacts 목록 조회");
})
.post((req,res)=>{
const { id, name } = req.body; //구조분해할당
if( !id || !name ){
return res.send("필수 값이 입력되지 않았습니다.");
}
res.send("contacts 데이터 create")
});
(...생략...)contactRoutes.js 에서 localhost:3000/contacts 의 post 요청에서
id와 name 값을 검사하여 하나라도 넘어오지 않으면 필수 값이 입력되지 않았습니다 라고
브라우저에 넘겨줄 수 있다.
잘 실행되었다.
https://youtu.be/WxbD4o4YQEg?feature=shared