프론트엔드 정복하기

0. 비디오 카드 Template 만들기 -Row, Col, Card, moment, format 활용 (React 사전 참고) 1. mongoDB에서 video.data 가져오기 1) client에서 server로 [ get 요청 ] 보내기 더보기 useEffect(() => { Axios.get('/api/video/getVideos') .then(response=>{ if(response.data.success){ console.log(response.data) }else{ alert('비디오 가져오기를 실패했습니다.') } }) }, []) 2) server에서 DB 데이터를 client로 보내기 (find, populate, exec 메소드) 더보기 router.get('/getVideos', ..

1. 비디오 Collection 만들기 1) model 만들기 ( writer - ref.User , timestamps ) server > models > Video.js 더보기 const Schema = mongoose.Schema; const videoSchema = mongoose.Schema({ writer : { type : Schema.Types.ObjectId, ref : 'User' }, }, {timestamps:true} ) : 만든 date와 update한 date가 저장됨. .................... const Video = mongoose.model('Video',videoSchema) module.exports = { Video } 2. onSubmit func 만들..

0. ffmpeg 다운 : [ React 사전 - tool 설치 ] 글 참고 1. client에서 server로 videoUploadPage.js [ if 비디오 업로드에 성공하면 ] >> variable을 axios 함. 더보기 if(response.data.success){ let variable={ url:response.data.url, fileName:response.data.fileName } setfilePath(response.data.url) Axios.post('/api/video/thumbnail', variable) .then(response=>{ if(response.data.success){ setDuration(response.data.fileDuration) setThumbn..

1. onDrop func (서버로 비디오file 보내기) const onDrop = (files)=>{ let formData = new FormData; const config={ header:{'content-type' : 'multipart/form-data'} } formData.append("file", files[0]) //위 내용들이 있어야, axios.post 할 때 오류가 생기지 않는다. Axios.post('/api/video/uploadfiles', formData, config) .then(response=>{ if(response.data.success){ }else{ alert('비디오 업로드를 실패했습니다.') } }) } 2. 받은 비디오file을 서버에 '저장' serve..

1. 업로드 페이지 만들기 컴포넌트 파일 생성 > functional component(rfce) ( React import, export default ) 2. 업로드 페이지 Route 생성 App.js에서 추가 3. 업로드 페이지 Header Tab 추가4. 폼 만들기5. 파일 올리는 zone 1) npm i react-dropzone --save 2) { ({getRootProps, getInputProps}) =>( )} 6. onChange Func TitleInput, Description, PrivateSelect, CategorySelect >> onChange 함수