express 라우터, 모듈로 분리하기

우선 아래 예시코드 부터 보자

import express from 'express';

const app = express();

app.use(express.json());

app.get('/posts', (req, res) => {
  res.status(201).send('GET: /posts');
});

app.post('/posts', (req, res) => {
  res.status(201).send('POST: /posts');
});

app.put('/posts/:id', (req, res) => {
  res.status(201).send('PUT: /posts/:id');
});

app.delete('/posts/:id', (req, res) => {
  res.status(201).send('DELETE: /posts/:id');
});

app.get('/', (req, res) => {
  res.status(201).send('GET: /users');
});

app.post('/', (req, res) => {
  res.status(201).send('POST: /users');
});

app.put('/:id', (req, res) => {
  res.status(201).send('PUT: /users/:id');
});

app.delete('/:id', (req, res) => {
  res.status(201).send('DELETE: /users/:id');
});

app.listen(8080);

post와 user에 대한 각각에 대해 get, post, put, delete가 반복되다 보니 코드가 중복되어 보인다.

한번 이 예시 코드를 깔끔하게 정리해보자.

라우트를 사용하여 정리하기

이때 express.route() 를 이용하면 공통된 경로를 모아서 라우트 체이닝으로 정리를 해줄수 있다.

import express from 'express';

const app = express();

app.use(express.json());

app
  .route('/posts')
  .get((req, res) => {
    res.status(201).send('GET: /posts');
  })
  .post((req, res) => {
    res.status(201).send('POST: /posts');
  });

app
  .route('/posts/:id')
  .put((req, res) => {
    res.status(201).send('PUT: /posts/:id');
  })
  .delete((req, res) => {
    res.status(201).send('DELETE: /posts/:id');
  });

app
  .route('/users')
  .get((req, res) => {
    res.status(201).send('GET: /users');
  })
  .post((req, res) => {
    res.status(201).send('POST: /users');
  });

app
  .route('/posts/:id')
  .put((req, res) => {
    res.status(201).send('PUT: /users/:id');
  })
  .delete((req, res) => {
    res.status(201).send('DELETE: /users/:id');
  });

app.listen(8080);

라우터 모듈로 분리하기

여기서 좀만 더 정리를 해보자. 하나의 파일에서 post와 user를 모두 작성하는 것은 가독성도 좋지 않고 규모가 커질 경우 유지보수하기가 힘들어질것이다.

express.router() 를 활용하여 모듈로 분리해보자.

우선 디렉토리의 구조를 아래와 같이 작성하자

.
├── app.js
└── routes
    ├── post.js
    └── user.js

• routes/post.js

import express from 'express';

const router = express.Router();

router.use((req, res, next) => {
  console.log('middleware for posts!');
  next();
});

router.get('/', (req, res) => {
  res.status(201).send('GET: /posts');
});

router.post('/', (req, res) => {
  res.status(201).send('POST: /posts');
});

router.put('/:id', (req, res) => {
  res.status(201).send('PUT: /posts/:id');
});

router.delete('/:id', (req, res) => {
  res.status(201).send('DELETE: /posts/:id');
});

export default router;

express.Router() 를 사용하여 router를 선언하고 router에 /posts 의 하위 경로대로 각 요청에 대한 응답의 처리를 명시한다.

마지막으로 해당 router를 export해준다.

• routes/user.js

import express from 'express';

const router = express.Router();

router.use((req, res, next) => {
  console.log('middleware for users!');
  next();
});

router.get('/', (req, res) => {
  res.status(201).send('GET: /users');
});

router.post('/', (req, res) => {
  res.status(201).send('POST: /users');
});

router.put('/:id', (req, res) => {
  res.status(201).send('PUT: /users/:id');
});

router.delete('/:id', (req, res) => {
  res.status(201).send('DELETE: /users/:id');
});

export default router;

post 라우터와 동일한 구조로 작성한다.

• routes/user.js

// in app.js
import express from 'express';
import userRouter from './routes/user.js';
import postRouter from './routes/post.js';

const app = express();

app.use(express.json());

app.use('/users', userRouter);
app.use('/posts', postRouter);

app.listen(8080);

최상위 파일인 app.js에서는 각각의 라우터 모듈을 임포트해와서 각 경로에 use로 연결해주면된다.