2w_Express - Router 객체 사용하기

Router란 무엇인지.
Route가 어떤 요소를 가지고 분기 시키는지.
Router 객체를 이용해서 비슷한 것끼리 묶어, url을 관리하는지.

1. Router 사용하기

• 현재 우리는 /, /hi 두가지 경로를 가지고 있습니다. 나중에 우리가 쇼핑몰을 만든다면 페이지가 어느정도 필요할까요? 미리 한번 페이지를 보면서 계산해 봅시다. http://3.36.86.60:8888/
• 1) 첫 화면은 로그인 화면입니다.
  → 2) 그리고 회원가입화면이 있겠죠.
  → 3) 로그인을 하고나면 상품 목록 페이지가 있습니다.
  → 4) 상품을 하나 클릭하면 상품 상세페이지가 있구요.
  → 5) 장바구니에 담고나면 장바구니 페이지도 있습니다. 구매하기를 눌러볼까요? →
  → 6) 결제를 하기 위한 배송정보를 입력하는 페이지가 있습니다.

지금 이 서비스만 해도 페이지가 적어도 6개는 필요합니다. 실제로 서비스를 만들다보면 이런 페이지의 숫자는 엄청나게 늘어납니다. 그럼 이렇게 페이지가 하나씩 늘어날 때마다 index.js 파일에 app.~~ 가 계속 추가가 되는데요. 이러다보면 파일 하나에 너무 많은 양의 코드가 있고 점점 관리하기가 힘들어지는 문제가 생깁니다. Express 에서는 이를 방지하기 위해 Router 객체를 제공해서 비슷한 route끼리 묶어서 파일로 분리 시킬 수 있게 해줍니다.

2. index.js

app.get('/goods/list', (req, res) => {
  res.send('상품 목록 페이지')
})

app.get('/goods/detail', (req, res) => {
  res.send('상품 상세 페이지')
})

app.get('/user/login', (req, res) => {
  res.send('로그인 페이지')
})

app.get('/user/register', (req, res) => {
  res.send('회원가입 페이지')
})

• 자 위와 같이 route 가 4개가 있는 경우를 보겠습니다.
  먼저 상품 목록과 상품 상세 url 을 볼게요.
  두개는 다 상품에 관련된 페이지이다 보니 url 의 path에 goods 라는 공통된 부분을 가지고 있습니다.
  이런 비슷한 종류의 페이지끼리는 같은 Router 로 묶어주면 편한데요. 한번 해보겠습니다. 먼저 현재 프로젝트에서 새로운 파일을 추가해보겠습니다

3. path의 공통경로인 /goods를 router 분리.

< goods.js >

var express = require('express');
var router = express.Router();
 
router.get('/list', function(req, res, next) {
  res.send('Router 상품 목록 페이지')
});

router.get('/detail', function(req, res, next) {
  res.send('Router 상품 상세 페이지')
});
  
module.exports = router;

4. index.js 파일 수정.

// 기존 
// app.get('/goods/list'...
// app.get('/goods/detail'... 
// 두가지 route 는 삭제합니다.

2. Router 객체화
   : /goods라는 path가 오면, 뒤의 middleWare인 goodsRouter가 처리함 ( goodsRouter가 path의 나머지 뒷부분을 보고 경로에 맞게 처리한다.

1) Router 객체화

const goodsRouter = require('./routes/goods');

2) 만든 Router 객체 사용

app.use('/goods',goodsRouter);

• 자 여기까지 하고 이제 서버를 재시작 해봅니다. 그리고 /goods/list 경로로 접속해봅시다. 그럼 변경된 내용으로 새롭게 보이는 것을 확인할 수 있습니다. 이런 방식으로 Router는 비슷한 route 들의 집합으로 모아 모듈식으로 처리를 할 수 있습니다. 관리하기도 쉬워집니다. 그래서 Router 객체를 express 에서 "mini-app"이라고 부르기도 한답니다 😎

5. user router 분리

( routes directory하위에 생성 )

• 위에서 Router객체를 이용해서 goods 관련된 route들을 별도의 파일로 분리했는데요. 그럼 아래 있었던 유저의 로그인/회원가입부분도 한번 별도의 Router 객체로 분리해 볼까요? routes/user.js 라는 파일을 만들고 한번 분리를 해보도록 합시다

< user.js>

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

router.get('/login', function(req, res, next) {
  res.send('로그인 페이지')
});

router.get('/register', function(req, res, next) {
  res.send('회원가입 페이지')
});
  
module.exports = router;

< index.js > 수정

const userRouter = require('./routes/user');

app.use('/user',userRouter);