합니다, 개발공부📝 합니다, 개발공부📝

이번에는 댓글을 달 수 있는 기능을 만들 것이다. 전체 디테일 페이지에서 커멘트 리스트가 있다. Root comment Form 은 원래 댓글을 생성하는 창이고, single comment 는 유저 정보와 컨텐트 , 커멘트 폼과 액션이 있는데 이것은 하나만 생성되어있는 댓글에 답댓을 다는 형식이다. 그다음 reply comment는 이미 생성된 댓글의 댓글에 다시 답댓을 다는 form 이다. 여기서 replycomment 안에 다시 singlecomment form- reply comment form 형식을 넣어서 무한정으로 답댓을 다는 것이 가능하게끔 설정해둔 것이다. 댓글의 댓글도 달 수 있다. 우선 comment form을 생성해보자. server>models>Comment.js를 생성한다. con..

이번에는 구독한 비디오만 나타나는 페이지를 만들 것이다. src>components>views>SubscriptionPage>SubscriptionPage.js파일을 만들어준다. import React from 'react' function SubscriptionPage() { return ( SubscriptionPage ) } export default SubscriptionPage App.js에 라우트를 추가해준다. import SubscriptionPage from "./views/SubscriptionPage/SubscriptionPage"; 랜딩페이지에서의 템플릿을 복사해서 가져온다(비슷하기 때문에) import React ,{useEffect,useState} from 'react' impo..

이번에는 동영상의 구독기능을 만들 것이다. model은 구독 받는 사람과 구독하는 사람으로 나누어 나타낸다. 구독하고 있으면 subscribed (회색) 구독 하지 않고 있으면 subscribe(빨간색) 버튼으로 나오도록 지정할 것이다. 먼저 server>models>Subscribers.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' } }, {t..

랜딩페이지에서 비디오 하나를 클릭하면 하나의 비디오에 해당하는 디테일 페이지를 생성하도록 만든다. 제일먼저 비디오 디테일 페이지를 만들어준다. src>components>views>VideoDetailPage>VideoDetailPage.js를 생성해준다. 그리고 만든 페이지를 app.js에서 추가해준다. 링크는 개별의 videoId를 이용해서 들어오도록 설정하고 아무나 볼 수 있도록 null로 넣어준다. import React, { Suspense } from 'react'; import { Route, Switch } from "react-router-dom"; import Auth from "../hoc/auth"; // pages for this product import LandingPage f..

랜딩페이지에 업로드한 비디오들이 나오도록 해보자. 제일먼저 랜딩페이지를 설정해보자. src>components>views>landingPage>LandingPage.js로 가자. 디자인을 위해서는 antd를 사용한다. import React ,{useEffect,useState} from 'react' function LandingPage() { return ( Recommended {/* Row하나당 Column의 갯수 정한다. 총 24사이즈로 화면 사이즈가 lg라면 화면에 4개가 보이고, md = 3개, xs = 1개가 보인다. */} {/* 하나의 동영상에 해당하는 페이지로 이동 */} {minutes}:{seconds} {video.writer.name} {video.views} views - {..

submit 버튼을 누르면 실제로 mongo db 로 비디오를 보내는 기능을 만든다. mongodb는 mysql같은 RDBMS에서 부르는 호칭과는 조금 다르다. server>models>Video.js파일을 만들어준다. user의 형식을 만든 것처럼 video에서 필요한 내용을 만들어준다. 여기서 writer는 비디오를 업로드 하는 사람이다. 쓰는 사람의 Id 만을 넣어도 쓰는 사람의 모든 것을 불러올 수 있도록 schem.types.objectId를 이용한다. (ref: 'User') const mongoose = require('mongoose'); const Schema = mongoose.Schema; const videoSchema = mongoose.Schema({ writer: { type ..

파일을 업로드 하면 옆에 썸네일이 생성되도록 지정할 것이다. 썸네일을 생성하기 위해서는 ffmpeg를 사용한다. brew install ffmpeg를 해주고, 그 후 npm install fluent-ffmpeg --save를 해준다. 썸네일 생성을 위해 저번시간에 생성한 onDrop함수에 다음과 같은 axios구문을 추가해준다. const onDrop = (files) =>{ //axios를 통해서 데이터 보낼때 파일이 오류생기지 않도록 전환하는 head 사용한다. let formData = new FormData; const config = { header: {'content-type': 'multipart/form-data'} } formData.append("file", files[0])//첫번째..

저번까지는 입력창을 완성했고 이번에 dropzone의 기능을 완성할 것이다. 비디오 업로드의 기능을 사용하기 위해서는 multer를 이용한다. onDrop 함수를 추가해준다. const onDrop = (files) =>{ //axios를 통해서 데이터 보낼때 파일이 오류생기지 않도록 전환하는 head 사용한다. let formData = new FormData; const config = { header: {'content-type': 'multipart/form-data'} } formData.append("file", files[0])//첫번째 파일을 가져오기 위해서 배열을 사용한다. //서버에 보낸다. Axios.post('/api/video/uploadfiles', formData, config..