For Programmer

1.Comment.js페이지 코딩(axios통신 포함),(client-src-components-views-VideoDetailPage-Sections-Comment.js) import React, { useState } from 'react'; import Axios from 'axios'; import { useSelector } from 'react-redux'; function Comment(props) { const videoId = props.postId; const [commentValue, setcommentValue] = useState(''); const user = useSelector((state) => state.user); const handleChange = (event) =>..

1.댓글구조 2.Comment model 생성(server-models-Comment.js) const mongoose = require("mongoose"); const Schema = mongoose.Schema; const commentSchema = mongoose.Schema( { writer: { type: Schema.Types.ObjectId, ref: "User", }, postId: { type: Schema.Types.ObjectId, ref: "Video", }, responseTo: { type: Schema.Types.ObjectId, ref: "User", }, content: { type: String, }, }, { timestamps: true } ); const Comm..

1. Subscription.js 페이지 생성(client-components-views-SubscriptionPage-SubscriptionPage.js) 2.Subscription 페이지 라우터 생성(Client-App.js) import SubscriptionPage from './components/views/SubscriptionPage/SubscriptionPage'; 3. Subscription.js 페이지 코딩(서버와 Axios통신 포함) import React, { useEffect, useState } from 'react'; import { Typography, Row, Col, Card, Avatar } from 'antd'; import moment from 'moment'; im..

1. 구독하기 기능과 구독취소하기 기능을 가진 함수를 리액트 Subscribe.js 에 만들기(Axios통신 포함) .....코드계속 const onSubscribe = () => { let subscribedVariable = { userTo: props.userTo, userFrom: props.userFrom, }; if (Subscribed) { //이미구독중이라면 Axios.post('/api/subscribe/unSubscribe', subscribedVariable).then( (response) => { if (response.data.success) { setSubscribeNumber(SubscribeNumber - 1); setSubscribed(!Subscribed); } else ..

1. Subscriber Model 만들기: server -models - Subscriber.js 생성 2. Subscriber.js 몽구스 DB 코드 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", subscriberS..

1. Components - views - VIdeoDetailPage - Sections - SideVideo.js 만들기 2. SideVideo.js 코딩(Axios통신으로 서버에 동영상 리스트 받기까지 포함) import React, { useEffect, useState } from 'react'; import Axios from 'axios'; function SideVideo() { const [sideVideos, setsideVideos] = useState([]); useEffect(() => { Axios.get('/api/video/getVideos').then((response) => { if (response.data.success) { console.log(response.dat..

1.Components - views - VideoDetailPage 폴더생성 - VideoDetailPage.js 파일생성 2. App.js에 VideoDetailPage에 접속할 수있는 라우터생성하기 3.VideoDetailPage 코딩(Axios로 서버에 데이터요청까지 포함) import React, { useState, useEffect } from 'react'; import { Row, Col, Avatar, List } from 'antd'; import Axios from 'axios'; function VideoDetailPage(props) { const videoId = props.match.params.videoId; //랜딩페이지에서 주소창뒤에 videoId를 보내주고있기때문에가능..

1.랜딩페이지에서 서버에있는 비디오 데이터들을 가져오기 위한 Axios통신 보내기 const LandingPage = (props) => { const [Video, setVideo] = useState([]); useEffect(() => { Axios.get('/api/video/getVideos').then((response) => { if (response.data.success) { console.log(response.data); setVideo(response.data.videos); } else { alert('비디오 가져오기를 실패했습니다.'); } }); }, []); ....이하생략 2. 서버에 있는 라우터에서 클라이언트로 비디오데이터 정보 보내기 router.get("/getVide..