반응형
12-24 03:40
Today
Total
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
관리 메뉴

개발하는 고라니

[Node.js] Body-parser 본문

Framework/Node.js

[Node.js] Body-parser

조용한고라니 2021. 1. 8. 02:00
반응형

Node.js는 보편적으로 'Express'라는 웹 프레임워크를 사용한다. 최근 'koa'의 사용빈도도 증가추세이다. 'koa'는 'Express'를 개발한 사람들이 모종의 이유로 새로이 만든 프레임워크로 알고있다. 그래서 사용방법도 거의 비슷하다고 볼 수 있다.

 

Express, koa같은 웹 프레임워크가 무엇인지에 대해서는 나중에 다시 포스팅 하기로 하고...

오늘은 node.js에서 <form method="post">로 보낸 데이터를 사용해보는 방법을 익힌다.


'body-parser'를 사용하기 전엔 다음과 같은 방법을 사용했다.

'/create'라는 URL로 id와 비번을 보내 회원가입을 하는 작업을 예를 들어보자.

<form action="/create" method="post">
	<input type="text" name="id" value="example">
    <input type="password" name="pw" value="1111">
    <button type="submit">제출</button>
</form>
const express = require('express');
const qs = require('qs');
const app = express()

app.post('/create', (request, response) => {
    
    let body = '';
    
    request.on('data', (data) => {
      body += data;
    })
    
    request.on('end', () => {
      const post = qs.parse(body);
      const id = post.id;
      const pw = post.pw;
    })
  })

body안에 {id:"example", pw:"1111"} 같은 데이터를 담고 '/create'로 넘어왔다. 이를 사용하기 위해선

 

1) 빈 문자열 body를 선언한다.

2) request에서 data를 꺼내 body에 이어붙인다.

3) qs(query string)을 사용해서 qs.parse()로 body를 파싱해 post라는 변수에 대입한다.

4) post.id 또는 post.pw를 이용해 데이터를 사용한다.

 

위와 같은 방법을 사용해도 된다. 하지만 좀 더 express한 방법을 사용한다면, 'body-parser' 미들웨어를 쓰면 된다.


* body : 웹 브라우저 쪽에서 요청한 정보의 본체

* header : 그 본체를 설명하는 데이터

* body-parser : 분석해서 필요한 형태로 가공해주는 프로그램

 

# 설치 및 사용 방법

$ npm install body-parser --save

[--save] 옵션을 주면, package.json의 dependencies에 자동으로 추가된다.

 

* Body-parser의 Document에 쓰여진 사용 예는 다음과 같다.

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

//폼 데이터는 이것과 같이 처리하면 된다.
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

//JSON 데이터는 이것과 같이 처리하면 된다.
// parse application/json
app.use(bodyParser.json())

app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:\n')
  res.end(JSON.stringify(req.body, null, 2))
})
app.use(bodyParser.urlencoded({ extended: false }))

이 코드가 실행되면,

bodyParser.urlencoded({ extended: false })

미들웨어가 들어오게 된다.

 

이는 사용자가 전송한 post 데이터를 내부적으로 분석하여 모든 데이터를 가져온 다음, Callback을 호출하도록 되어있다.

뭐 중요한 얘기는 아니다. 우리같은 사용자는 그저 사용할 줄만 알면 되니까.

 

그럼 어떻게 사용하는 것 일까...아주 간단하다. request의 Property로 body라는 것이 생겼다. 무엇에 의해?

'body-parser'에 의해.

const express = require('express'); 
const bodyParser = require('body-parser');
const app = express()

app.use(bodyParser.urlencoded({ extended: false })) //필수

app.post('/create', (request, response) => {
	
    const post = request.body;
    const id = post.id;
    const pw = post.pw;
})

아까 봤던 코드와 비교해보자

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

app.post('/create', (request, response) => {
    
    let body = '';
    
    request.on('data', (data) => {
      body += data;
    })
    
    request.on('end', () => {
      const post = qs.parse(body);
      const id = post.id;
      const pw = post.pw;
    })
  })

와 정말 간단해졌다. 더이상 body라는 빈 문자열도 필요없고, request에다가 점 찍고 뭐하고 뭐하고 할 필요가 없다. 

이래야 좀 더 express다운 코드라고 할 수 있겠다.

 

 

<본 내용은 생활코딩을 참고하여 작성되었습니다.>

opentutorials.org/course/3370/21397

반응형

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

[Node.js] Node.js Tutorial (3) - File System  (0) 2021.04.16
[Node.js] Node.js Tutorial (2)  (0) 2021.04.16
[Node.js] Node.js Tutorial (1)  (0) 2021.04.16
[Node.js] Express Middleware의 Types  (0) 2021.01.08
[Node.js] Middleware 생성  (0) 2021.01.08
Comments