Express 5. 미들웨어 사용하기 body-parser

https://expressjs.com/en/resources/middleware/body-parser.html#bodyparserjsonoptions

Express body-parser middleware

body-parser 미들웨어를 사용해보자.

const express = require('express');
const app = express(); 
const fs = require('fs');
const template = require('./lib/template.js');
const path = require('path');
const sanitizeHtml = require('sanitize-html');
const qs = require('querystring');
const bodyParser = require('body-parser');

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

app.get('/', (req, res) => {
    fs.readdir('./data', (err, filelist) => {
        var title = 'Welcome home!';
        var description = 'Hello, Node.js';
        var list = template.list(filelist);
        var html = template.HTML(title, list,
          `<h2>${title}</h2>${description}`,
          `<a href="/create">create</a>`
        );
        res.send(html); 
    });
});

app.get('/page/:pageId', (req, res) => {
    fs.readdir('./data', (err, filelist) => {
        var filteredId = path.parse(req.params.pageId).base;
        console.log('pageId : ', filteredId);
        fs.readFile(`data/${filteredId}`, 'utf8', (err, description) => {
            var title = req.params.pageId;
            var sanitizedTitle = sanitizeHtml(title);
            var sanitizedDescription = sanitizeHtml(description, {
                allowedTags:['h1']
            });
            var list = template.list(filelist);
            var html = template.HTML(sanitizedTitle, list,
                `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
                ` <a href="/create">create</a>
                <a href="/update/${sanitizedTitle}">update</a>
                <form action="/delete_process" method="post">
                    <input type="hidden" name="id" value="${sanitizedTitle}">
                    <input type="submit" value="delete">
                </form>`
            );
            res.send(html);
        });
    });
});

app.get('/create', (req, res) => {
    fs.readdir('./data', (err, filelist) => {
        var title = 'WEB - create';
        var list = template.list(filelist);
        var html = template.HTML(title, list, `
          <form action="/create_process" method="post">
            <p><input type="text" name="title" placeholder="title"></p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
        `, '');
        res.send(html);
    });
});

app.post('/create_process', (req, res) => {
    var post = req.body;
    console.log(post);
    var title = post.title;
    var description = post.description;
    fs.writeFile(`data/${title}`, description, 'utf8', (err) => {
        res.redirect(`/page/${title}`);
    }); 
});

app.get('/update/:pageId', (req, res) => {
    fs.readdir('./data', (err, filelist) => {
        var filteredId = path.parse(req.params.pageId).base;
        console.log(req.params.pageId);
        fs.readFile(`data/${filteredId}`, 'utf8', (err, description) => {
          var title = req.params.pageId;
          var list = template.list(filelist);
          var html = template.HTML(title, list,
            `
            <form action="/update_process" method="post">
              <input type="hidden" name="id" value="${title}">
              <p><input type="text" name="title" placeholder="title" value="${title}"></p>
              <p>
                <textarea name="description" placeholder="description">${description}</textarea>
              </p>
              <p>
                <input type="submit">
              </p>
            </form>
            `,
            `<a href="/create">create</a> <a href="/update/${title}">update</a>`
          );
          res.send(html);
        });
    });
});

app.post('/update_process', (req, res) => {
    var post = req.body;
    var id = post.id;
    var title = post.title;
    var description = post.description;
    fs.rename(`data/${id}`, `data/${title}`, (err) => {
        fs.writeFile(`data/${title}`, description, 'utf8', (err) => {
            res.redirect(`/page/${title}`);
        });
    });
});

app.post('/delete_process', (req, res) => {
    var post = req.body;
    var id = post.id;
    var filteredId = path.parse(id).base;
    fs.unlink(`data/${filteredId}`, (err) => {
        res.redirect('/');
    });
});

app.listen(3000, () => console.log('Example app listening on port 3000!'));

body-parser 미들웨어를 사용함으로써 코드가 훨씬 간결해졌다.

 

톺아보기

1. body-parser 미들웨어 

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

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

form 데이터는 이런식으로 등록해서 사용한다. bodyParser.urlencoded({extended : false}) 이 부분이 미들웨어를 반환한다. main.js가 실행될 때 마다, 즉 사용자가 요청할 때마다 이것에 의해 만들어진 미들웨어가 실행된다. 이 미들웨어는 내부적으로 사용자가 전송한 post 데이터를 분석해서 post방식에 따라 설정된 콜백함수를 호출한다. 그리고 호출하면서 해당 request 객체의 body property를 생성하고 그 안에 데이터를 저장한다.

 

2. create_process 라우터

app.post('/create_process', (req, res) => {
    var body = '';
    req.on('data', (data) => {
        body = body + data;
    });
    req.on('end', () => {
        var post = qs.parse(body);
        console.log(post);
        var title = post.title;
        var description = post.description;
        fs.writeFile(`data/${title}`, description, 'utf8', (err) => {
            res.redirect(`/page/${title}`);
        });
        console.log('create', title);
    });
});

기존의 create_process 라우터의 코드이다. 저기서 querystring모듈을 사용하여 post데이터를 받아왔지만 body-parser를 사용하면 훨씬 쉽게 데이터를 받을 수 있다.

 

app.post('/create_process', (req, res) => {
	console.log(req.body);
	var post = req.body;
    var title = post.title;
    var description = post.description;
    fs.writeFile(`data/${title}`, description, 'utf8', (err) => {
    	res.redirect(`/page/${title}`);
    });
});

console.log(req.body)를 출력해서 데이터가 어떤 식으로 저장되는지 확인해보자.

 

먼저, /create 라우터에서는 post데이터를 title과 description이라는 이름에 저장해서 보낸다.

이런식으로 작성해서 제출해서 확인해보자.

test 리스트 항목이 정상적으로 생성되었다.

또한 콘솔에 req.body의 데이터가 입력된 것을 확인할 수 있다. 

 

이런식으로 update, delete 코드를 수정하여 body-parser 미들웨어를 통해 간단하게 만들 수 있다.