Express.js] 여러 정보를 한번에 export하는 라우터 만들기

1. 기존 : module.exports = router

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

const express = require("express");

const rootDir = require("../util/path");

const router = express.Router();

// /admin/add-product <- GET
router.get("/add-product", (req, res, next) => {
  res.sendFile(path.join(rootDir, "views", "add-product.html"));
});

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

module.exports = router;

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

app.use("/admin", adminRoutes);

 

기존 코드에서는 admin의 router 정보만 담아서 내보내기 했고,

app.js에서도 router 정보 하나만 다루었다.

 

그러나 하나의 모듈에서 여러 정보를 함께 내보내기 할 수 있다.

 

2. 변경 : exports.____ = ____

새로운 정보를 담을 배열을 하나 만들어보자.

//admin.js
const products = [];

 

이제 라우터와 함께 프로덕트 배열을 함께 저장해서 사용할 거다.

// admin.js

//module.exports = router;
exports.routes = router;
exports.products = products;

 

// app.js

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

//app.use("/admin", adminRoutes);
app.use("/admin", adminData.routes);

 

이게 require('~/admin')을 통해 불러오는 정보는 라우터 정보 뿐만 아니라

프로덕트 배열도 함께 담고 있다.

 

따라서 변수명을 바꿨다.

adminRoutes -> adminData

 

미들웨어에서도 adminRoutes를 바로 쓰는 게 아니라

adminData가 갖고 있는 routes를 지정해 사용하도록 한다.

 

// admin.js

router.post("/add-product", (req, res, next) => {
  products.push({ title: req.body.title });
  res.redirect("/");
});

 

admin.js에서 프로덕트 배열에 새로운 정보를 저장한다.

const로 선언했어도 배열은 참조타입이라 새로운 정보를 저장할 수 있다.

 

• push() : 배열의 마지막에 새로운 값을 추가한다.

여기서는 배열 안에 객체들을 생성해 저장한다.

title이라는 이름의 속성은

req.body.title을 통해 브라우저의 post 요청이 담고 있는 title(앞에 쓴 title과 다름)을 가져와 저장한다.

 

// shop.js

const adminData = require("./admin");

router.get("/", (req, res, next) => {
  console.log(adminData.products);
  res.sendFile(path.join(rootDir, "views", "shop.html"));
});

 

"/"로 연결되는 메인페이지에서

프로덕트 배열 안에 있는 값을 콘솔로 찍어보자.

 

만들어진 서버에 진입하면

아직 아무 정보가 없어서 빈 배열이 찍힌다.

 

admin/add-product

 

바나나를 입력하면

 

새로운 객체가 생성되어 프로덕트 배열 안에 담겨 있는 걸 확인할 수 있다.

한번 더 해보자

 

기존 정보가 유지된 채로 새로운 과일이 배열에 추가되었다.

 

3. 문제점 : 사용자 간 입력데이터가 공유된다.

현재 방식의 문제는 이렇게 저장된 데이터를 다른 사용자가 제한없이 접근할 수 있다는 점이다.

 

현재 크롬브라우저를 쓰고 있는데

이번에는 엣지 브라우저로 같은 주소로 접속해보자.

이는 다른 사용자로서 서버에 접근하는 것으로 인식된다.

엣지 화면

과연 콘솔창에는 빈 배열이 출력됐을까?

 

이전 사용자(크롬)가 입력한 값을 다른 사용자와 공유하고 있다.

 

개인정보처럼 공유되면 안 되는 데이터를 입력했다고 생각하면?

아찔하다.

 

해결해보자.