728x90 반응형 WEB49 비디오 디테일 페이지에서 사이드 비디오 생성하기 순서는 사이드 비디오 부분의 레이아웃 템플릿을 만들고 한개의 카드 템플릿을 만들어서 반복시키고 디비에서 모든 비디오 데이터를 불러와서 화면에 출력하는 식으로 진행 하겠습니다. 우선 위에와 같이 VideoDetailPage폴더에 Sections 폴더를 생성하고 그 안에 SideVideo.js 파일을 생성합니다. VideoDetailPage/Sections/SideVideo.js 이런 패스를 가지면 되겠죠? rfce 해서 function 컴포넌트를 만들고 그리고 디테일 페이지로 가서 방금만든것을 임폴트 시켜줍니다. import SideVideo from './Sections/SideVideo'; 이것을 해주고 다시 SideVideo 컴포넌트로 가서 import React from 'react' functio.. 2021. 3. 10. 비디오 디테일 페이지 만들기 client 안의 views 폴더안에 VideoDetailPage 폴더생성을 하시고 VideoDetailPage.js 그리고 저 파일 생성 하시면됩니다. rfce를 해주면 자동으로 functional 들어가고 import React from 'react' function VideoDetailPage() { return ( VideoDetailPage ) } export default VideoDetailPage 이렇게 코딩을 해주시고 라우터 생성을 해줍시다. client/src/components/App.js 부분으로 가서 방금 만든 페이지 import import VideoDetailPage from "./views/VideoDetailPage/VideoDetailPage.js" 추가해주고, 라우터 처.. 2021. 3. 10. 랜딩페이지 비디오 나타내기 비디오 Template 만들고 몽고DB에서 데이터 가져오고 가져온 비디오 데이터 스크린에 출력 Use map() methods 랜딩 페이지에서 우선 이거 만들고 import React ,{useEffect} from 'react' useEffect(() => { Axios.get('/api/video/getVideos') .then(respones=>{ if(respones.data.success){ }else{ alert('비디오 가져오기를 실패 했습니다.') } }) }, []) 라우터 생성을 위해 server의 video.js 부분으로 갑니다. routes/video.js 부분에 router.post('/getVideos',(req,res)=>{ //비디오를 DB에서 가져와서 클라이언트에 보낸다. .. 2021. 3. 5. 비디오 업로드 하기 이렇게 비슷하다고 생각하다고 알고 있으면 좋습니다. 우선 해야하는것은 비디오의 collection을 만들어야합니다. 거기에 들어가는 것이 Video + writer + title + description + privacy + filePath + category + views + duration + thumbnail 이렇게 들어간다 생각합시다. 1. server의 models에 가서 Video.js를 만들어줍니다. const mongoose = require('mongoose'); const Schema = mongoose.Schema; const videoSchema = mongoose.Schema({ writer : { type: Schema.Types.ObjectId, ref: 'User'//이렇게 .. 2021. 3. 3. 이전 1 2 3 4 5 ··· 13 다음 728x90 반응형
