목록분류 전체보기 (447)
For Programmer
8. 구독기능 구현(1) - 유튜브 클론 코딩
1. Subscriber Model 만들기: server -models - Subscriber.js 생성 2. Subscriber.js 몽구스 DB 코드 const mongoose = require("mongoose"); const Schema = mongoose.Schema; const subscriberSchema = mongoose.Schema( { userTo: { type: Schema.Types.ObjectId, ref: "User", }, userFrom: { type: Schema.Types.ObjectId, ref: "User", }, }, { timestamps: true } ); const Subscriber = mongoose.model("Subscriber", subscriberS..
7. 디테일 비디오 페이지에 사이드 비디오 리스트 생성 - 유튜브 클론 코딩
1. Components - views - VIdeoDetailPage - Sections - SideVideo.js 만들기 2. SideVideo.js 코딩(Axios통신으로 서버에 동영상 리스트 받기까지 포함) import React, { useEffect, useState } from 'react'; import Axios from 'axios'; function SideVideo() { const [sideVideos, setsideVideos] = useState([]); useEffect(() => { Axios.get('/api/video/getVideos').then((response) => { if (response.data.success) { console.log(response.dat..
6. 비디오 디테일 페이지 만들기 - 유튜브 클론 코딩
1.Components - views - VideoDetailPage 폴더생성 - VideoDetailPage.js 파일생성 2. App.js에 VideoDetailPage에 접속할 수있는 라우터생성하기 3.VideoDetailPage 코딩(Axios로 서버에 데이터요청까지 포함) import React, { useState, useEffect } from 'react'; import { Row, Col, Avatar, List } from 'antd'; import Axios from 'axios'; function VideoDetailPage(props) { const videoId = props.match.params.videoId; //랜딩페이지에서 주소창뒤에 videoId를 보내주고있기때문에가능..
5. 랜딩 페이지에 비디오 보이기 - 유튜브 클론 코딩
1.랜딩페이지에서 서버에있는 비디오 데이터들을 가져오기 위한 Axios통신 보내기 const LandingPage = (props) => { const [Video, setVideo] = useState([]); useEffect(() => { Axios.get('/api/video/getVideos').then((response) => { if (response.data.success) { console.log(response.data); setVideo(response.data.videos); } else { alert('비디오 가져오기를 실패했습니다.'); } }); }, []); ....이하생략 2. 서버에 있는 라우터에서 클라이언트로 비디오데이터 정보 보내기 router.get("/getVide..
4. 비디오 업로드 하기 - 유튜브 클론 코딩
* 관계형 데이터 베이스 vs NoSql 1. Video Collections를 만들기(server - models - Video.js) const mongoose = require("mongoose"); const Schema = mongoose.Schema; const videoSchema = mongoose.Schema( { writer: { type: Schema.Types.ObjectId, //이런식으로 설정하면 User모델에있는 모든 데이터들을 불러올 수있다. ref: "User", //User모델에서 불러오기위해 }, title: { type: String, maxlength: 50, }, description: { type: String, }, privacy: { type: Number, ..
3. 비디오 썸네일 생성하기 - 유튜브 클론 코딩
1. fluent-ffmpeg를 다운받기 위해 ffmpeg https://kyoko0825.tistory.com/entry/%EC%9C%88%EB%8F%84%EC%9A%B0-10%EC%97%90%EC%84%9C-ffmpeg-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 윈도우 10에서 ffmpeg 사용하기 ffmpeg using on Windows 10 (2018.08.23) ffmpeg은 강력한 encoder/decoder이기 때문에 많은 곳에 사용된다. 하지만 GUI 에서의 사용의 제한으로 인해 command line으로만 사용이 가능하다. (windows key +r.. kyoko0825.tistory.com * 맥을 사용하고 있다면 vs code 커맨드라인에서 깃으로 brew ..
2. 업로드 비디오를 서버(node.js)에서 저장하기 -유튜브 클론 코딩
1. OnDrop function 만들어준다. const onDrop = (files) => { //올린파일에대한 정보가 files에대입 let formData = new FormData() const config = { header: { 'content-type': 'multipart/form-data' }, } formData.append('file', files[0]) Axios.post('/api/video/uploadfiles', formData, config).then((response) => { if (response.data.success) { console.log(response.data) } else { alert('비디오 업로드를 실패했습니다.') } }) } Dropzon 태그에 설..
1. 비디오 FORM 만들기 -유튜브 클론 코딩
위 사진의 진행순서대로 기록 1. Components - views - videoUploadPage.js 생성 2. App.js 파일에 라우터 등록 - 3 ,4 ,5 ,6 단계 통합 코드 (5. 에서 'npm install react-dropzone --save' 는 client폴더 즉, React에서 다운받아주도록한다.) videoUploadPage.js ↓ import React, { useState } from 'react' import { Typography, Button, Form, message, Input, Icon } from 'antd' import { PlusOutlined } from '@ant-design/icons' import Dropzone from 'react-dropzone..