[EXPRESS] 📚 라우터 (Router) 개념 정리

 

라우터 (Router)

익스프레스를 사용하는 이유 중 하나가 라우팅을 깔끔하게 관리할 수 있다는 점이다.

예를 들어, app.js에서 app.get 같은 메서드가 라우터 부분이다.

그러나 라우터를 많이 연결하면 app.get() 도배가 되어버려서, 코드가 매우 길어진다.

 

그래서 익스프레스에서는 라우터를 분리할 수 있는 방법을 제공한다.

routes 폴더를 만들고 그 안에 index.js와 user.js를 다음과 같이 작성해주자.

// routes/index.js

const express = require('express');

const router = express.Router();

router.get('/in', (req, res) => {
    res.send('Hello, World !');
});

module.exports = router;

// routes/user.js

const express = require('express');

const router = express.Router();

router.get('/iam', (req, res) => {
    res.send('Hello, User');
});

module.exports = router;

 

그리고 app.js에 다음과 같은 코드를 추가해주자.

 

const express = require('express');

const app = express();

const indexRouter = require('./routes'); // router.get('/', (req, res) => { ... 을 불러옴
const userRouter = require('./routes/user'); // router.get('/', (req, res) => { ... 을 불러옴

app.set('port', process.env.PORT || 3000);

app.use('/', indexRouter); // 각기 다른 경로에 미들웨어 장착
app.use('/user', userRouter); // 각기 다른 경로에 미들웨어 장착

app.use((req, res, next) => { // 기본경로나 /user말고 다른곳 진입했을경우 실행
    res.status(404).send('Not Found');
});

app.listen(app.get('port'), () => {
   console.log(app.get('port'), '번 포트에서 대기 중');
});

 

index.js 와 user.js 둘 다 생긴건 비슷하지만 실제 app.js 내에서 다른 주소의 라우터 역할을 하고 있다.

app.use로 연결할 때의 차이 때문이다.

 

indexRouter는 app.use('/')에 연결했고

userRouter는 app.use('/user')에 연결했다.

 

그리고 각각 get의 '/in' 과 get의 '/iam '에 연결되어 있으므로, 둘이 합쳐져서 최종경로로,

indexRouter는 GET /in 라우터가 되었고,

userRouter는 GET /user/iam 라우터가 된 것이다.

 

서버로 실행한 뒤 localhost:3000/in과 localhost:3000/user/iam로 접속하면 각각에 해당하는 응답을 받을 수 있다.

---

next('route')

이제 next 함수에 다음 라우터로 넘어가는 기능을 사용해보자.

next('route') 라는 코드로 사용하며, 라우터에 연결된 나머지 미들웨어들을 건너뛰고 싶을 때 사용한다.

const express = require('express');

const router = express.Router();

router.get('/', (req, res, next) => {
    next('route'); // 다음 라우터 미들웨어로 점프한다.
}, (req, res, next) => {
    console.log('실행되지 않습니다.');
    next();
});

router.get('/', (req, res) => {
    console.log('실행됩니다.');
    res.send('Hello, Express.');
});

---

라우터 매개변수

라우터 주소에는 정규표현식을 비롯한 특수 패턴을 사용할 수 있다.

라우트 매개변수라고 불리는 패턴이다. 

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

router.get('/user/:id', (req, res) => {
    console.log(req.params.id); // 매개변수라서 .params로 접근을 한다.
});

 

주소에 :id가 있는데, 문자 그대로 :id를 의미하는 것이 아닌 다른 값이 들어가는 장소이다.

예를들어 /users/1, /users/123, /users/beomseok 등의 요청을 이 라우터가 처리하게 되며,

이 방식의 장점은 :id에 해당하는 1이나 123, beomseok 등을 조회할 수 있다는 점이며, req.params 객체 안에 들어가게 된다.

:id이므로, req.params 객체는 { id: 'foo' } 와 같이 형성된다.

 

그러나 이 경우는 한가지 중요한 점이 있는데,

예를 들어 admin 유저는 다른 처리를 시키고 싶을 때, 이 라우터 (일반 라우터) 는 앞서 사용한 매개변수 라우터보다 위에 위치해야 정상적으로 처리가 된다.

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

// /user/admin으로 들어가면 실행됨
router.get('/user/admin', (req,res) => {
    console.log('Hello, admin!');
}); 

// /user/foo로 들어가면 이쪽이 실행됨. 위에서 아래 순서로 코드가 실행되니까.
router.get('/user/:id', (req, res) => {
    console.log(req.params, req.query);
});

// /user/foo로 들어가도 실행되지 않음
router.get('/user/foo', (req,res) => {
    console.log('Hello, foo!');
}); // => 따라서, router.get('/user/:id', (req, res) => { 보다 위에 위치해야함.

 

 

주소에 쿼리 스트링을 쓸 수도 있는데. 쿼리 스트링의 키-값 정보는 req.query객체 안에 들어있다.

예를 들어 쿼리와 매개변수는 다음과 같이 파싱하여 사용할 수 있다.

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

router.get('/user/:id', (req, res) => {
    console.log(req.params, req.query);
    res.send(``);
});

app.use('/', router);

 

/users/123?limit=5&skip=10 라는 주소로 요청을 하면,

{ id: '123' } { limit: '5', skip: '10' }

 

이와 같은 결과를 받을 수 있다.

---

라우터 그룹화

만약 주소는 같지만 메서드가 다른 코드가 있을 때,

이를 하나의 덩어리로 줄여주기 위해 라우터에서 router.route 또는 app.route를 사용할 수 있다.

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

router.get('/abc', (req, res) => {
    res.send('GET /abc');
});
router.post('/abc', (req, res) => {
    res.send('POST /abc');
});

위와 같은 코드를 아래와 같이 한 묶음으로 처리할 수 있다.

// 주소를 먼저 쓰고, 그다음 .get이나 .post로 묶는 방식이다.
router.route('/abc')
    .get((req,res) => {
        res.send('GET /abc');
    })
    .post((req, res) => {
        res.send('POST /abc');
    });

---

Reference

https://lgphone.tistory.com/76?category=916504