티스토리 뷰

반응형

 

Node.js로 테스트 서버 또는 실제 운영하기 위한 서버를 만들 때 Router 구조 잡기가 매번 고민됩니다. Router 구조를 어떻게 잡느냐에 따라 폴더 구조 및 개발 편의에 영향을 많이 끼치기 때문입니다. 그래서 요즘 Node.js로 개발 공부를 하면서 제가 가장 편하다고 생각하는 Router 구조를 정리해보겠습니다.

 

1. epxress 프로젝트 기본 구조 설명

 

express 프로젝트를 생성했던 기준으로 정리하겠습니다. 

express-generator로 프로젝트를 생성하면 app.js는 아래와 같이 router를 생성합니다.

 

app.js

const express = require('express');
const app = express();
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

const port = 10000;

app.use('/', indexRouter);
app.use('/users', usersRouter);

app.listen(port, function () {
    console.log('Example app listening on port : ' + port);
});

routers/index.js

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

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

routers/user.js

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

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

express 프로젝트의 초기 구조는 router 파일이 생성될때마다 app.js에 url과 파일을 등록해주어야 합니다. 그리고 url관리와 서비스 로직을 하나의 router 파일에서 해야 하기에 가독성이 떨어지기도 합니다. 그래서 url관리를 따로 관리하는 파일과 서비스 로직이 있는 파일로 분리하여 가독성과 코드 관리가 좋은 방식으로 변경해보겠습니다. 

 

2. url 관리하는 router 파일 생성

 

[ 최종 폴더 구조 ]

 

기존에 있던 routes폴더에 있는 index.js 파일은 main.js로 변경합니다.

그리고 새로운 index.js 파일을 생성하여 아래와 같이 채워줍니다.

 

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

const main = require('./main.js');
const user = require('./users.js')

router.use('/main', main);
router.use('/user', user);

module.exports = router;

기존에 app.js에 등록했던 부분을 이제 routes/index.js가 하게 만들기 위해 변경합니다.

그리고 app.js에 등록되었던 부분은 아래와 같이 변경합니다.

// 이전 코드
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

app.use('/', indexRouter);
app.use('/users', usersRouter);

// 변경코드
const routes = require('./routes');

app.use('/', routes);

이렇게 변경하면 url 변경 또는 router 파일 변경시 app.js를 수정하지 않고 router/index.js를 수정하면 url 및 api 관리가 됩니다. 정말 간단하게 변경했지만 관리하는 관점에서는 많이 개선되었죠.

 

정상적으로 api가 호출되는지 한번 확인해봅니다.

 

http://localhost:3000/main

http://localhost:3000/user

 

여기서 이제 main.js와 user.js에서 관리하는 url 관리를 다른 파일로 변경해보겠습니다.

 

3. url 관리와 서비스 코드 분리

 

 

이제 routes 폴더에 main폴더와 users폴더를 생성합니다.

각각 main.js, users.js를 폴더 안에 옮긴 뒤 index.js로 파일명을 변경합니다.

 

main 폴더 밑에 main.controller.js를 생성하고 url을 제외한 서비스 로직을 아래와 같이 옮깁니다.

 

routes/main/index.js

const express = require('express');
const router = express.Router();
const controller = require('./main.controller');

/* GET home page. */
router.get('/', controller.main);

module.exports = router;

 

routes/main/main.controller.js

exports.main = (req, res, next) => {
    res.render('index', { title: 'Express' });
}

 

users 폴더 밑에도 users.controller.js를 생성하고 아래와 같이 수정합니다.

 

routes/users/index.js

const express = require('express');
const router = express.Router();
const controller = require('./users.controller');

/* GET users listing. */
router.get('/', controller.users);

module.exports = router;

 

routes/users/users.controller.js

exports.users = (req, res, next) => {
    res.send('respond with a resource');
}

 

이제 서버를 실행한 뒤 정상적으로 api가 호출되는지 확인합니다.

 

마무리

 

간단하지만 해당 코드는 git에 올려두었습니다.

혹시라도 필요하신 분이라면 아래 github에 가셔서 확인하세요!!

 

https://github.com/hamfirework/nodejs_router_setting

 

hamfirework/nodejs_router_setting

express_router. Contribute to hamfirework/nodejs_router_setting development by creating an account on GitHub.

github.com

 

반응형
댓글