React-Youtube : 구독기능 모델 만들기

최근에 이력서와 면접 등의 일로 조금 늦어졌지만, 다시 하던 스터디를 시작해봅니다.

 

---

 

Subscriber Model 만들기

먼저 Model을 만들기 위한 기본 구성은 다음과 같다.

// server > models > Subscriber.js
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const subscriberSchema = mongoose.Schema({}, { timestamps: true });

const Subscriber = mongoose.model("Subscriber", subscriberSchema);
module.exports = { Subscriber };

mongoose를 불러와 schema를 생성하고, module.exports를 통해서 어디서든 불러올 수 있게 기본 설정을 진행하였다.

 

그런 다음 필드를 추가한다.

// server > models > Subscriber.js
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const subscriberSchema = mongoose.Schema(
  {
    userTo: {
      type: Schema.Types.ObjectId,
      ref: "User",
    },
    userFrom: {
      type: Schema.Types.ObjectId,
      ref: "User",
    },
  },
  { timestamps: true }
);

const Subscriber = mongoose.model("Subscriber", subscriberSchema);
module.exports = { Subscriber };

필드는 userTo, userFrom으로 다른 유저로부터 받는 값과 보내는 값을 만들었다.

 

나를 구독한 인원수

리액트에서 subscribeNumber이라는 경로로 구독자수를 요청을 하게 되면 다음과 같은 순서를 진행해야 한다. 먼저 index.js에서 다음과 같은 코드를 추가한다.

app.use("/api/subscribe", require("./routes/subscribe"));

express middleware을 이용하여, api/subscribe를 요청하면 routes/subscribe로 이동하라는 코드다. 그리고 routes에서 subscribe.js를 만든 후 다음과 같은 코드를 작성한다.

// server > routes > subscribe.js
const express = require("express");
const router = express.Router();
const { Subscriber } = require("../models/Subscriber");

//=================================
//             Subscribe
//=================================

router.post("/subscribeNumber", (req, res) => {
  Subscriber.find({ userTo: req.body.userTo }).exec((err, subscribe) => {
    if (err) return res.status(400).send(err);
    return res
      .status(200)
      .json({ success: true, subscribeNumber: subscribe.length });
  });
});

module.exports = router;

subscribeNumber라는 요청이 오면 userTo값을 찾아 오브젝트를 가져오는데 여기 값이 잘 가져오게 되면 성공 값과 함께 subscribeNumber의 개수가 같이 클라이언트로 넘어가게 된다.

 

내가 구독한 사람인지 확인하기

// server > routes > subscribe.js
const express = require("express");
const router = express.Router();
const { Subscriber } = require("../models/Subscriber");

//=================================
//             Subscribe
//=================================

router.post("/subscribeNumber", (req, res) => {
  // 중략
});
// 내가 구독하였는지 확인하는 라우트
router.post("/subscribed", (req, res) => {
  Subscriber.find({
    userTo: req.body.userTo,
    userFrom: req.body.userFrom,
  }).exec((err, subscribe) => {
    if (err) return res.status(400).send(err);
    let result = false;
    if (subscribe.length !== 0) {
      result = true;
    }
    res.status(200).json({ success: true, subscribed: result });
  });
});


module.exports = router;

 

구독이거나 혹은 구독이 아니거나

해당하는 리액트는 해당 제목으로 검색하시면 이 문서에서 검색하시면 됩니다.

이번에는 구독중일 때, 아직 구독 중이 아닐 때의 라우터를 작성해보려고 한다.

// server > routes > subscribe.js
const express = require("express");
const router = express.Router();
const { Subscriber } = require("../models/Subscriber");

//=================================
//             Subscribe
//=================================

// 중략

// 이미 구독중이라면
router.post("/unSubscribe", (req, res) => {
  Subscriber.findOneAndDelete({
    userTo: req.body.userTo,
    userFrom: req.body.userFrom,
  }).exec((err, doc) => {
    if (err) return res.status(400).json({ success: false, err });
    res.status(200).json({ success: true, doc });
  });
});

// 아직 구독중이아니라면
router.post("/subscirbe", (req, res) => {
  const subscribe = new Subscriber(req.body);
  subscribe.save((err, doc) => {
    if (err) return res.json({ success: false, err });
    res.status(200).json({ success: true });
  });
});

module.exports = router;

이미 구독중이라면, findOneAndDelete를 이용하여, userTo와 userFrom을 찾은 후 return을 해준다. 또한 아직 구독 중이 아니라면 save기능을 이용하여 구독에 대한 정보를 저장하도록 한다.

 

 

 

오늘은 이렇게 구독에 관련된 코드를 작성하였다.

서버와 클라이언트를 모두 하는 경우 왔다갔다하는 번거로움 때문에 많이 헷갈릴 수 있는데

한쪽만 하게 된다면 라우터만 알면 쉬울까? 아님 그것도 쉽지 않을까 하는 의문점이 생겼다.

 

오늘의 코드 바로가기