[Node.js] Router 사용하기

Router를 사용해 보자

 

 

기존 소스 코드

 

const express = require('express');
const bodyParser = require('body-parser');
 
const app = express();
 
 
app.use(bodyParser.urlencoded({extended: false})); 
 
app.use('/add-product', (req, res, next) => {
  res.send('<form action="/product" method="POST"><input type="text" name = "title"><button type ="submit">Add Product</button></form>');
});
 
app.use('/product', (req, res, next) => {
  console.log(req.body); 
})
 
 
app.use('/', (req, res, next) => {
  res.send('<h1>Hello from Express!</h1>');
});
 
 
app.listen(3000);
 

 

 

위의 소스 코드의 경우 간단하지만 이렇게 모든 코드를 하나의 app.js 파일에 기록하면 파일의 크기가 계속 커지게 된다. 

 

물론 이 정도 규모의 앱에 대해서는 문제가 되지 않는다. 그러나 일반적으로는 라우팅 코드를 여러 파일로 나누는 것이 좋다.  현재 로직을 여러 파일로 내보내서 이 파일로 임포트 해보자. 

 

내보낼 파일을 직접 만들 수도 있지만 Express.js는 라우팅을 다른 파일에 위탁하는 편리한 방법을 제공한다.

 

routes라는 이름의 새로운 폴더를 만들어 보자 ( 다른 이름으로 만들어도 되지만 보통의 관행이라 한다, :) )

 

 

 

admin.js라는 파일과 shop.js라는 라우팅 파일을 생성했다.

 

admin.js 에서는 특정 생성을 처리하는 라우팅 파일 용도로 쓸 것이다. 또한, shop.js라는 파일도 만들어 사용자가 보게 될 내용을 담아보자.

 

 

admin.js

 

 

admin.js에서는 add-product 경로와 product post 요청을 넣어준다. 

router를 사용하기 위해 express를 다시 임포트 하여 Router 기능을 사용한다. 

 

express.Router를 호출해서 생성하며 이 라우터는 다른 Express 앱에 연결되어 있거나 연결할 수 있는 Express 앱과 같으며 여기로 내보낼 수 있다. 

 

 

app.use('/add-product', (req, res, next) => {
  res.send('<form action="/product" method="POST"><input type="text" name = "title"><button type ="submit">Add Product</button></form>');
});

app.use('/product', (req, res, next) => {
  console.log(req.body);
})

 

기존 app.js 에서 이 부분을 잘라내어 admin.js로 옮긴 것이며 app.use를 router.xx로 바꿔준 것이다. 

xx의 경우 모든 요청에 대한 use 함수, GET에 대한 get 함수, POST에 대한 post 함수 등을 정의할 수 있다. 

예를 들어 router.post의 경우 POST로 들어온 요청에 한해서만 응답한다는 뜻이다.

 

이 라우터는 기존의 app.use나 app.post 그리고 app.get 등의 함수와 완전히 동일한 기능을 수행한다.

 

그리고 내보내기 위해 마지막에 module.exports = router를 입력해 준다.

 

 

app.js

 

 

admin.js를 app.js에 임포트 하기 위해 adminRoutes라는 이름으로 reutes의 상대 겅로를 잡아주고 그 안의 admin 파일을 지정해 준다.

 

이제 이 router 객체를 임포트 하게 되고 이 router 객체에는 admin.js와 같은 루트가 등록되어 있는 것이다.

이 router의 장점은 여전히 유효한 미들웨어 함수라는 것이다.

 

 

shop.js

 

 

shop.js 에서는 사용자가 볼 수 있는 화면을 나타내기 위해 작성된 코드이며, admin.js와 동일한 방식으로 작성해 준다.

 

다시 app.js로 돌아가서 

 

 

여기서 중요한 점이 있는데, router를 사용하기 전처럼 전과 같이 순서를 고려해서 작성해야 한다는 것이다. 

만약 adminRoutes와 shopRoutes를 사용하기 전의 최초의 코드에서 처럼 순서대로 내려오지 않는다면, 오류가 발생하게 된다. 

 

그래서 router를 사용할 때도  router를 사용하기 전의 미들웨어 순서를 반드시 동일하게 작성해줘야 한다!