[MySchedule project] 16. React-big-Calendar 사용하기 (2)

지난 챕터에서는 캘린더 라이브러리 사용하기에 대한 frontend 로직을 설명했는데,
이번 시간에는 backend로직을 통해 캘린더를 완성해보겠다.

 

Backend

[ src / models / Schedule.js]

1. 스키마 만들기

 

- 캘린더에 대한 데이터를 저장할 스키마를 만든다.

- 여기서 userId는 회원가입의 id처럼 unique한 값을 가지면 안된다. 중복된 값을 가져야함.

예를 들어서 "사용자아이디: A, 제목: B", "사용자아이디:A, 제목:C" 와 같이 중복을 허용해야됨. 만약 unique값을 넣으면 바로 에러가 뜰 것이다. 

- calender의 타입은 스케줄의 주제에 맞게 분배하기 위해서 넣어주었고, start는 스케줄의 시작시간, end는 스케줄의 종료시간이다. 그리고 title은 스케줄의 내용을 담는다.

const { default: mongoose } = require("mongoose");
const bcrypt = require("bcryptjs");

const mySchedule = mongoose.Schema({
  calenderType: {
    // 0 : 스케줄 , 1: 식비, 2: 운동
    type: Number,
    default: 0,
  },
  start: {
    type: Date,
  },
  end: {
    type: Date,
  },
  title: {
    type: String,
    trim: true,
  },
  userId: {
    type: String,
    maxLength: 20,
    trim: true,
  },
});

//여기서 userId는 중복되기에 unique를 없애줌.

const MySchedule = mongoose.model("MySchedule", mySchedule);

module.exports = MySchedule;

 

[ index.js]

- route 추가

app.use("/mySchedule", require("./routes/mySchedule"));

 

[ src / routes / mySchedule.js]

1. 캘린더 데이터 입력

 

- 전달받은 스케줄의 데이터를 db에 저장하는 작업이다.

- save()메서드를 통해 저장.

 

2. 캘린더 데이터 조회

 

- 조회의 경우의수는 2가지로 구분했다. 메인페이지에서는 전체조회, 캘린더의 타입이 정해져있을때는 각 주제에 맞게 조회할수 있도록 조건식을 처리하였음. 파라미터로 아이디와 타입을 받아온다.

- 데이터가 1개가 아닐확률이 높기 때문에 조회한 데이터는 배열로 받아 frontend로 전달한다. 

 

3. 캘린더 데이터 업데이트

 

-  userId와 start, end, 캘린더의 타입에 따라서 데이터가 달라지기 때문에 4개의 조건에 대한 조회를 먼저하고, title부분을 업데이트한다.

- 조건에 맞는 하나의 데이터를 조회하고 나서 업데이트를 하기 위해 findOneAndUpdate() 메서드를 사용했다.

 

4. 캘린더 데이터 삭제

 

- 캘린더 업데이트와 조건식의 코드는 같고, 한개의 데이터를 삭제하기 위해 deleteOne() 메서드를 사용했다.

const express = require("express");
const MySchedule = require("../models/Schedule");
const router = express.Router();

//myschedule Data insert
router.post("/dataInsert", async (req, res, next) => {
  // console.log("---------insert-----------");
  // console.log(req.body);
  try {
    // 배열로 받는다면
    // for (let index in req.body) {
    //   console.log(index);
    //   console.log(req.body[index]);
    // }

    const mySchedule = new MySchedule(req.body);
    await mySchedule.save();
    return res.sendStatus(200);
  } catch (error) {
    next(error);
  }
});

//myschedule Data select
router.post("/dataSelect", async (req, res, next) => {
  console.log(req.body.calenderType);

  let calenderData = [];
  try {
    //캘린더의 타입이 있을때는 주제에 맞게 각각 조회
    if (req.body.calenderType !== "" && req.body.calenderType !== "") {
      calenderData = await MySchedule.find({
        userId: req.body.userId,
        calenderType: req.body.calenderType,
      });
    }
    //메인페이지에서 전체 조회
    if (req.body.calenderType === undefined) {
      calenderData = await MySchedule.find({
        userId: req.body.userId,
      });
    }

    console.log("======select==========");
    console.log(calenderData);

    return res.status(200).json([calenderData]);
  } catch (error) {
    next(error);
  }
});

//myschedule Data update
router.post("/calenderDataUpdate", async (req, res, next) => {
  console.log(req.body);
  let calenderData = {};
  try {
    calenderData = await MySchedule.findOneAndUpdate(
      {
        userId: req.body.userId,
        start: req.body.start,
        end: req.body.end,
        calenderType: req.body.calenderType,
      },
      { title: req.body.title },
      { new: true }
    );

    return res.status(200).json(calenderData);
  } catch (error) {
    next(error);
  }
});

//myschedule Data delete
router.post("/calenderDataDelete", async (req, res, next) => {
  console.log("============delete");
  console.log(req.body);
  try {
    await MySchedule.deleteOne({
      userId: req.body.userId,
      start: req.body.start,
      end: req.body.end,
      calenderType: req.body.calenderType,
    });
    return res.json({ deleteYn: true });
  } catch (error) {
    next(error);
  }
});

module.exports = router;

 

[결과화면]

 

캘린더 조회 데이터