WEB3 - Express

Express 미들웨어 만들기

수업소개

Express의 미들웨어를 만드는 방법을 살펴봅니다. 

 

 

 

강의

 

 

 

소스코드

변경사항

main.js

버그알림 : 86번째 코드를 아래와 같이 수정해주세요. 
var list = template.list(filelist);
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());
app.get('*', function(request, response, next){
  fs.readdir('./data', function(error, filelist){
    request.list = filelist;
    next();
  });
});

//route, routing
//app.get('/', (req, res) => res.send('Hello World!'))
app.get('/', function(request, response) { 
  var title = 'Welcome';
  var description = 'Hello, Node.js';
  var list = template.list(request.list);
  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) { 
  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(request.list);
    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){
  var title = 'WEB - create';
  var list = template.list(request.list);
  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){
  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!')
});

 

댓글

댓글 본문
  1. 미들웨어를 사용하는 것뿐만 아니라 새로 만들 수 있다는 것도 알게 됨!
  2. 어흥
    230706
  3. 감자
    22.12.22.
  4. 당당
    2022.11.18
  5. xogk1128
    22.07.25 완료
  6. KiteJun
    미들웨어 2022-02-26
  7. 케굴
    2022-01-02
  8. 감자그라탕
    이번 강의는 정말 큰 의의가 있네요
    라우팅으로 사용하던 코드가 사실은 미들웨어!
    여러가지 언어를 공부하다 보면 이런 부분들이 있는 것 같습니다.
    쓰면서도 이게 무엇인지 모르고 사용하다가 그 정의를 알때의 기쁨이란 참 뿌듯하네요
    감사합니다
  9. chimhyangmoo
    21.03.23
  10. jeisyoon
    2021.03.15 Middleware 만들기 - OK
  11. hanel_
    21.2.15
  12. 김지호
    21 01 08
  13. 생활둘기
    2021 1 4
  14. 콜라
    20201025 완료
  15. Yong Hyun Lee
    완료 201003
  16. 전주호
    완료
  17. 전주호
    완료
  18. ldhan0715
    20-09-14
  19. 뚜루뚜루뚭
    감사합니다
  20. ㅋㅋㅋ
    감사합니다!
  21. 쑤우
    수강완료. 감사합니다~
  22. c#개발자
    app.use(function(request, response, next){
    db.query('select * from topic', function (error, topics, fields){
    // request.????? = topics;
    next();
    });
    });

    db에서는 request의 어떤 것(list? body?)을 써야할지 잘 모르겠네요..
    list는 오류나고 body는 출력해보니 {} 라고 뜨고 헷갈립니다.
  23. 굼벵이
    완료
  24. nmcl
    공통 처리의 힘..
  25. jo_onc
    크으 알면 알 수록 재밌네요
  26. Kyoungil Lee
    var express = require('express');
    var app = express();

    app.use(function(request,response,next){ // app.use는 미들웨어함수만 받는다.
    // next()는 다음 미들웨어를 실행한다.
    });

    app.get('*', function(request,response){ // app.get은 path('*')와 함수를 받는다.
    // post방식 접근에서는 실행되지않는다.
    });

    +express는 미들웨어로 구성되어있다고해도 과언이아니다!
  27. 삼고잉
    잘읽었습니다
  28. 연수아빠
    코딩이 편리해 지네요.