◀️ 🌱 April 🌱 ▶️
일	월	목	금	토
		0	0	0
0	0	0	0	0
0	0	0	0	0
0	0	0	0	0
0	0

[Node.js] body-parser 패키지

2023. 11. 9. 15:45

728x90

body-parser 패키지

들어가며

Node.js의 body-parser 패키지에 대해서 알아보자.

`body-parser` 패키지

개념

HTTP 요청의 본문(body) 데이터를 파싱하고, 이 데이터를 JavaScript 객체로 변환해주는 미들웨어(Middleware) 패키지
주로 Express.js와 함께 사용되며, 클라이언트가 서버에 데이터를 전송할 때, 이 데이터를 서버에서 사용하기 쉽도록 가공하는 데 도움을 준다.
body-parser는 다양한 데이터 형식을 파싱할 수 있으며, 가장 일반적으로 JSON, URL-encoded 데이터, XML 및 기타 데이터 형식을 처리하는 데 사용된다.

수행할 수 있는 기능

JSON 데이터 파싱: 클라이언트가 JSON 형식의 데이터를 POST 또는 PUT 요청을 통해 전송할 때, body-parser는 이 데이터를 JavaScript 객체로 변환한다.
URL-encoded 데이터 파싱: 클라이언트가 HTML 폼을 통해 제출한 데이터를 처리할 때, body-parser는 URL-encoded 데이터를 JavaScript 객체로 파싱한다.
Raw 데이터 및 Text 데이터 처리: body-parser는 raw 데이터나 일반 텍스트 데이터도 파싱할 수 있다.
파일 업로드 처리: body-parser를 사용하여 파일 업로드 요청을 처리할 수 있으며, 업로드된 파일의 메타데이터 및 바이너리 데이터를 처리할 수 있다.

설치

npm을 이용하여 다음 명령을 실행하여 설치할 수 있다.


			
			
			
		
> npm install body-parser

사용 예

index.js


			
			
			
		
import express from "express";
import bodyParser from "body-parser";
 
// 파일 경로 설정
import { dirname } from "path";
import { fileURLToPath } from "url";
const __dirname = dirname(fileURLToPath(import.meta.url));
 
const app = express();
const port = 3000;
 
app.use(bodyParser.urlencoded({ extended: true }));   
 
app.get("/", (req, res) => {
  res.sendFile(__dirname + "/public/index.html");
});
 
app.post("/submit", (req, res) => {
  console.log(req.body);
});
 
app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

./public/index.html


			
			
			
		
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Band Name Generator</title>
</head>
 
<body>
  <h1>Band Name Generator</h1>
  <form action="/submit" method="POST">
    <label for="street">Street Name:</label>
    <input type="text" name="street" required>
    <label for="pet">Pet Name:</label>
    <input type="text" name="pet" required>
    <input type="submit" value="Submit">
  </form>
</body>
 
</html>

실시간으로 업데이트된 내용을 반영 및 확인하기 위해 nodemon을 이용하여 명령을 실행해본다.
- nodemon은 npm install nodemon 명령을 실행하여 설치할 수 있다.


			
			
			
		
> nodemon index.js

로컬 서버(localhost:3000)에 접속하여 Street Name과 Pet Name을 적고 [Submit] 버튼을 클릭한다.


			
			
			
		
[nodemon] 3.0.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node index.js`
Listening on port 3000
[nodemon] restarting due to changes...
[nodemon] starting `node index.js`
Listening on port 3000
{ street: 'abde', pet: 'dear' }

입력하고 제출했던 내용을 터미널에서 확인할 수 있다.

참고 사이트

body-parser

Node.js body parsing middleware. Latest version: 1.20.2, last published: 9 months ago. Start using body-parser in your project by running $n \pm i b o d y - p a r s e r$ $npm i body-parser$ . There are 23188 other projects in the npm registry using body-parser.

www.npmjs.com

728x90

저작자표시 비영리 변경금지

'Programming > Node.js' 카테고리의 다른 글

[Node.js] 모듈 설치 시 의존성 문제 해결하기 (npm-check-updates) (1)	2023.11.27
[Node.js] PostgreSQL 설치 및 사용해보기 (0)	2023.11.17
[Node.js] EJS(Embedded JavaScript) (0)	2023.11.09
[Node.js] morgan 패키지 (0)	2023.11.09
[Node.js] 노드몬(nodemon) 패키지 (0)	2023.11.08
[Node.js] Express.js (0)	2023.11.08
[Node.js] URL QR 코드 생성기 만들기 (0)	2023.11.07
[Node.js] 모듈 불러오는 방식 (require, import) (0)	2023.11.07

Per ardua ad astra."Hello, World!" 🤖

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Per ardua ad astra.

"Hello, World!" 🤖

[Node.js] body-parser 패키지

body-parser 패키지

들어가며

`body-parser` 패키지

개념

수행할 수 있는 기능

설치

사용 예

참고 사이트

'Programming > Node.js' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

	import express from "express";
	import bodyParser from "body-parser";

	// 파일 경로 설정
	import { dirname } from "path";
	import { fileURLToPath } from "url";
	const __dirname = dirname(fileURLToPath(import.meta.url));

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

	app.use(bodyParser.urlencoded({ extended: true }));

	app.get("/", (req, res) => {
	res.sendFile(__dirname + "/public/index.html");
	});

	app.post("/submit", (req, res) => {
	console.log(req.body);
	});

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

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Band Name Generator</title>
	</head>

	<body>
	<h1>Band Name Generator</h1>
	<form action="/submit" method="POST">
	<label for="street">Street Name:</label>
	<input type="text" name="street" required>
	<label for="pet">Pet Name:</label>
	<input type="text" name="pet" required>
	<input type="submit" value="Submit">
	</form>
	</body>

	</html>