JNarin Development Story

안녕하세요. 제이나린 입니다. 오늘은 우측에 있는 사이드 비디오를 만드는 과정을 적어보려고 합니다. 1. SideoVideo 템플릿 만들기 먼저 SideVideo 템플릿을 만들기 위해서는 다음과 같은 경로가 필요하다. VideoDetailPage 폴더 안에 Sections라는 폴더를 만든 후 그 안에 SideVideo.js를 만든다. // src > components > views > VideoDetailPage > Sections > SideVideo.js import React from "react"; function SideVideo() { return ( {/* 이미지 */} {/* 이미지에 대한 정보 */} videoTitle videoWriterName videoViews Time ); } ..

저번 시간에 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가 나오며 링크를 클릭하여 ..