Express.js] 라우팅을 다른 파일에 위탁하기

지금까지는 라우터를 app.js라는 한 파일에서 모두 처리했다.

그러다보니 코드가 길어지고 무거워졌다.

일반적으로는 라우팅 코드를 여러 파일로 나눈다.

 

기존코드

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.urlencoded({extended: false}));

app.use("/", (req, res, next) => {
  next();
});

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

app.post("/product", (req, res, next) => {
  console.log(req.body);
  res.redirect("/");
});

app.use("/", (req, res, next) => {
  res.send("<h1>Hello from Express!</h1>");
});

app.listen(3000);

 

이제 이 라우터들을 외부 파일로 보내보자. 먼저 폴더구조를 변경한다.

• routes라는 폴더를 만든다. 다른 이름을 써도 되지만, 관습으로 많이 쓰는 이름이다.
• 라우팅을 분산할 js 파일을 만든다. 여기서는 admin과 shop으로 분리한다.

add-product와 product 경로는 admin으로

일반 경로는 shop으로 넣어서 관리자와 소비자의 접근을 분할하겠다.

 

//admin.js
const express = require("express");

const router = express.Router();

module.exports = router;

//app.js
const adminRoutes = require("./routes/admin");

app.use(adminRoutes);

이 구조가 라우팅의 기본이다.

• admin.js파일에서
  • express를 임포트하고
  • router 객체를 생성한다.
  • 생성한 router 객체를 익스포트한다.

• app.js 파일에서
  • require로 admin.js 파일을 임포트해온다.
  • app.use로 임포트한 파일을 미들웨어로 추가한다.

이제 admin.js에 필요한 미들웨어를 추가하자.

 

const express = require("express");

const router = express.Router();

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

router.post("/product", (req, res, next) => {
  console.log(req.body);
  res.redirect("/");
});

module.exports = router;

 

app.*** -> router.***로 바꾸고

기존 코드들을 그대로 가져왔다.

다만 여기서 use 대신 get을 써보자

//admin.js
const express = require("express");

const router = express.Router();
//이를 통해 다른 앱으로 내보낼 수 있음.

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

router.post("/product", (req, res, next) => {
  console.log(req.body);
  res.redirect("/");
});

module.exports = router;

//shop.js
const express = require('express');

const router = express.Router();

// get 방식은 정확히 이 경로인지를 체크한다.
router.get("/", (req, res, next) => { 
    res.send("<h1>Hello from Express!</h1>");
  });

module.exports = router;

 

 

use에서는 해당 경로를 포함하는 모든 요청에 응답했었다.

그러나 get 방식에서는 정확하게 이 경로로 진입하지 않으면 접근할 수 없다.

기존방식에서는 '/' 미들웨어로 진입이 가능했다.

 

//app.js
const express = require("express");
const bodyParser = require("body-parser");

const app = express();

const adminRoutes = require("./routes/admin");
const shopRoutes = require("./routes/shop");

app.use(bodyParser.urlencoded({ extended: false }));

//이제 여기서 admin과 shop의 순서는 중요하지 않다.
app.use(adminRoutes);
app.use(shopRoutes);

//아래와 같이 순서를 바꿔도 무관하다는 것이다.
//app.use(shopRoutes);
//app.use(adminRoutes);

app.listen(3000);

 

이제 admin과 shop 중 어떤 미들웨어가 먼저 와야하는지는 중요하지 않다.

정확한 경로로 요청하지 않으면 해당 미들웨어로 진입할 수 없기 때문이다.

 

그러나 만약 use를 사용하는 라우터가 있다면

다시 순서가 중요해진다.

 

 

자, 이제 그럼 무작위 경로 또는 잘못된 경로의 요청에 응답하는 페이지가 필요해졌다.

어떻게 할까?