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

라우터 - 1) 주소체계변경

• /topic 으로 시작하는 라우터로 바꾸기

localhost:3000/topic/create 를 입력하면 에러가 뜬다.  topic에 해당하는 create 파일을 열려고 하기 때문이다. 우리의 의도는 이게 아니다. create 를 일종의 예약어로 쓰고 싶다. 그렇다면 pageId 앞에 코드를 옮겨야 한다. 순서가 중요하게 된다. 

creat, update, delete,pageId 등의 진입점과 반환하는 곳에도 /topic을 추가해줘야한다. 그리고 작성삭제업데이트에 해당하는 라우터를 pageId 위로 올려준다. 

 

강의코드 

main.js

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 ="/topic/create">create</a>`);
  response.send(html);
});

app.get('/topic/create',function(request,response){
  var title = 'Web - create';
  var list = template.list(request.list);
  var html = template.html(title,list,`
  <form action="/topic/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('/topic/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(`/topic/${title}`);
  })

});

app.get('/topic/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="/topic/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="/topic/create">create</a> <a href="/topic/update/${title}">update</a>`
    );
    response.send(html);
  });
});
 
app.post('/topic/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(`/topic/${title}`);
    });
  });

});

app.post('/topic/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.get('/topic/: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}`,
      // create로 진입하는 곳도 /topic 추가해준다.
      `<a href ="/topic/create">create</a>
      <a href="/topic/update/${sanitizedTitle}">update</a>
      <form action="/topic/delete_process" method="post" >
        <input type="hidden" name ="id"  value="${sanitizedTitle}">
        <input type="submit" value="delete">
      </form>`);
      response.send(html);
    }

  });
});







/*에러처리*/
// 미들웨어는 순차적으로 처리하니까 이렇게 코드를 뒤쪽에 써준다. 
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!')
});

template.js

var template = {
    html: function(title,list,body,control){
      return ` 
      <!doctype html>
      <html>
      <head>
        <title>WEB- ${title}</title>
        <meta charset="utf-8">
      </head>
      <body>
        <h1><a href="/">WEB</a></h1>
        ${list}
        ${control}
        ${body}
      </body>
      </html>
    `;
    },
    list : function(filelist){
      var list = `<ul>`;
      var i = 0 ;
      while(i<filelist.length){
        list = list +`<li><a href="/topic/${filelist[i]}">${filelist[i]}</a></li>`
        // html 반환해주는 곳도 경로가 page 에서 topic으로 바뀜
        i = i+1;
      }
      list = list + `</ul>`;
      return list;
    }
  }

  module.exports = template;

라우터 - 2) 파일로 분리 

routes라는 폴더를 만들고 topic.js 파일을 만들어준다. main.js에서 주소가 topic으로 시작한 라우트들을 다 topic.js로 옮겨준다. 

main.js에서는 express 모듈 자체를 호출하고 application 객체를 리턴하는 반면 routes/topic.js 에서는 express가 가지고 있는 Router라는 메서드를 호출하고 router를 리턴한다.

/* main.js */
var express = require('express');
var app = express();

/* routes/topic.js */
var express =require('express');
var router = express.Router();

이렇게 분리해준 후 topic 모듈을 사용하기 위해   
var topicRouter = require('./routes/topic');  app.use('topic', topicRouter); 코드를 추가해준다. 

 /topic으로 시작하는 주소들에게 topicRouter라는 미들웨어를 적용한 것이다. 

var express = require('express');
var app = express();
//express라는 모듈 자체를 호출함. application 객체를 리턴함. 
var fs = require('fs');
var path = require('path');
var qs = require('querystring');
var sanitizeHtml =require('sanitize-html');
var bodyParser = require('body-parser');
var compression = require('compression');
var template = require('./lib/template.js');
var topicRouter = require('./routes/topic')


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(); 
  });
});

// /topic 으로 시작하는 주소들에게 topicRouter라는 이름의 미들웨어를 적용하겠다.
app.use('/topic',topicRouter);

1) 위에서 app.use('topic',topicRouter);를 해줬기에  topicRouter 안에서는 경로에 /topic을 없애줘야한다. 
2)topic.js에는 app 이 아닌  router라는 객체를 반환하기에 app.get, app.post 등을 다 router.get, router.post로 바꿔줘야한다.

3) topic.js를 모듈로 사용하기 위해 module.exports = router; 를 추가해줘야한다. 

 

강의코드

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

/* 정적인 파일  찾는 코드*/
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.use('/topic',topicRouter);

/* 정적인 파일 추가 */
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 ="/topic/create">create</a>`);
  response.send(html);
});

//topic routing 



/*에러처리*/
// 미들웨어는 순차적으로 처리하니까 이렇게 코드를 뒤쪽에 써준다. 
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!')
});

 

/* routes/topic.js */
var express =require('express');
var router = express.Router();
var path = require('path');
var fs = require('fs');
var sanitizeHtml = require('sanitize-html');
var template = require('../lib/template.js');

//app.get -> router.get으로 바꿔줌

router.get('/create',function(request,response){
    var title = 'Web - create';
    var list = template.list(request.list);
    var html = template.html(title,list,`
    <form action="/topic/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);
  
  });
  
  router.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(`/topic/${title}`);
    })
  
  });
  
router.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="/topic/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="/topic/create">create</a> <a href="/topic/update/${title}">update</a>`
      );
      response.send(html);
    });
  });
   
  router.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(`/topic/${title}`);
      });
    });
  
  });
  
  router.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('/');
    });
  });
  
  
  
  router.get('/: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}`,
        // create로 진입하는 곳도 /topic 추가해준다.
        `<a href ="/topic/create">create</a>
        <a href="/topic/update/${sanitizedTitle}">update</a>
        <form action="/topic/delete_process" method="post" >
          <input type="hidden" name ="id"  value="${sanitizedTitle}">
          <input type="submit" value="delete">
        </form>`);
        response.send(html);
      }
  
    });
  });


  module.exports = router;