JNarin Development Story

유튜브에서 구독하는 기능을 만들어 보려고 한다. Subscriber Model 만들기 다음 링크에서 확인하기 Subscribe Button UI 만들기 // client > src > components > views > VideoDetailPage > VideoDetailPage.js // 중략 import Subscribe from "./Sections/Subscribe"; function VideoDetailPage(props) { // 중략 if (VideoDetail.writer) { return ( // 중략 //중략 ) } else { return ...Loading; } } export default VideoDetailPage; UI 디자인 및 코드를 작성하기엔 너무 길기 때문에 Subs..

안녕하세요. 제이나린 입니다. 오늘은 우측에 있는 사이드 비디오를 만드는 과정을 적어보려고 합니다. 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 ); } ..

SPA Single Page Application 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션을 의미한다. SPA단점 앱의 규모가 커지면서 자바스크립트 파일이 너무 커지는 것이다. 페이지 로딩시 사용자가 실제로 방문하지 않을 수 도 있는 페이지의 스크립트도 불러오는데 그로인한 개선방법을 스플리팅(code splitting)을 트래픽과 로딩 속도를 개선할 수 있다. Router 다른 조수에 다른 화면을 보여주는 것으로 자체에 기능이 내장되어 있지는 않다. 그 대신 브라우저의 API를 직접 사용하여 관리하거나 라이브러리를 사용하여 쉽게 구현할 수 있다. 설치하는 방법은 다음과 같이 작성하면 된다. $ yarn add react-router-dom 이 명령어를..

저번 시간에 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..

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

저번 시간에는 로그인 페이지를 만들었었다. 이번에는 마지막으로 회원가입 페이지를 만드는 시간을 가지려 한다. 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 일단 전체적으로 가운데로 모아주는 작업으로 디자인 작업을 했다. 그러..

이전에 조금 어렵게 느껴졌던 React hook를 좀 더 쉽게 설명이 된 자료가 있어서 참고하여 작성을 해보았다. class Components function Components class component의 경우 라이프사이클을 사용을 할 수 있어 성능적인 면은 좋으나, 속도가 느려진다. 반대로 function component의 경우 라이프사이클의 성능은 못쓰지만, 속도는 빠르고 간결한 코드작성이 용이하다. 이를 업그레이드 하기 위해 hook이 탄생하게 된 것이다. React 16.8이 업그레이드 된 후 Hook이 탄생하게 되었다. class Components function Components 여기서 constructor = useState, componentDidMount = useEffect라..