1. 구독 모델 만들기 (userTo, userFrom) 이유는 구독 받는 사람이 있고, 하는사람이 있어서 두개 이고
2. 버튼 UI 만들기
3. DB에서 얼마나 많은 사람이 비디오 업로드 한 유저를 구독하는지 정보 가져오기
몇명이 현재 사람을 구독하고 있는지에 대한 정보를 가져오는것이 첫번째이고
구독여부 파악하는 정보가 두번째 가져와야할 정보 입니다.
4. 화면에 출력 하기
server/ models/ Subscriver.js 파일을 생성해줍니다.
위의 경로에 맞게 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'
}
},{timestamp: true})
const Subscriber = mongoose.model('Subscriber', subscriberSchema);
module.exports = { Video }이렇게 코딩을 해주고 나서
비디오디테일 페이지로 가서 버튼을 생성해주겠습니다.
저 구독을 위해 따로 페이지를 만들어 구성할 것입니다.
저번 사이드비디오 처럼
Subscribe.js 파일 생성하고 아래 그림과 같이 비디오 디테일 페이지에 임폴트 시켜주세요.
버튼을 만들어준다.
import React from 'react'
function Subscribe() {
return (
<div>
<button
style ={{backgroundColor:'#CC0000', borderRadius: '4px',
color:'white',padding: '10px 16px',
fontWeight: '500', fontSize: '1rem', textTransform: 'uppercase'
}}
onClick
>
0 Subscribe
</button>
</div>
)
}
export default Subscribe
이렇게 하면 화면에
저렇게 구독 버튼이 생성 됩니다.
여기까지 하고 DB에서 얼만큼의 사람이 구독하는지 가져올것 입니다.
우선 1차적으로
import Axios from 'axios'
import React,{useStatus, useEffect}from 'react'
function Subscribe(porps) {
useEffect(() => {
let variable = {userTo: props.usreTo}
Axios.post('/api/subscribe/subscribeNumber',)
.then(response=>{
if(response.data.success){
}else {
alert('구독자 수 정보를 받아오지 못했습니다.')
}
})
}, [])
return (
<div>
<button
style ={{backgroundColor:'#CC0000', borderRadius: '4px',
color:'white',padding: '10px 16px',
fontWeight: '500', fontSize: '1rem', textTransform: 'uppercase'
}}
onClick
>
0 Subscribe
</button>
</div>
)
}
export default Subscribe
구독 부분은 이렇게 해주고
라우터 부분을 만들것입니다.
서버/ 라우터/ subscribe.js를 만들고
그 후에는 index.js 부분으로 가서
이렇게 해줘야 합니다. 그래야 우리가 만들 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, subscriberNumber: subscribe.length})
})
});
module.exports = router;최종적을 이런식으로 넘깁니다. 즉 length는 간단히 3명 구독했다 표시이런거?
그리고 다시 클라이언트 부분의 섹션의 subscribe.js 부분으로 가서
구독수 가져오는 것이고
그리고 비디오 업로드한 유저를 구독하는지 정보를 가져오는것도 구현하자.
//내가 현재 업로드한 유저를 구독했는지 여부 가져오기
let subscribedVariable = {userTo: props.usreTo, userFrom: localStorage.getItem("userId")}
Axios.post('/api/subscribe/subscribed',subscribedVariable)
.then(response=>{
if(response.data.success){
SubscribeNumber(response.data.success)
}else {
alert('정보를 받아오지 못했습니다.')
}
})
똑같이 그 아래에 다가 구현해주고, 라우터 생성을 해주러 갑시다.
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, subscriberNumber: subscribe.length})
})
});
router.post('/subscribed',(req,res)=>{
Subscribed.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;
최종적으로 라우터는 이것이고
다시 클라이언트 부분으로 가서
import Axios from 'axios'
import React,{useState, useEffect}from 'react'
function Subscribe(props) {
const [SubscribeNumber, setSubscribeNumber] = useState(0)
const [Subscribed, setSubscribed] = useState(false)
useEffect(() => {
//현재 업로드된 비디오 구독자 수 가져오기
let variable = {userTo: props.userTo}
Axios.post('/api/subscribe/subscribeNumber',variable)
.then(response=>{
if(response.data.success){
setSubscribeNumber(response.data.subscriberNumber)
}else {
alert('구독자 수 정보를 받아오지 못했습니다.')
}
})
//내가 현재 업로드한 유저를 구독했는지 여부 가져오기
let subscribeVariable = {userTo: props.userTo, userFrom: localStorage.getItem("userId")}
Axios.post('/api/subscribe/subscribed',subscribeVariable)
.then(response=>{
if(response.data.success){
setSubscribed(response.data.subscribed)
}else {
alert('정보를 받아오지 못했습니다.')
}
})
}, [])
return (
<div>
<button
style ={{backgroundColor:`${Subscribe ? '#CC0000':'#AAAAAA'}`, borderRadius: '4px',
color:'white',padding: '10px 16px',
fontWeight: '500', fontSize: '1rem', textTransform: 'uppercase'
}}
onClick
>
{SubscribeNumber} {Subscribed ? 'Subscribed' : 'Subscribe'}
</button>
</div>
)
}
export default Subscribe
해주고
디테일 화면 부분 저렇게독 모델 만들기 (userTo, userFrom) 이유는 구독 받는 사람이 있고, 하는사람이 있어서 두개 이고
2. 버튼 UI 만들기
3. DB에서 얼마나 많은 사람이 비디오 업로드 한 유저를 구독하는지 정보 가져오기
몇명이 현재 사람을 구독하고 있는지에 대한 정보를 가져오는것이 첫번째이고
구독여부 파악하는 정보가 두번째 가져와야할 정보 입니다.
4. 화면에 출력 하기

우선 위와 같이 해주기
server/ models/ Subscriver.js 파일을 생성해줍니다.
위의 경로에 맞게 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'
}
},{timestamp: true})
const Subscriber = mongoose.model('Subscriber', subscriberSchema);
module.exports = { Video }
이렇게 코딩을 해주고 나서
비디오디테일 페이지로 가서 버튼을 생성해주겠습니다.

저 구독을 위해 따로 페이지를 만들어 구성할 것입니다.

저번 사이드비디오 처럼
Subscribe.js 파일 생성하고 아래 그림과 같이 비디오 디테일 페이지에 임폴트 시켜주세요.


버튼을 만들어준다.
import React from 'react'
function Subscribe() {
return (
<div>
<button
style ={{backgroundColor:'#CC0000', borderRadius: '4px',
color:'white',padding: '10px 16px',
fontWeight: '500', fontSize: '1rem', textTransform: 'uppercase'
}}
onClick
>
0 Subscribe
</button>
</div>
)
}
export default Subscribe
이렇게 하면 화면에

저렇게 구독 버튼이 생성 됩니다.
여기까지 하고 DB에서 얼만큼의 사람이 구독하는지 가져올것 입니다.
우선 1차적으로
import Axios from 'axios'
import React,{useStatus, useEffect}from 'react'
function Subscribe(porps) {
useEffect(() => {
let variable = {userTo: props.usreTo}
Axios.post('/api/subscribe/subscribeNumber',)
.then(response=>{
if(response.data.success){
}else {
alert('구독자 수 정보를 받아오지 못했습니다.')
}
})
}, [])
return (
<div>
<button
style ={{backgroundColor:'#CC0000', borderRadius: '4px',
color:'white',padding: '10px 16px',
fontWeight: '500', fontSize: '1rem', textTransform: 'uppercase'
}}
onClick
>
0 Subscribe
</button>
</div>
)
}
export default Subscribe
구독 부분은 이렇게 해주고
라우터 부분을 만들것입니다.
서버/ 라우터/ subscribe.js를 만들고
그 후에는 index.js 부분으로 가서

ㅍ
이렇게 해줘야 합니다. 그래야 우리가 만들 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, subscriberNumber: subscribe.length})
})
});
module.exports = router;
최종적을 이런식으로 넘깁니다. 즉 length는 간단히 3명 구독했다 표시이런거?
그리고 다시 클라이언트 부분의 섹션의 subscribe.js 부분으로 가서

구독수 가져오는 것이고
그리고 비디오 업로드한 유저를 구독하는지 정보를 가져오는것도 구현하자.
//내가 현재 업로드한 유저를 구독했는지 여부 가져오기
let subscribedVariable = {userTo: props.usreTo, userFrom: localStorage.getItem("userId")}
Axios.post('/api/subscribe/subscribed',subscribedVariable)
.then(response=>{
if(response.data.success){
SubscribeNumber(response.data.success)
}else {
alert('정보를 받아오지 못했습니다.')
}
})
똑같이 그 아래에 다가 구현해주고, 라우터 생성을 해주러 갑시다.
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, subscriberNumber: subscribe.length})
})
});
router.post('/subscribed',(req,res)=>{
Subscribed.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;
최종적으로 라우터는 이것이고
다시 클라이언트 부분으로 가서
import Axios from 'axios'
import React,{useStatus, useEffect}from 'react'
function Subscribe(porps) {
const [SubscribeNumber, setSubscribeNumber] = useState(0)
const [Subscribed, setSubscribed] = useState(false)
useEffect(() => {
//현재 업로드된 비디오 구독자 수 가져오기
let variable = {userTo: props.usreTo}
Axios.post('/api/subscribe/subscribeNumber',)
.then(response=>{
if(response.data.success){
SubscribeNumber(response.data.success)
}else {
alert('구독자 수 정보를 받아오지 못했습니다.')
}
})
//내가 현재 업로드한 유저를 구독했는지 여부 가져오기
let subscribedVariable = {userTo: props.usreTo, userFrom: localStorage.getItem("userId")}
Axios.post('/api/subscribe/subscribed',subscribedVariable)
.then(response=>{
if(response.data.success){
setSubscribed(response.data.subscribed)
}else {
alert('정보를 받아오지 못했습니다.')
}
})
}, [])
return (
<div>
<button
style ={{backgroundColor:`${Subscribe ? '#CC0000':'#AAAAAA'}`, borderRadius: '4px',
color:'white',padding: '10px 16px',
fontWeight: '500', fontSize: '1rem', textTransform: 'uppercase'
}}
onClick
>
{SubscribeNumber}{Subscribed ? 'Subscribed' : 'Subscribe'}
</button>
</div>
)
}
export default Subscribe
해주고

디테일 화면 부분 저렇게
하면 최종적으로는
저렇게 표시되면 됩니다.
'WEB' 카테고리의 다른 글
| 최대절전모드아이콘만들기 (0) | 2022.01.16 |
|---|---|
| 구독 취소 기능 만들기 (0) | 2021.03.16 |
| 비디오 디테일 페이지에서 사이드 비디오 생성하기 (0) | 2021.03.10 |
| 비디오 디테일 페이지 만들기 (0) | 2021.03.10 |
| 랜딩페이지 비디오 나타내기 (0) | 2021.03.05 |
댓글