For Programmer

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

* 관계형 데이터 베이스 vs NoSql 1. Video Collections를 만들기(server - models - Video.js) const mongoose = require("mongoose"); const Schema = mongoose.Schema; const videoSchema = mongoose.Schema( { writer: { type: Schema.Types.ObjectId, //이런식으로 설정하면 User모델에있는 모든 데이터들을 불러올 수있다. ref: "User", //User모델에서 불러오기위해 }, title: { type: String, maxlength: 50, }, description: { type: String, }, privacy: { type: Number, ..

1. fluent-ffmpeg를 다운받기 위해 ffmpeg https://kyoko0825.tistory.com/entry/%EC%9C%88%EB%8F%84%EC%9A%B0-10%EC%97%90%EC%84%9C-ffmpeg-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 윈도우 10에서 ffmpeg 사용하기 ffmpeg using on Windows 10 (2018.08.23) ffmpeg은 강력한 encoder/decoder이기 때문에 많은 곳에 사용된다. 하지만 GUI 에서의 사용의 제한으로 인해 command line으로만 사용이 가능하다. (windows key +r.. kyoko0825.tistory.com * 맥을 사용하고 있다면 vs code 커맨드라인에서 깃으로 brew ..

1. OnDrop function 만들어준다. const onDrop = (files) => { //올린파일에대한 정보가 files에대입 let formData = new FormData() const config = { header: { 'content-type': 'multipart/form-data' }, } formData.append('file', files[0]) Axios.post('/api/video/uploadfiles', formData, config).then((response) => { if (response.data.success) { console.log(response.data) } else { alert('비디오 업로드를 실패했습니다.') } }) } Dropzon 태그에 설..