WEB3 - Express

WEB3 - Express

Express 미들웨어의 사용

수업소개

여기서는 미들웨어의 개념을 소개하고, 타인이 만든 미들웨어를 사용하는 방법을 알아봅니다. 

 

 

 

강의 1

body-parser를 이용해서 post 방식으로 전송된 form 데이터를 쉽게 가져오는 방법을 살펴보겠습니다. 

 

 

 

소스코드

변경사항

main.js

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

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

//route, routing
//app.get('/', (req, res) => res.send('Hello World!'))
app.get('/', function(request, response) { 
  fs.readdir('./data', function(error, filelist){
    var title = 'Welcome';
    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>`
    ); 
    response.send(html);
  });
});

app.get('/page/:pageId', function(request, response) { 
  fs.readdir('./data', function(error, filelist){
    var filteredId = path.parse(request.params.pageId).base;
    fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
      var title = request.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>`
      );
      response.send(html);
    });
  });
});

app.get('/create', function(request, response){
  fs.readdir('./data', function(error, 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>
    `, '');
    response.send(html);
  });
});

app.post('/create_process', function(request, response){
  var post = request.body;
  var title = post.title;
  var description = post.description;
  fs.writeFile(`data/${title}`, description, 'utf8', function(err){
    response.writeHead(302, {Location: `/?id=${title}`});
    response.end();
  });
});

app.get('/update/:pageId', function(request, response){
  fs.readdir('./data', function(error, filelist){
    var filteredId = path.parse(request.params.pageId).base;
    fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
      var title = request.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?id=${title}">update</a>`
      );
      response.send(html);
    });
  });
});

app.post('/update_process', function(request, response){
  var post = request.body;
  var id = post.id;
  var title = post.title;
  var description = post.description;
  fs.rename(`data/${id}`, `data/${title}`, function(error){
    fs.writeFile(`data/${title}`, description, 'utf8', function(err){
      response.redirect(`/?id=${title}`);
    })
  });
});

app.post('/delete_process', function(request, response){
  var post = request.body;
  var id = post.id;
  var filteredId = path.parse(id).base;
  fs.unlink(`data/${filteredId}`, function(error){
    response.redirect('/');
  });
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!')
});

 

 

 

강의 2

compression 미들웨어를 이용해서 컨텐츠를 압축해서 전송하는 방법을 살펴보겠습니다. 

 

 

 

소스코드 

변경사항

main.js

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

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

//route, routing
//app.get('/', (req, res) => res.send('Hello World!'))
app.get('/', function(request, response) { 
  fs.readdir('./data', function(error, filelist){
    var title = 'Welcome';
    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>`
    ); 
    response.send(html);
  });
});

app.get('/page/:pageId', function(request, response) { 
  fs.readdir('./data', function(error, filelist){
    var filteredId = path.parse(request.params.pageId).base;
    fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
      var title = request.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>`
      );
      response.send(html);
    });
  });
});

app.get('/create', function(request, response){
  fs.readdir('./data', function(error, 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>
    `, '');
    response.send(html);
  });
});

app.post('/create_process', function(request, response){
  var post = request.body;
  var title = post.title;
  var description = post.description;
  fs.writeFile(`data/${title}`, description, 'utf8', function(err){
    response.writeHead(302, {Location: `/?id=${title}`});
    response.end();
  });
});

app.get('/update/:pageId', function(request, response){
  fs.readdir('./data', function(error, filelist){
    var filteredId = path.parse(request.params.pageId).base;
    fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
      var title = request.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?id=${title}">update</a>`
      );
      response.send(html);
    });
  });
});

app.post('/update_process', function(request, response){
  var post = request.body;
  var id = post.id;
  var title = post.title;
  var description = post.description;
  fs.rename(`data/${id}`, `data/${title}`, function(error){
    fs.writeFile(`data/${title}`, description, 'utf8', function(err){
      response.redirect(`/?id=${title}`);
    })
  });
});

app.post('/delete_process', function(request, response){
  var post = request.body;
  var id = post.id;
  var filteredId = path.parse(id).base;
  fs.unlink(`data/${filteredId}`, function(error){
    response.redirect('/');
  });
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!')
});

 

package.json


{
  "name": "web2-nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/web-n/Nodejs.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/web-n/Nodejs/issues"
  },
  "homepage": "https://github.com/web-n/Nodejs#readme",
  "dependencies": {
    "body-parser": "^1.18.3",
    "compression": "^1.7.2",
    "express": "^4.16.3",
    "sanitize-html": "^1.18.2"
  }
}

 

댓글

댓글 본문
  1. qq
    미들웨어 개념 익히기
    답글
  2. 어흥
    230706
    답글
  3. Hojun Song
    2023-04-19
    답글
  4. 감자
    22.12.22.
    답글
  5. 감자
    22.12.22.
    답글
  6. 당당
    2022.11.17
    답글
  7. enty
    감사합니다
    답글
  8. 화려하게간다
    바디파서 유용하네~~~마!!!
    답글
  9. 케굴
    2022-01-02
    답글
  10. 트루트
    감사합니다.
    대화보기
      답글
    • ogod259
      express 4.16버전부터 body-parser가 내장되었기 때문에 따로 import 해주지 않으셔도 됩니다

      app.use(express.urlencoded({ extended: false }));
      답글
    • 이성민
      아래에 'bodyparser is not defined' 라고 오류 떠시는 분들은 맨 위 상단에 bodyparser 를 정의해 주시면 되는 것 같아요, 저두 이렇게 해결!.

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

      제가 혹시 틀리면 말씀해 주세요~~, ^^

      그리고 이고잉님!! 항상 감사드립니다~~^^
      답글
    • chimhyangmoo
      21.03.23
      답글
    • jeisyoon
      2021.03.14 Middleware 사용 - OK
      답글
    • 김지호
      21 01 08
      답글
    • 생활둘기
      2021 1 4
      답글
    • 콜라
      20201025 완료
      답글
    • Yong Hyun Lee
      완료 201003
      답글
    • 전주호
      완료
      답글
    • ldhan0715
      20-09-14
      답글
    • 쑤우
      수강완료. 감사합니다~
      답글
    • lmsds1
      body-parser설치가 안되시는분 계시나요? finalize 8에서 넘어가지 않고, 에러가 뜨네요.
      또한 Error: Cannot find module '../encodings' 이런 에러 뜨면서, 생성 및 수정 기능이 작동을 안하네요..
      답글 수정 삭제
    • lmsds1
      저는 왜 작동이 되지 않을까요.. 콘솔로 찍어봐도 req안에는 바디라는 속성이 없어서, undefined로 나오네요..
      대화보기
        답글 수정 삭제
      • 크라흐마
        2019-11-27현재 기준 express 사용시 bodyparser를 따로 요청하지않아도 request.body 호출이 가능합니다. 참고하세요
        답글 수정 삭제
      • 강다리
        저도 정확하게 아는건 아니지만 제가 아는선에서 말해볼게요 ..

        request.on('data' 의 'data'는 이벤트를 뜻합니다
        즉, 데이터가 들어왔을 때 발생하는 이벤트를 말하며
        콜백함수 내 data는 그 들어온 데이터를 가르키는 변수입니다.

        request.on('end' 의 'end'는 데이터의 입력이 끝났다는 이벤트라고 생각하시면
        둘의 차이를 아실거라고 생각됩니다.
        대화보기
          답글
        • 굼벵이
          완료
          답글 수정 삭제
        • express
          압축하는만큼 조금 더 느려지는거겠죠?
          답글
        • 지미츄
          윈도우로 캐시삭제 할때 favicon.ico 404 에러 뜨는건 어떻게 해결해야 할까요..
          답글 수정 삭제
        • 코베
          와 압축을 정말 간단하게 ..
          답글 수정 삭제
        • jo_onc
          와우! 압축 기능까지 엄청 간단하게 적용할 수 있네요!
          수업 감사합니다!
          답글 수정 삭제
        • 연수아빠
          middle ware를 사용하면 코딩이 심플해지고 매우 편리함을 체험하였습니다.
          답글
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기