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,
    },
    filePath: {
      type: String,
    },
    category: {
      type: String,
    },
    views: {
      type: Number,
      default: 0,
    },
    duration: {
      type: String,
    },
    thumbnail: {
      type: String,
    },
  },
  { timestamps: true } //만든 날짜와 update시 날짜가 표시가 된다.
);
const Video = mongoose.model("Video", videoSchema); //1st모델의이름,2nd데이터

module.exports = Video; //다른파일에서사용가능

*다음과 같이 몽구스 스키마를 설정해줄 수있다. (관계형 데이터베이스에서 table과 똑같은 개념)

2. useSelector를 사용하여 state에있는 user 데이터 가져오기

import { useSelector } from 'react-redux'

const VideoUploadPage = (props) => {
  const user = useSelector((state) => state.user)
  //크롬 redux스토어 도구를 보면 user라는 state가 있다.
  //해당 state의 모든 json 데이터 들이 user라는 변수에 담긴다.
  const [VideoTitle, setVideoTitle] = useState('')
  const [Description, setDescription] = useState('')
  const [Private, setPrivate] = useState(0)
  const [Category, setCategory] = useState(0)

  const [FilePath, setFilePath] = useState('')
  const [Duration, setDuration] = useState('')
  const [ThumbnailPath, setThumbnailPath] = useState('')

3. onSubmit Function 만들기 + Axios로 서버에 데이터보내기

const onSubmit = (e) => {
    e.preventDefault() //새로고침방지
    const variables = {
      writer: user.userData._id,
      title: VideoTitle,
      description: Description,
      privacy: Private,
      filePath: FilePath,
      category: Category,
      duration: Duration,
      thumbnail: ThumbnailPath,
    }
    Axios.post('/api/video/uploadVideo', variables).then((response) => {
      if (response.data.success) {
        message.success('성공적으로 업로드를 했습니다.')
        setTimeout(() => {
          props.history.push('/')
        }, 3000)
      } else {
        alert('비디오 업로드에 실패 했습니다.')
      }
    })
  }
  return (
  ..... 이하생략

4. 서버에서 데이터들을 입력받아 몽고DB에 저장하기(routes-video.js)

const Video = require("../models/Video");

router.post("/uploadVideo", (req, res) => {
  //비디오 정보들을 저장한다.
  const video = new Video(req.body);
  video.save((err, doc) => {
    if (err) return res.json({ success: false, err });
    res.status(200).json({ success: true });
  });
});

 

실행결과