JNarin Development Story

저번 시간에 ffmpeg 라이브러리 설치하기 전에 윈도는 설정해야 할 것이 있었다. ffmpeg 윈도우 설정 바로가기 이제 본격적으로 코드 스터디를 진행해보겠다. 1. 라이브러리 설치 yarn add fluent-ffmpeg npm i fluent-ffmpeg 먼저 ffmpeg 라이브러리를 설치한다. 2. 서버에 저장된 섬네일을 생성 다음은 서버에 저장된 영상을 이용하여 썸네일을 생성하는 코드를 제작해보려고 한다. // client > src > components > views > VideoUploadPage > VideoUploadPage.js // 중략 axios.post('/api/video/uploadfiles', formData, config) .then(response => { if(resp..

React를 공부하다가 ffmpeg를 사용해야 하는데 윈도의 경우 설치방법이 따로 있다고 한다. 그래서 오늘은 이를 사용하기 위해 먼저 설치를 진행해보려 한다. 1. FFMPEG란? Fast Forward mpeg로, 디지털 음성 스트림과 영상 스트림에 대해 다양한 종류의 형태로 기록하고 변환하는 컴퓨터 프로그램이다. 2. FFMPEG를 설치하는 방법은? 먼저 구글에 FFMPEG를 검색하면 상단에 공식 홈페이지가 있다. 다음 그림과 같은 순서대로 진행하면 된다. 1) Download를 클릭한다. 2) 아래 윈도우 모양에 마우스를 가져다 댄다. 3) windows builds from gyan.dev를 클릭한다. 위와 같은 사이트가 나오면 쭈욱 스크롤을 내리다 보면 release가 나오며 링크를 클릭하여 ..

리액트 유튜브 2일 차로 어제 비디오 폼을 만들었다면, 비디오를 올려 서버에 저장하는 기능을 만드려 한다. 1. onDrop 함수 만들기 아래는 공식문서 맨 앞에 있는 코드를 가져온 것이다. {({getRootProps, getInputProps}) => ( Drag 'n' drop some files here, or click to select files )} 코드는 공식문서와 거의 비슷하다. onDrop Dropzone의 메소드 중 일부로, 사이즈에 따라 파일이 승인이 되거나 거부가 될 수 있다. 그래서 필자가 처음에 영상을 올리려 했는데 너무 maxsize값을 너무 작게 해 놓아서 올라가지 않았다. multiple 여러 파일을 올리는 것인지를 true OR false로 구분 짓는다. true는 다중..

이제 새롭게 시작하는 스터디는 바로 유튜브 페이지 만들기이다. 이전 학원 수강생이 만든 거 같았는데, 이렇게 혼자 공부하면서 다시 하게 될 거란 걸 상상도 못 했었다. (이렇게 길게 취준생이 될거라 누가 상상했는가...) 이 글은 Infren의 유튜브 사이트 만들기를 모티브로 제작하였습니다. 1. 페이지 만들기 // client > src > components > views > VideoUploadPage > VideoUploadPage.js import React from 'react' function VideoUploadPage() { return ( Wow! ) } export default VideoUploadPage ES7 React/Redux/GraphQL...의 확장자를 설치하게 되면, 단..