Express - 14.2. 라우터 - 파일로 분리

목표

현업에서는 라우트 개수가 1000개 2000개로 엄청 많다. 이를 정리하는 테크닉을 배우자.

(1) 주소체계 변경

(2) 파일로 분리 <- /topic 분리하기

 

---

express.Router

Express 라우팅

 

1. 라우터 만들기

routes 디렉토리를 생성하고 그 안에 topic.js를 만든다. main.js에서 /topic으로 시작되는 path에 대한 코드를 모두 topic.js로 이동한다.

<main.js>에서 아래와 같은 코드를 추가한다.

const topicRouter = require('./routes/topic');

방금 생성한 routes 디렉토리 속 topic.js를 가져온다.

app.use('/topic', topicRouter);

/topic인 path가 들어오면 topicRouter 미들웨어를 적용시킨다.

 

<topic.js>

1. Router 객체를 router로 return 받는다. (약속되어 있음)

var express = require('express');
var router = express.Router();

2. app.~~을 모두 router.~~로 변경한다

3. main.js에서 topic.js 파일이 모듈로 동작하기 위해서, 파일 바깥으로 누구를 export시킬지 정의한다.

module.exports = router;

4. main.js에서 path가 /topic인 경우 topicRouter 모듈이 실행이 된다. 따라서 topic.js에서 모든 path에 적힌 /topic을 지운다.

 

전체 코드

main.js

var express = require('express');
var app = express();
var fs = require('fs');
var qs = require('querystring');
var template = require('./lib/template');
var bodyParser = require('body-parser');
var port = 3000;
var compression = require('compression');
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(err, filelist){
    request.list = filelist;
    next();
  });
});

app.use('/topic', topicRouter);

// 1. 홈 페이지
// 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,
    `<a href="/topic/create">create</a>`,
    `<h2>${title}</h2>${description}
    <img src="/images/hello.jpg" style="width:300px"; display:block; margin-top: 10px;>`
  );
  response.send(html);
});

app.use(function(req, res, next){
  res.status(404).send('sorry cant find that!');
});

app.use(function(err, req, res, next){
  console.error(err.stack);
  res.status(500).send('something broke!');
});

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

routes/topic.js

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

//3. Create 버튼 클릭 시 페이지
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" 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);
  });
  
//4. create>제출 버튼 클릭 시 페이지
router.post('/create', 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}`);
    });
});
  
//5. update 버튼 클릭 시 페이지
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 부분
        `
        <form action="/topic/update" 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>
        `,
        ``);
        response.send(html);
    });
});
  
//6. update>제출 버튼 클릭 시 페이지
router.post('/update', function(request, response){
    console.log(request.list);
    var post=  request.body;
    var id = post.id;
    var title = post.title;
    var description = post.description;
    fs.rename(`data/${id}`, `data/${title}`, function(err){
        fs.writeFile(`data/${title}`, description, 'utf8',
        function(err) {
        response.redirect(`/topic/${title}`);
        });
    });
})

//7. delete 버튼 클릭 시 페이지
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('/');
    });
})

// 2. pageId 링크 클릭 시 페이지
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);
        var list = template.list(request.list);
        var html = template.html(sanitizedTitle, list,
            `<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>
            `,
            `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`);
        response.send(html);
        }
    });
});

module.exports = router;