[생활코딩] Node.js 강의 13일차 (Web3-Express)

정적인 파일의 서비스 

• public 폴더를 만들고, 이미지를 저장할 폴더를 하나 더 만든다. 그 폴더 안에 보여주고자 하는 파일을 넣는다. 
•  아래와 같이 'public 폴더 안에 static 파일을 찾는다' 라는 코드를 작성해주고 
• app.use(express.static('public'));
• 아래와 같이 welcome 페이지에 정적인 파일이 뜰 수 있도록 
  main.js 의 루트 라우트로 가서 정적인 파일의  디렉토리를 입력해준다. 
  <img src="images/hello.jpg" style="width:300px; display:block; margin-top:10px;">
• https://expressjs.com/ko/starter/static-files.html

Express에서 정적 파일 제공

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}
    <img src="images/hello.jpg" style="width:300px; display:block; margin-top:10px;">
    `,
  `<a href ="/create">create</a>`);
  response.send(html);
});

에러 처리 

• 미들웨어는 순차적으로 처리하니까 에러 핸들링 코드는  뒤쪽에 써줘야한다. 
• readfile 부분에서 , 읽을 파일이 없다면 콜백함수를 호출해  첫번째 파라미터인 err 객체를 전달하도록 되있다.
  next(err)로 error 를 처리해주는 미들웨어를 호출한다. 
  (참고 : next 함수에 아무인자가 없거나 route가 있다면 정상적이고 , 그 외의 데이터가 들어간다면 에러라고 인식하도록 하는 express 약속이 있음. 또 에러핸들링 미들웨어는 인자가 4개라는 약속이 있음) 

app.get('/page/:pageId', function(request, response,next){
  var filteredID = path.parse(request.params.pageId).base;
  fs.readFile(`data/${filteredID}`,'utf8',function(err,description){
    if (err){
      
      next(err);

    }else{
      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(title,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);
    }

  });
});

(좌) 에러 처리 X (우) 에러 처리 O 

 

강의 코드 

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

/* 정적인 파일  찾는 코드*/
app.use(express.static('public'));
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(); 
  });
});

/* 정적인 파일 추가 */
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}
    <img src="images/hello.jpg" style="width:300px; display:block; margin-top:10px;">
    `,
  `<a href ="/create">create</a>`);
  response.send(html);
});

app.get('/page/:pageId', function(request, response,next){
  var filteredID = path.parse(request.params.pageId).base;
  fs.readFile(`data/${filteredID}`,'utf8',function(err,description){
    if (err){

      next(err);

    }else{
      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(title,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="text"></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.redirect(`/?id=${title}`);
  })

});

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(request.list);
    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>`
    );
    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.writeHead(302, {Location: `/page/${title}`});
      response.end();
    });
  });

});

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.use(function(req, res, next) {
  res.status(404).send('Sorry cant find that!');
});
 
//next를 통해 전달받은 err 데이터가 담김. 
app.use(function (err, req, res, next) {
  console.error(err.stack)
  res.status(500).send('Something broke!')
});


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