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. 전주호
    완료
  2. ldhan0715
    20-09-14
  3. 쑤우
    수강완료. 감사합니다~
  4. lmsds1
    body-parser설치가 안되시는분 계시나요? finalize 8에서 넘어가지 않고, 에러가 뜨네요.
    또한 Error: Cannot find module '../encodings' 이런 에러 뜨면서, 생성 및 수정 기능이 작동을 안하네요..
  5. lmsds1
    저는 왜 작동이 되지 않을까요.. 콘솔로 찍어봐도 req안에는 바디라는 속성이 없어서, undefined로 나오네요..
    대화보기
    • 크라흐마
      2019-11-27현재 기준 express 사용시 bodyparser를 따로 요청하지않아도 request.body 호출이 가능합니다. 참고하세요
    • 강다리
      저도 정확하게 아는건 아니지만 제가 아는선에서 말해볼게요 ..

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

      request.on('end' 의 'end'는 데이터의 입력이 끝났다는 이벤트라고 생각하시면
      둘의 차이를 아실거라고 생각됩니다.
      대화보기
      • request.on('data', function(data){
        body = body + data;
        });
        여기서 'data' 문자열이 들어가있는 건가요?
        작은 따옴표로 감싸져있는데 콜백에서는 data를 변수같이 불러오는 것처럼 보이는데...
        누가 저거 자세하게 설명해주실 수 있나요?
      • 굼벵이
        완료
      • express
        압축하는만큼 조금 더 느려지는거겠죠?
      • 지미츄
        윈도우로 캐시삭제 할때 favicon.ico 404 에러 뜨는건 어떻게 해결해야 할까요..
      • 코베
        와 압축을 정말 간단하게 ..
      • jo_onc
        와우! 압축 기능까지 엄청 간단하게 적용할 수 있네요!
        수업 감사합니다!
      • 연수아빠
        middle ware를 사용하면 코딩이 심플해지고 매우 편리함을 체험하였습니다.
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기