Express | route분리, 모듈화

| route분리, 모듈화

 

route분리

코드를 보면 한파일에 다 몰려있는 느낌이 있다

// ** Create Read */
import * as express from "express";
import { Cat, CatType } from "./app.model";

const app: express.Express = express();

//* logging middleware
app.use((req, res, next) => {
  console.log(req.rawHeaders[5]);
  console.log("this is logging middleware");
  next();
});

//* json middleware
app.use(express.json());

//* READ 고양이 전체 데이터 다 조회
app.get("/cats", (req, res) => {
  try {
    const cats = Cat;
    //    throw new Error("db connect error");
    res.status(200).send({
      success: true,
      data: {
        cats,
      },
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
});

//* READ 특정 고양이 데이터 조회
app.get("/cats/:id", (req, res) => {
  try {
    const params = req.params;
    console.log(params);
    const cat = Cat.find((cat) => {
      return cat.id === params.id;
    });
    res.status(200).send({
      success: true,
      data: {
        cat,
      },
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
});

//* CREATE 새로운 고양이 추가 api
app.post("/cats", (req, res) => {
  try {
    const data = req.body;
    console.log(data);
    Cat.push(data);   // create
    res.status(200).send({
      success: true,
      data: {},
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
});

//* 404 middleware

app.listen(8000, () => {
  console.log("server is on...");
});

단순한 api 3개정도만 짰는데도

벌써 100줄이 넘어간다

 

라우터가 이런식으로 아래로 쭉 있다보면

관리하기가 힘들어진다

 

그래서 모듈(라우터)을 분리해줘야한다

현재 아래와 같이 다 모여있는데

아래와 같이 라우터만 담당해주는 라우터를 만들어서

기존 라우터들을 분리 시켜줘야함

cats라는 디렉터리를 만들고

원래 데이터가 들어있던 파일은

cats.model.ts로 이름을 변경해주고

 

라우터만 묶어놓을 파일을 새로 생성해주고

그이름은 cats.route.ts로 설정해준다

cats.route.ts

원래는 app.ts 에서 쓸때는

바로 app.get, app.post 이런식으로 바로 사용했지만

지금은 분리되어있기 때문에

express에서 지원하는 router객체를 사용해서 router.get , router.post 처럼

router 안에다가 새롭게 필요한 라우터를 작성하여 등록한다고 볼 수 있다

그리고 이후 그 등록되어져 있는 router 객체를 최종적으로 export 하면된다 

import { Cat, CatType } from "./cats.model";
import { Router } from "express";

const router = Router();

//* READ 고양이 전체 데이터 다 조회
router.get("/cats", (req, res) => {
  try {
    const cats = Cat;
    //    throw new Error("db connect error");
    res.status(200).send({
      success: true,
      data: {
        cats,
      },
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
});

//* READ 특정 고양이 데이터 조회
router.get("/cats/:id", (req, res) => {
  try {
    const params = req.params;
    console.log(params);
    const cat = Cat.find((cat) => {
      return cat.id === params.id;
    });
    res.status(200).send({
      success: true,
      data: {
        cat,
      },
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
});

//* CREATE 새로운 고양이 추가 api
router.post("/cats", (req, res) => {
  try {
    const data = req.body;
    console.log(data);
    Cat.push(data); // create
    res.status(200).send({
      success: true,
      data: {},
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
});

export default router;

 

app.ts

분리하는 방식은 미들웨어를 작성하는것과 비슷하다

import 원하는 라우터 이름 from "라우터경로"; 로 임포트를 해주고

사용할때는

app.use(원하는 라우터 이름);

// ** Create Read */
import * as express from "express";
import catsRouter from "./cats/cats.route";

const app: express.Express = express();

//* logging middleware
app.use((req, res, next) => {
  console.log(req.rawHeaders[5]);
  console.log("this is logging middleware");
  next();
});

//* json middleware
app.use(express.json());

//* router module
app.use(catsRouter);

//* 404 middleware
app.use((req, res, next) => {
  console.log("this is error middleware");
  res.send({ error: "404 not found error" });
});

app.listen(8000, () => {
  console.log("server is on...");
});