[nodejs] express 라우터기능/ 미들웨어 나누기로 파일 쪼개기

0. 목차

1. 개요

2. 라우터 쪼개기

3. 미들웨어 쪼개기

1. 개요

라우터가 뭘까?

이제껏 만들었던 server.js 들에 만들었던 app.get 또는 app.post 같은 애들을 전부 라우터라고 한다.

 

https://kong-dev.tistory.com/128?category=998366 

[nodejs] todoApp async await 으로 조지기

내가 만들었던 todoApp은 매우 간단하고 기본적인 기능들로만 구성 되어있다.

그런데도 불구하고,

사용된 라우터의 갯수는 10개 가까이는 되고,

코드의 줄수는 80줄이 넘어간다.

 

그렇다면 만약에, 더 많은 기능이 들어가게 된다면,

얼마나 긴 코드가 만들어질지 생각만 해도 아득하다.

 

우선 코드가 긴게 왜 문제가 되는지 부터 생각을 해봐야한다.

첫번째는 가독성이다.

무조건 숏코딩이 좋은것은 아니라지만,

기왕이면 짧은 코드가 보기가 좋다.

 

두번째는 디버깅이 힘들다.

코드에서 에러가 발생했을 때,

모든 라우터가 하나의 파일에 들어가 있다면,

어디서 오류가 났고, 어딜 수정해야되는지 찾는것도 굉장히 고된일일 것이다.

 

세번째 유지 / 보수 가 어렵다.

라우터를 쪼개지 않고, 

하나의 파일에서 모든 라우터를 관리한다면,

수정해야 되는 코드를 찾는 것도 굉장히 어려울 것이다.

 

그렇기 때문에 우리는 라우터를 쪼개서 관리해야한다.

그리고 너무너무너무 고맙게도,

express는 라우터를 분리할 수 있는 방법을 제공해준다.

감사합니다. express

 

 

2. 라우터 쪼개기

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('hello main');
});

app.get('/board/list', (req, res) => {
  res.send('hello list');
});

app.get('/board/view', (req, res) => {
  res.send('hello view');
});

app.get('/board/write', (req, res) => {
  res.send('hello write');
});

app.post('/board/write', (req, res) => {
  res.send('hello write post');
});

app.get('/board/edit', (req, res) => {
  res.send('hello edit');
});

app.post('/board/edit', (req, res) => {
  res.send('hello edit post');
});

app.post('/board/delete', (req, res) => {
  res.send('hello delete');
});

app.get('/user/login', (req, res) => {
  res.send('user login');
});

app.post('/user/login', (req, res) => {
  res.send('user login post');
});

app.get('/user/profile', (req, res) => {
  res.send('user profile');
});

app.get('/user/logout', (req, res) => {
  res.send('user login');
});

app.post('/user/login', (req, res) => {
  res.send('user login');
});

app.listen(3000);

이제껏 만들었던 server.js 의 모습은 전부 이런형태였다.

모든 라우터가 하나의 파일에서 관리된다.

 

고작 res.send 만해주고 있음에도 굉장히 보기가 불편하고, 마음도 불-편하다.

 

그럼 이제 express가 제공해주는 라우터 분리 기능을 통해 라우터를 쪼개보자.

우선 route 라는 디렉토리를 만들고,

그 안에다 board.js 파일을 만들어주자.

 

 

그리고 board.js 파일에 가장 기본적인 세팅을 해주면 된다.

const express = require('express');

const router = express.Router();

module.exports = router;

 

그리고 server.js 에서 require로 모듈을 땡겨와주면 된다.

const boardRouter = require('./route/board.js');

 

그리고 board 와 관련된 모든 라우터를 server.js 에서 board.js 로 옮겨온 뒤에

app.어쩌구 부분을 router.어쩌구로 바꿔 주면 된다.

그리고 경로도 /board/저쩌구를 /저쩌구로 바꿔준다

const express = require('express');

const router = express.Router();

router.get('/list', (req, res) => {
  res.send('hello list');
});

router.get('/view', (req, res) => {
  res.send('hello view');
});

router.get('/write', (req, res) => {
  res.send('hello write');
});

router.post('/write', (req, res) => {
  res.send('hello write post');
});

router.get('/edit', (req, res) => {
  res.send('hello edit');
});

router.post('/edit', (req, res) => {
  res.send('hello edit post');
});

router.post('/delete', (req, res) => {
  res.send('hello delete');
});

module.exports = router;

 

그리고 마지막으로 server.js 에서 적용을 해주면 된다.

 

app.use('/board', boardRouter);

요렇게.

app.use를 이용하기 때문에 /board 의 모든 하위 경로에 접속했을때,

boardRouter가 동작하고,

board.js 파일에 있는 해당 라우터가 실행된다.

 

user 도 똑같이 처리해주면 된다.

 

그러면

const express = require('express');
const boardRouter = require('./route/board.js');
const userRouter = require('./route/user.js');

const app = express();

app.get('/', (req, res) => {
  res.send('hello main');
});

app.use('/board', boardRouter);

app.use('/user', userRouter);

app.listen(3000);

server.js 파일이 매우 깰-끔 해졌다.

3. 미들웨어 쪼개기

그런데에

 

const express = require('express');

const router = express.Router();

router.get('/list', (req, res) => {
  res.send('hello list');
});

router.get('/view', (req, res) => {
  res.send('hello view');
});

router.get('/write', (req, res) => {
  res.send('hello write');
});

router.post('/write', (req, res) => {
  res.send('hello write post');
});

router.get('/edit', (req, res) => {
  res.send('hello edit');
});

router.post('/edit', (req, res) => {
  res.send('hello edit post');
});

router.post('/delete', (req, res) => {
  res.send('hello delete');
});

module.exports = router;

const express = require('express');

const router = express.Router();

router.get('/login', (req, res) => {
  res.send('user login');
});

router.post('/login', (req, res) => {
  res.send('user login post');
});

router.get('/profile', (req, res) => {
  res.send('user profile');
});

router.get('/logout', (req, res) => {
  res.send('user login');
});

router.post('/login', (req, res) => {
  res.send('user login');
});

module.exports = router;

 

이렇게 해놓고 나니까 board.js 와 user.js 를 보고있으면 또 굉장히 심란하다.

 

놀랍게도 여기서 한번 더 쪼갤수 있다.

바로 미들웨어들만 따로 떼서 파일 하나에 몰아넣을 수가 있다.

 

미들웨어는 (req, res)=>{} 요거다.

이제껏 그냥 콜백함수라 불렀는데

미들웨어라는 이쁜 명칭이 있으니 이제 미들웨어라고 부르겠다.

 

우선 board.js 를 수정해보자.

route 폴더안에 board.controller.js 파일을 만들어서 여기다가 board에 달려있는 모든 미들웨어를 모아둘거다.

 

exports.listGetMid = (req, res) => {
  res.send('hello list');
};

exports.viewGetMid = (req, res) => {
  res.send('hello view');
};

exports.writeGetMid = (req, res) => {
  res.send('hello write');
};

exports.writePostMid = (req, res) => {
  res.send('hello wirte Post');
};

exports.editGetMid = (req, res) => {
  res.send('hello edit');
};

exports.editPostMid = (req, res) => {
  res.send('hello edit post');
};

exports.delGetMid = (req, res) => {
  res.send('hello delete');
};

board.controller.js 파일

 

const express = require('express');
const boardMid = require('./board.controller.js');

console.log(boardMid);
const router = express.Router();

router.get('/list', boardMid.listGetMid);

router.get('/view', boardMid.viewGetMid);

router.get('/write', boardMid.writeGetMid);

router.post('/write', boardMid.writePostMid);

router.get('/edit', boardMid.editGetMid);

router.post('/edit', boardMid.editPostMid);

router.get('/delete', boardMid.delGetMid);

module.exports = router;

board.js 파일

 

요렇게 나눌수 있다.

 

그럼 아까보다 훨씬 깔끔해진것을 확인할 수 있다.

 

이와 마찬가지로 user.js 도 정리해주면된다.

 

여기서 조금더 손보자면 route 안에서 

board 디렉토리와 user 디렉토리를 만들어서 각각 관리해준다면 훨씬 깔끔하게 쓸 수 있을거 같다.

 

아주 이쁘다.