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

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

저번 시간에는 로그인 페이지를 만들었었다. 이번에는 마지막으로 회원가입 페이지를 만드는 시간을 가지려 한다. 1. LoginPage.js를 가져와 추가하기 // client > src > components > views > RegisterPage > RegisterPage.js import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { registerUser } from '../../../_actions/user_action'; function RegisterPage(props) { const [Email, setEmail] = useState(""); const [Password, setPass..

오늘은 드디어 대망의 로그인 화면 구현하기를 정리하려 한다. 내용이 쉽지 않아서 정리하고도 이해가 잘 될지 걱정이 되지만 그래도 포기하지 않고 적어보려 한다. 이 부분은 한번에 이해가 쉽지 않기에 지속적인 반복으로 이해가 필요하다. 1. 메인 화면 디자인 // client > src > components > views > LandingPage > LandingPage.js import React, { useEffect } from 'react'; import axios from 'axios'; function LandingPage() { // 일부 생략 return ( 시작페이지 ) } export default LandingPage 일단 전체적으로 가운데로 모아주는 작업으로 디자인 작업을 했다. 그러..

이 내용은 이미 필자가 많이 알고 있어서 조금 간략하게 정리하고 넘어가려고 한다. 자세한 내용은 다른 블로그를 참고하시길 바라며 추가적으로 또 무언가 알게 될 경우 업데이트를 할 예정이다. 라우터 관리를 좀 더 편리하기 위해 라이브러리를 설치한다. yarn add react-router-dom react-router-dom을 import를 한 후 다음과 같은 코드를 작성한다. // client > src > App.js import React from 'react'; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import LandingPage from './components/views/LandingPa..

오늘은 로그아웃 기능을 만들어 보려고 한다. 1. 로그아웃 Router 만들기 // index.js app.get('/api/users/logout', auth, (req, res) => { }) 먼저 로그아웃 router를 만들어주고 auth middleware도 추가해준다. 2. 로그아웃 하려는 유저를 DB에서 찾기 app.get('/api/users/logout', auth, (req, res) => { User.findOneAndUpdate({ _id: req.user._id }, }) }) 여기서 findOneAndUpdate를 사용하여 로그아웃하려는 유저 ID를 찾는다. 3. 찾은 유저의 토큰을 삭제 app.get('/api/users/logout', auth, (req, res) => { U..

오늘은 Auth 기능을 공부하였는데 아직도 이해가 가지 않는 부분도 있지만 따라 해보려 한다. 먼저, 추후에 쓰일 예정이지만 Express라는 라우터를 사용하기 위해 현재 쓰이는 API들의 경로를 디테일하게 나누었다. 이렇게 해야 현재 라우터가 어디에 관련된 라우터인지 알 수 있기 때문이다. users, products, comment 등 다양하게 존재하기 때문이다. index.js 상단에는 auth를 import를 해야 사용할 수 있다. 또한 middleware값에서 Authenticaation이 True일 경우 원하는 유저정보를 제공하여 가져올 수 있다. middleware/auth.js 아직은 이 순서가 이해가 가면서도 이해가 잘 가지 않지만, 원래 어려웠던 것이니 일단 이렇게 하는구나 하고 넘어가..