라우터(Router)

라우터란?

라우터는 클라이언트의 요청경로(path)를 보고 이 요청을 처리할 수 있는 곳으로 기능을 전달해주는 역할을 한다.
이러한 역할을 라우팅이라고 하는데, 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 의미한다. 예를들어, 클라이언트가 /users 경로로 요청을 보낸다면 이에 대한 응답 처리를 하는 함수를 별도로 분리해서 만든 다음 get() 메소드를 호출하여 라우터로 등록할 수 있다.
즉, 한마디로 간단하게 말하자면 '연결 장치' 이다.

 

예시코드

// index.js
const express = require('express'); // 모듈 가져오기
const app = express(); // 할당
const testRouter = require('./test'); // test.js의 라우터를 볼러옴
const test2Router = require('./test2'); // test2.js의 라우터를 불러옴

//라우팅 설정 부분
app.get('/', (req, res) => {
  res.send('root page');
});

app.use('/test', testRouter);
app.use('/test2', test2Router);


app.listen(8080);

// test.js
const { Router } = require('express');
const router = Router();

router.get('/', (req, res) => {
   res.send('Hi, test page');
});

module.exports = router;

// test2.js
const { Router } = require('express');
const router = Router();

router.get('/', (req, res) => {
  res.send('Hi, test page2');
});

module.exports = router;

 

test.js와 test2.js 둘 다 생긴건 비슷하지만 실제 app.js 내에서 다른 주소의 라우터 역할을 하고 있다. 그 이유는 바로
app.use로 연결할때의 차이 때문이다. 

 

testRouter는 app.use('/test')에 연결했고,

test2Router는 app.use('/test2')에 연결했다.

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

testRouter는 GET /test 라우터가 되었고,

test2Router는 GET /test2 라우터가 된 것이다.

 

즉, 서버로 실행한 뒤 localhost:8080/test와 localhost:8080/test2로 접속하면 각각에 해당되는 응답을 받을 수 있다.

 

코드의 길이가 짧은 경우에는 굳이 파일을 분리하지 않아도 되지만, 코드의 길이가 길어지게 되면 위와같이 작성해야
유지보수가 굉장히 쉬워진다. 따라서 위와 같이 Router를 분리하여 작성하는 것이 효율적이다.

---

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.');
});

여기서 만약 next('route')대신 next()만 사용하게 된다면 미들웨어를 순차적으로 전부 돌면서 실행하기 때문에,

콘솔에 "실행되지 않습니다. 실행됩니다." 가 순서대로 찍히게 된다.

 

---

라우터 매개변수

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

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

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

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

app.use('/', router);

app.listen(8080);

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

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

이방식의 장점은 :id에 해당하는 1이나 123, chiho 등을 조회할 수 있다는 점이며, 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) => { 보다 위에 위치해야함.

 

 

주소에 쿼리 스트링을 쓸 수도 있는데, 쿼리 스트링의 key - value 정보는 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 라는 주소로 요청을 하면, (? 이후부분 = req.query 즉, 쿼리부분)

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

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

---

출처
https://inpa.tistory.com/entry/EXPRESS-%F0%9F%93%9A-%EB%9D%BC%EC%9A%B0%ED%84%B0-Router