For Programmer

1.onClick func 만들기(Axios통신 포함)(LikeDislikes.js) * onClick 이벤트 like 버튼에 적용시키기 {LikeAction === '' ? ( ) : ( )} * onLike 함수만들기 const onLike = () => { if (LikeAction === '') { Axios.post('/api/like/upLike', variable).then((response) => { if (response.data.success) { setLikes(Likes + 1); setLikeAction('liked'); if (DisLikeAction !== '') { setDisLikeAction(''); setDislikes(Dislikes - 1); } } else { al..

1. Like & Dislike 버튼만들기 Like버튼만들기(VideoDetailPage.js) ...이하생략 * 다음과 같이 actions에 버튼을 만들어준다. Dislike버튼만들기(SingleComments.js) const actions = [ , Reply to , ]; return ( { Axios.post('/api/like/getLikes', variable).then((response) => { if (response.data.success) { //얼마나 많은 좋아요를 받았는지 setLikes(response.data.likes.length); //내가 좋아요를 이미 눌렀는지 response.data.likes.map((like) => { if (like.userId === props...

1.Like 와 Dislike Model을(몽고DB) 서버에 만든다. server-models-Like.js const mongoose = require("mongoose"); const Schema = mongoose.Schema; const likeSchema = mongoose.Schema( { userId: { type: Schema.Types.ObjectId, ref: "User", }, commentId: { type: Schema.Types.ObjectId, ref: "Comment", }, videoId: { type: Schema.Types.ObjectId, ref: "Video", }, }, { timestamps: true } ); const Like = mongoose.model("..

* 위 구조에서 볼 수 있듯이 ReplyComment안에 있는 SingleComment 와 ReplyComment를 중첩시켜놓는 구조를 만들어야한다. 1.Comment.js에서 큰 틀 잡기위한 코딩 {/* Comment Lists */} {props.commentList && props.commentList.map( (comment, index) => !comment.responseTo && ( //대댓글은 우선 숨기겠다는 의미 ) )} {/* Root Comment Form */} ...이하생략 * 각각의 코멘트 마다 map메서드를 통해서 댓글내용을표시하고(SingleComment) 그 밑에 대댓글의 개수를 구하는 형태(ReplyComment)를 만들겠다는 코드 (단 !comment.reponseTo ..

1. Comment.js에 SingleComment Component생성 {/* Comment Lists */} {props.commentList && props.commentList.map( (comment, index) => !comment.responseTo && ( ) )} * props.commentList && 는 comment가 존재할떄만 있을 경우에만 comment들을 보여주겠다는 의미이고 !comment.responseTo 의 의미는 responseTo는 답글을 달았으때만 몽고DB에 저장되는 값이기 때문에 이것이 없는 댓글들 즉, 대댓글이 아닌 댓글들만 페이지를 로딩했을때 우선적으로 보여주겠다는 의미이다. Comment.js의 부모컴포넌트인 VideoDetailPage.js에서는 다음과같..

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..