Express Router 객체

지금 만들어 둔 url 경로는 /와 /hi 두개가 있다.
하지만 이제 홈페이지 하나를 제작 하려면 엄청나게 많은 경로가 필요 할 것이다.
그것을 더 편하게 구분하기 위해 Router객체를 이용 하는 것이다.
예시를 들어 한번 보자.

app.get('/product/detail', (req, res) => {
  res.send('상세 페이지 입니다.')
})
app.get('/product/cart', (req, res) => {
  res.send('장바구니 페이지 입니다.')
})
app.get('/account/login', (req, res) => {
  res.send('로그인 페이지 입니다.')
})
app.get('/account/logout', (req, res) => {
  res.send('로그아웃 페이지 입니다.')
})

이렇게 경로가 네개가 있다고 생각하자.
이 경로들의 공통점이 보인다. 처음 두개는 product가 공통으로 앞에 나오고. 마지막두개는 account가 공통으로 앞에 나온다.
이 product와 account를 묶어서 사용할 수 있는것이 Router 를 쓰는 것이다.
일단 프로젝트 안에 새로운 폴더를 하나 만들어 준다. 이름은 routes로 해주었다.
그리고 그 routes 안에 account.js 와 product.js 파일 두개를 만들어 주었다.

폴더와 파일을 만들게 되면 이런식으로 될 것이다.
이제 만든 account.js와 product.js 파일에 코드를 작성 한다.
먼저 account.js에는

var express = require('express');
var router = express.Router();
 
router.get('/login', function(req, res, next) {
  res.send('로그인 페이지 입니다.')
});

router.get('/logout', function(req, res, next) {
  res.send('로그아웃 페이지 입니다.')
});
  
module.exports = router;

이렇게 작성을 해준다. 위에 두줄과 맨밑줄은 건드릴 필요가 없는 것이다.
중간에 코드는 index.js와 달라진 점은 get앞에 app가 아닌 router가 왔다는 점이다.
이제 product.js도 코드를 넣어보도록 한다.

var express = require('express');
var router = express.Router();
 
router.get('/detail', function(req, res, next) {
  res.send('상세 페이지 입니다.')
});

router.get('/cart', function(req, res, next) {
  res.send('장바구니 페이지 입니다.')
});
  
module.exports = router;

이렇게 작성을 해준다. 설명은 위와 같다.
이제 index.js로 넘어와서 코드를 추가해준다.

const accountRouter = require('./routes/account');
app.use('/account', accountRouter)
const productRouter = require('./routes/product');
app.use('/product', productRouter)

이 코드를 port 아래에 추가해 주면 된다. 그리고 나머지 app.get은 지워도 문제 없을 것이다.
맨 밑 app.listen 부분은 남겨놔야한다.
코드를 살펴보면 accountRouter에 아까 만든 account.js 경로를 넣어준다.
그리고 app.use로 중복 경로를 넣어주고 accountRouter를 불러와주면 된다.
밑도 위와 같다.
index.js에서 app.get 부분을 모두 주석 처리 하거나 지우고 코드를 한번 실행해 보면 전과 같이 잘 동작하는 것을 볼 수 있다.
이렇게 index.js의 코드를 줄일 수 있고 같은 것끼리 묶어서 관리 할 수 있다.

이렇게 Router 객체에 대해서 알아 보았고 다음엔 Middleware에 대해 알아보도록 하자.