React-Youtube : 비디오를 서버에 업로드 하기

오늘은 서버에 비디오를 업로드하는 공부를 하려 한다.

 

 

1. 비디오 Collection 만들기

비디오 모델 만들기

먼저 서버에 Video.js 모델 기본 세팅을 해준다. 그런 후 필요한 collection을 설정한다.

// server > models > Video.js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const videoShema = mongoose.Schema({
    
    writer: {
        type: Schema.Types.ObjectId,
        ref: '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 })



const Video = mongoose.model('Video', videoShema);

module.exports = { Video }

비디오를 업데이트할 때 클라이언트에서 넘어가는 데이터들을 작성해준다. 여기서 writer부분만 조금 다른데, 작성자는 회원 가입한 유저이기 때문에 해당하는 유저에 대한 정보도 가져올 수 있게 하기 위한 코드라고 한다. 그리고 마지막에는 timestamps로 만든 날짜와 업데이트 날짜가 표시가 된다고 한다.

 

2. onSubmit Function 만들기

다음은 클라이언트에서 onSubmit 함수를 만들려 한다.

videoUploadPage.js에 onSubmit 추가하기

api/video/uploadVideo에 variables 값들을 보내어 성공이 될 경우와 안될 경우를 나누었습니다. 상단에 useSelector을 import 하여 state에 있는 현재 유저의 정보를 가져오게 하여 writer값에 너어줘야 한다. 아래와 같은 코드로 진행하면 된다.

// client > src > components > views >VideoUploadPage > VideoUploadPage.js
// 중략
import { useSelector } from 'react-redux';
//중략
function VideoUploadPage() {
    const user = useSelector(state => state.user); // state에서 유저의 정보를 가져온다.
    // 중략 
    const onSumit = (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) {
                
            } else {
                alert('비디오 업로드에 실패 했습니다.')
            }
        })
    }
    return (
    	<!-- 중략 -->
            <Form onSubmit={onSumit}>
            <!-- 중략 -->
                <Button type="primary" size="large" onClick={onSumit}>
                    Submit
                </Button>
            </Form>
    )
}
export default VideoUploadPage;

axios는 기본적으로 url을 전달해 요청을 하는데, 선택적으로 config 객체(현재 코드에서는 variables)를 2번째 인자로 추가 전달을 하게 된다. 즉, 원하는 url에 추가적으로 보낼 정보를 정리한다고 생각하면 될 것 같다.

 

3. 요청할 데이터 서버 보내기 공부를 하려 한다.

다음으로는 axios에서 요청한 url을 라우터로 만들어야 한다.

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

req.body는 클라이언트에서 보낸 모든 정보를 가져온다는 의미이다. 즉, 위에 variables값을 다 가져온다는 의미다. 만약 한개의 정보만 가져올 때는 req.body.writer 이런 식으로 쓰면 된다. (writer값만 가져올 경우)

그리고 몽고디비 메서드로 저장을 하고, 에러를 받을 때는 에러 메시지를 성공하였을 때는 200 포트와 성공코드를 보낸다.

 

4. 보낸 데이터 MongoDB 저장하기

마지막으로 성공을 하였을 때에 할일을 작성합니다.

데이터 성공시 메인으로 넘어가기

그리고 확인을 해보면 성공적으로 잘 되었고, 몽고 디비에 잘 넣었는지 마지막으로 확인합니다.

몽고디비에 잘 들어갔는지 확인

여기서 보시면 video파일이 생겼고, 그 데이터 값이 하나가 잘 들어간 것을 확인할 수 있다.

 

 

 

몽고 디비는 사실상 이번에 새로 배우게 되는 개념이었고, 정리를 하게 되었다.

근데 생각보다 기본 개념은 거의 다 비슷비슷하지만, 코드만 다르다는 걸 알 수 있다.

하지만 머리와 손은 따로 논다는 점...

 

오늘의 코드 바로가기