프론트엔드 정복하기

*ffprobe란?) ffmpeg 라이브러리에서 제공하는 메소드 { streams: [0] [ { index: 0, [0] codec_name: 'h264', [0] codec_long_name: 'H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10', [0] profile: 'High', [0] codec_type: 'video', [0] codec_time_base: '1001/60000', [0] codec_tag_string: 'avc1', [0] codec_tag: '0x31637661', [0] width: 1280, [0] height: 720, [0] coded_width: 1280, [0] coded_height: 720, [0] closed_captions: 0,..

multer에서 제공함. diskStorage에서 제공하는 것도 참고할 것.

: app을 express와 연결시킨 후, app을 get, post, send 한다. (John Ahn 기본 강의에서 쓰던 방식 -> index.js에서 app에 직접 get, post를 함.) : router = 미니 app : router를 get, post, send 한다. (John Ahn YouTube Clone 강의에서 쓰던 방식 -> index.js에 router를 연결하고 get, post를 함.) ex) 더보기 client에서 axios.post ( '/api/users/users_register' ) // index.js const express= require('express') const app = express( ) app.use('/api/users', require('./ro..

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 함수