[Express] 예제로 Router 쉽게 이해하기

만약 처리해야 할 요청이 무수히 많아진다면, 이 요청들을 한 파일에 관리하는 것은 쉽지 않을 것이다.

그렇다면 요청들을 어떻게 파일로 분리할 수 있을까? 간단한 예제를 준비해보았다.

 

목표 : 이 15개의 이 요청들을 알파벳별로 나눠서 각각 파일로 저장하기

-> (/a/1, /a/2, /a/3), (/b/1, /b/2, /b/3), (/c/1, /c/2, /c/3), (/d/1, /d/2, /d/3), (/e/1, /e/2, /e/3) 

const express = require('express')
const ejs = require('ejs')
const app = express()
const router = express.Router()

app.set("view engine", "ejs")
app.use('/static', express.static('static'))


app.get('/a/1', function(req,res,next){
    res.send('path : /a/1')
})

app.get('/a/2', function(req,res,next){
    res.send('path : /a/2')
})

app.get('/a/3', function(req,res,next){
    res.send('path : /a/3')
})

app.get('/b/1', function(req,res,next){
    res.send('path : /b/1')
})

app.get('/b/2', function(req,res,next){
    res.send('path : /b/2')
})

app.get('/b/3', function(req,res,next){
    res.send('path : /b/3')
})

app.get('/c/1', function(req,res,next){
    res.send('path : /c/1')
})

app.get('/c/2', function(req,res,next){
    res.send('path : /c/2')
})

app.get('/c/3', function(req,res,next){
    res.send('path : /c/3')
})

app.get('/d/1', function(req,res,next){
    res.send('path : /d/1')
})

app.get('/d/2', function(req,res,next){
    res.send('path : /d/2')
})

app.get('/d/3', function(req,res,next){
    res.send('path : /d/3')
})

app.get('/e/1', function(req,res,next){
    res.send('path : /e/1')
})

app.get('/e/2', function(req,res,next){
    res.send('path : /e/2')
})

app.get('/e/3', function(req,res,next){
    res.send('path : /e/3')
})

app.listen(3000, ()=>console.log('Example app listening on port 3000!'))

 

 

1. 라우터 파일 생성

분리된 요청을 담을 파일들을 생성해준다.

 

 

2. 라우터 파일 정리

<a.js>

라우터 파일에서는 요청을 express()가 아닌 express.Router()로 받기 때문에, app.get()이 아닌 router.get()으로 요청을 받아야 한다.

그리고 router.get()의 요청 경로는 라우터 파일을 기준으로 작성해야 하기 때문에 "/a"를 제외시켰다.

마지막으로, 이 요청 메소드들을 외부에서도 사용할 수 있게 module.exports = router;을 추가했다.

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

router.get('/1', function(req,res,next){
    res.send('path : /a/1')
})

router.get('/2', function(req,res,next){
    res.send('path : /a/2')
})

router.get('/3', function(req,res,next){
    res.send('path : /a/3')
})

module.exports = router;

 

▣ b.js, c.js, d.js, e.js 모두 동일한 원리이기 때문에 소스 코드만 첨부함

 

<b.js>

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

router.get('/1', function(req,res,next){
    res.send('path : /b/1')
})

router.get('/2', function(req,res,next){
    res.send('path : /b/2')
})

router.get('/3', function(req,res,next){
    res.send('path : /b/3')
})

module.exports = router;

 

<c.js>

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

router.get('/1', function(req,res,next){
    res.send('path : /c/1')
})

router.get('/2', function(req,res,next){
    res.send('path : /c/2')
})

router.get('/3', function(req,res,next){
    res.send('path : /c/3')
})

module.exports = router;

 

<d.js>

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

router.get('/1', function(req,res,next){
    res.send('path : /d/1')
})

router.get('/2', function(req,res,next){
    res.send('path : /d/2')
})

router.get('/3', function(req,res,next){
    res.send('path : /d/3')
})

module.exports = router;

 

<e.js>

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

router.get('/1', function(req,res,next){
    res.send('path : /e/1')
})

router.get('/2', function(req,res,next){
    res.send('path : /e/2')
})

router.get('/3', function(req,res,next){
    res.send('path : /e/3')
})

module.exports = router;

 

 

3. app.js 정리

<app.js>

라우터 파일들을 인식할 수 있게 require() 메소드로 라우터 파일의 경로들을 모두 등록했다.

이제, app.use()에 이 모듈 객체들을 지정된 경로로 등록해주면 끝이다.

const express = require('express')
const ejs = require('ejs')
const app = express()

const aRouter = require('./routes/a')
const bRouter = require('./routes/b')
const cRouter = require('./routes/c')
const dRouter = require('./routes/d')
const eRouter = require('./routes/e')

app.set("view engine", "ejs")
app.use('/static', express.static('static'))
app.use('/a', aRouter)
app.use('/b', bRouter)
app.use('/c', cRouter)
app.use('/d', dRouter)
app.use('/e', eRouter)

app.listen(3000, ()=>console.log('Example app listening on port 3000!'))

 

 

4. 동작

가정) 'http://localhost:3000/c/2' 로 요청이 들어왔다.

1) app.js의 app.use('/c', cRouter)에서 요청을 가로챔

2) './routes/c'로 요청 이동

3) c.js의 router.get('/3', function(...))으로 요청 이동

4) 웹 페이지에 'path : /c/2' 출력