라우터 분리하기

Router로 분리에 필요성에 대해서 알아보자

⛔️ 문제의 app.js - AS-IS

아래 코드는 이전 Basic routing에서 라우팅 작업을 했던 코드입니다.

동작은 잘 되는 코드이지만, Application-Level인 app.js에 역할이 너무 많다는 것입니다.

 

app.js에 역할

• Router관련된 로직
• Server를 띄워주는 app.listen()로직

현재 아래 코드는 Application-Level에 routing작업이 같이 작성되어 있습니다.

프로젝트 규모가 커질수록 routing작업이 많아집니다.

routing작업이 많아진다는 의미는 여러 경로로 갈 수 있는 화면들이 많아진다는 것을 의미합니다.

 

 

결론적으로, 서로 연관되어있는 역할에 Router끼리 파일을 만들어서 관심사를 분리해야합니다.

const express = require('express')
const app = express()
const port = 3000

const { StatusCodes } = require('http-status-codes');
const bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

app.get('/', (req, res) => {
  res.send('Hello World, I\'m Root');
})

app.get('/user', (req, res) => {
    res.status(StatusCodes.OK).json({
        message: "getUser"
    });
});

app.post('/user', (req, res) => {
    res.status(StatusCodes.CREATED).json({
        message: "create"
    });
    console.log(req.body);
});

app.patch('/users', (req, res) => {
    res.status(StatusCodes.OK).json({
        message: "updated user"
    });
});

app.delete('/users', (req, res) => {
    res.status(StatusCodes.delete).json({
        message: "delete user"
    });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
});

따라서 위와 같은 app.js파일에 있는 회원(User)에 관련된 라우터(router)를 분리하는 작업을 해보자

📁 routes, controllers 폴더 생성

controller와 routes 분리!!

controllers와 routes 폴더를 생성하였습니다.

빨간건 엔드포인트요.. 파란건 핸들러일세..

 

라우팅 코드는 다음과 같습니다. PATH와 HANDLER를 받습니다.

app.METHOD(PATH, HANDLER)

빨간박스 부분은 routes로, 파란박스 부분은 controller로 분리 할 수 있다.

📂 Controller

위에 클라이언트가 요청한 endpoint에 로직을 수행하는  HANDLER에 대한 로직은 다음과 같습니다.

const { StatusCodes } = require('http-status-codes');

const getUsers = (req, res) => {
    console.log("get users called");
    res.status(StatusCodes.OK).send("get users");
};

const getUser = (req, res) => {
    const { id } = req.params;
    console.log("get user called");
    res.status(StatusCodes.OK).send("get user");
};

const createUser = (req, res) => {
    res.status(StatusCodes.CREATED).json({
        user: "user1"
    });
}

const removeUser = (req, res) => {
    res.status(StatusCodes.OK).json({
        message: "removed"
    });
};

const updateUser = (req, res) => {
    res.status(StatusCodes.OK).json({
        message: "updated"
    });
}

module.exports = {
    getUsers,
    getUser,
    createUser,
    removeUser,
    updateUser,
}

module.exports로 모든 함수를 외부에서도 사용할 수 있게끔 모듈화 하였다.

📂 routes

routes에 역할은 클라이언트가 어떤 경로로 요청하는지에 대한 엔드포인트(endpoint) 역할을 합니다.

const express = require("express")
const router = express.Router();

const { getUser, getUsers, createUser, updateUser, removeUser } = require("../controllers/users");

router.route("/")
      .get(getUsers)
      .post(createUser);

router.route("/:id")
      .get(getUser)
      .patch(updateUser)
      .delete(removeUser);

module.exports = router;

router를 모듈화 하여 router-Level에서 관리하고 application-Level에서 미들웨어를 통하여 클라이언트와 서버 사이에서 중개자 역할로 

사용 할 수 있습니다.

app.js - TOBE

위에 ⛔️ 문제의 app.js - AS-IS보다 코드가 많이 줄어든 것을 확인 할 수 있다.

const express = require('express')
const app = express()
const port = 3000

const { StatusCodes } = require('http-status-codes');
const bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

const usersRouter = require('./routes/users');
app.use("/users", usersRouter);

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
});

 

마치며,

최적화의 끝은 없다. 

좋은 퍼포먼스를 내고, 유지보수를 하기 위해서는 많은 고민이 필요하지만 필요하다고 느낄때 하는게 가장 좋은 최적화 방법인 것 같다. 끗