목록React & Node.js 프로젝트 (46)
For Programmer
* 관계형 데이터 베이스 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, ..
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 ..
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. 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..
안녕하세요. 리액트 - 노드js를 활용하여 유튜브 사이트를 만들기를 진행할려고합니다. 우선 기본적인 boiler-plate 코드가 필요하기 때문에 아래의 boilter-plate 코드를 다운받아 주세요(블로그 내에 boilter-plate에 관한 강의도 있습니다. - 참고로 John-Ahn님의 boiler-plate코드입니다.) https://github.com/jaewonhimnae/boilerplate-mern-stack jaewonhimnae/boilerplate-mern-stack Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX - jaewonhimnae/boilerplate-mern-stack github.com *혹여나 boiler..
git-hub에 보면 boilerplate란 용어를 굉장히 많이쓴다. 또한 boiler-plate이 실제 개발에 있어서 굉장히 유용한데 이는 단어 뜻 그대로 보일러를 찍어내는 통(접시) 정도라고 생각하면 된다. 즉, 코딩에서 적용해 보면 간단한 초기 기능의 반복적인 코드를 하나의 통안에 집어 넣는 다고 생각하면 된다. 그 통에 들어가는 코드를 boiler-plate이라고 생각하면된다. 우리가 만들 boiler-plate은 웹개발에 있어서 가장 기본이되는 회원가입,로그인,기본페이지를 만들 것이며 몽고DB와 리액트 , node-js를 이용해서 만들 것이다. 프론트 즉, 화면에 보여질 부분을 React를 이용할 것이며 회원가입처리 로그인처리를 node.js를 이용하여 처리할 것이다. 또한 데이터저장은 no-s..