video upload & create(1)

이번 글에서는 video upload와 create에 대해서 다루겠습니다.

1) 우선 postUpload 컨트롤러에

console.log(file, title, description)을 추가해줍니다.

이것들을 추가해주는 이유는 실제 upload가 일어날 때,

어떤 일이 일어나는지 출력을 통해 알기 위해서입니다.

2-1) 하지만 File의 직접 정보는 중요하지 않습니다. 중요한 것은 File의 Location입니다.

이 Location은 어떤 서버, 예를 들면 나의 서버나 아마존의 서버에 있는 Location을 의미합니다.

2-2) 앞의 Video Model 만들기에서 설명했듯이,

Video Schema는 File 자체를 저장하지 않고, File의 Location을 저장합니다.

3) 다음은 Video가 아닌 다른 종류의 파일들(ex) image)이 업로드되는 것을 막아야 합니다.

upload.pug로 이동해서 input(type="file" ... ) 태그에 accept="video/*" 를 추가합니다.

4) 다음은 File을 upload하고 URL을 반환하는 middleware를 추가합니다.

이 middleware의 이름은 multar이다. npm install multar를 통해서 설치합니다.

5) 그리고 upload.pug의 form에 enctype= "multipart/form-data" 를 추가합니다.

enctype을 통해 전송되는 데이터 형식을 설정하며,

multipart/form-data는 파일을 서버로 전송할 경우 사용하는 방식이다.

6) 다음은 middlwares.js에 3줄의 코드를 추가해줍니다.

import multer from "multer" : 다운 받은 multer middlware를 import해줍니다.

const multerVideo = multer({dest: "uploads/videos/"});

: dest는 destination의 줄임말입니다.

여기서 destination은 우리가 이용할 서버에 있는 폴더의 주소를 의미합니다.

export const uploadVideo = multerVideo.single("videoFile");

: 여기서 single이란 오직 하나의 파일만 업로드할 수 있다는 것을 의미합니다.

const uploadVideo = multerVideo.single("videoFile")을 선언해주고,

uploadVideo를 export 해줍니다.

7) 다음은 videoRouters.js로 이동해서

import {uploadVideo} from "../middlewares" 를 추가하고

videoRouter.post(routes.upload, postUpload)의 중간에 uploadVideo를 추가합니다.

8) 다음과 같이 설정을 마쳤다면, 실제 file이 업로드되는 흐름은 다음과 같습니다.

8-1) 우리가 File을 Upload하면, 서버에 있는 폴더("uploads/videos/")에 업로드되고,

8-2) postUpload라는 function이 해당 FIle에 접근합니다.

이 때, 접근 방식은 file 방식이 아닌 URL 방식입니다.

나머지 내용은 2부에서 연결해서 다루겠습니다.

"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."