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

랜딩페이지에서 비디오 하나를 클릭하면 하나의 비디오에 해당하는 디테일 페이지를 생성하도록 만든다. 제일먼저 비디오 디테일 페이지를 만들어준다. 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..

이와같은 비디오를 업로드하는 페이지 형식을 만들 것이다. 우선 client>components>views>VideoUploadPage>VideoUploadPage.js를 만든다 그 후 App.js에 route를 생성해준다. 여기서 null은 아무나 다 입장가능하고, false는 로그인한사람은 못들어가고, true는 로그인한사람만 들어갈 수 있다. import React, { Suspense } from 'react'; import { Route, Switch } from "react-router-dom"; import Auth from "../hoc/auth"; // pages for this product import LandingPage from "./views/LandingPage/LandingPa..

Login페이지와 마찬가지로 회원을 등록하는 페이지도 만들 것이다. App.js import React from 'react'; import {Route, Switch} from "react-router-dom"; import About from "./about"//index.js가 기본이기 때문에 굳이 타이핑하지 않아도 된다. import Login from "./RegisterLogin"; import Register from "./RegisterLogin/register"; function App() { return ( {/* */} ); } export default App; src>components>RegisterLogin>register.js index.js에서와 비슷하게 lastname, ..

컴포넌트 안의 registerlogin을 이용할 것이다. App.js에 라우터를 등록해 놓는다. import React from 'react'; import {Route, Switch} from "react-router-dom"; import About from "./about"//index.js가 기본이기 때문에 굳이 타이핑하지 않아도 된다. import LoginPage from "./RegisterLogin/LoginPage"; import RegisterPage from "./RegisterLogin/RegisterPage"; import LandingPage from "./ function App() { return ( {/* */} ); } export default App; 먼저 class ..