express - Router

메뉴의 CRUD 를 만들기 전에 먼저 express - Router 를 API 서버에 추가하자.

개발 편의를 위해 router 디렉토리 내에 Router 관련 파일들을 모았다.

• router/xxx.js

  • 기능 혹은 데이터 별로 js 파일을 만들고 Router 관련 코드를 구현

  import { Router } from 'express';
  
  const router = Router();
  
  ......

• router/router.js

  • url 과 그에 따른 동작을 연결 - 사실상 url 을 정의하는 곳이라 보면 됨

  import menuRouter from './menu.js';
  
  export const initRouter = app => {
      app.use('/menu', menuRouter);
  };

• index.html

  • Router 를 express - app 에 등록

  import { initRouter } from './router/router.js';
  
  initRouter(app);

이제 API 를 추가하려면 router 디렉토리 내에 js 파일을 생성하고 구현하면 된다. (물론 router/router.js 파일도 수정해야겠지)

이제 router/menu.js 파일을 생성하고 메뉴 관련 코드를 구현하자.

url 은 "/menu" 로 하고 GET, POST, PATCH, DELETE 를 추가하자.

참고로 데이터 관련 코드 - mongoose 와 연동하는 코드는 /models/xxx.js 에 추가하고 router/xx.js 에서 호출하는 식으로 구현하자.

GET /menu

전체 메뉴 데이터를 전달하는 API 이며, request body 에 query 가 있으면 query 에 해당하는 메뉴를 전달하고 query 가 없으면 전체 메뉴 데이터를 전달한다. (뭐 당장은 전체 메뉴 데이터만 필요할듯)

해당 API 는 실제 블로그 화면에서 필요할듯...

• router/menu.js

  import { get } from '../models/Menu.js';
  
  // GET /menu
  router.get("/", async (req, res) => {
      const data = await get(req.body);
  
      res.send({data});
  });

• models/Menu.js

  export const get = async query => {
      let data = null;
  
      try {
          data = await MenuModel.find(query);
      } catch (e) {
          console.error(e);
      }
  
      return data;
  };

데이터를 찾는 mongoose API 는 https://mongoosejs.com/docs/queries.html 참조!!!

POST /menu

메뉴 데이터를 생성하는 API 이며, 어드민 화면에서만 사용...

• router/menu.js

  import { create } from '../models/Menu.js';
  
  // POST /menu
  router.post("/", async (req, res) => {
      const success = await create(req.body);
  
      res.send({success});
  });

• models/Menu.js

  export const create = async data => {
      let success = false;
  
      // TODO data validate 코드 추가
  
      try {
          const menu = new MenuModel(data);
          await menu.save();
  
          success = true;
      } catch (e) {
          console.error(e);
      }
  
      return success;
  };

DELETE /menu

메뉴 데이터를 삭제하는 API, 이것도 어드민 화면에서만 사용....

• router/menu.js

  import { remove } from '../models/Menu.js';
  
  // DELETE /menu
  router.delete("/", async (req, res) => {
      const success = await remove(req.body);
  
      res.send({success});
  });

• models/Menu.js

  export const remove = async query => {
      let success = false;
  
      try {
          await MenuModel.findOneAndDelete(query);
  
          success = true;
      } catch (e) {
          console.error(e);
      }
  
      return success;
  };

PATCH /menu

메뉴 데이터를 수정하는 API, 이것도 어드민 화면에서만 사용....

• router/menu.js

  import { patch } from '../models/Menu.js';
  
  // POST /menu
  router.post("/", async (req, res) => {
      const success = await patch(req.body?.query, req.body?.data);
  
      res.send({success});
  });

• models/Menu.js

  export const patch = async (query, data) => {
      let success = false;
  
      try {
          await MenuModel.findOneAndUpdate(query, { $set: data });
  
          success = true;
      } catch (e) {
          console.error(e);
      }
  
      return success;
  };

---

postman 으로 테스트했을때는 응답이 잘 왔다. 다만, localhost 에서 호출할때는 CORS 이슈가....

간단하게 해결하기 위해 cors middleware 를 깔고 모든 요청을 허용해주자.
(https://codepathfinder.com/entry/Nodejs-Express-%EC%9B%B9%EC%84%9C%EB%B2%84%EC%97%90%EC%84%9C-CORS-%EC%9D%B4%EC%8A%88%ED%95%B4%EA%B2%B0)

• index.js

  import cors from 'cors';
  
  app.use(cors());

---

이제 localhost 에서도 잘 호출되는 것 확인했음 ㅎㅎ

이제 메뉴 어드민 화면을 구현해보자~.