[JavaScript, Node.js] 유튜브 클론 정리 8장 (5) - 비디오 업로더

머리글

이번 시간에는 각 영상의 업로더를 표시하는 방법과
본인 영상의 경우 수정이 가능하도록 하는 법을 알아보자.

비디오 업로더

우선 기존에 했던 작업들을 조금씩 수정해주어야 한다.

우선 컨트롤러를 수정하자.

const video = await Video.findById(id);
->
const video = await Video.findById(id).populate("owner");

...

우선 아이디를 기반으로 찾았던 비디오를 populate를 통해 검색해 주었다.

populate는 Mongoose의 기능이다.
이는 문서의 지정된 경로를 다른 컬렉션의 문서로 자동 교체하는 프로세스이다.

쉽게 풀어서 설명하면 비디오뿐 아니라 비디오 owner의 정보도 같이 넘기겠다는 얘기다.

그리고 비디오의 업로드를 담당하는 컨트롤러도 수정하자.

  const {
    user: { _id },
  } = req.session;
  
  ...
    try {
    await Video.create({
	...
      owner: _id,
  	...

업로드할 때, 유저의 아이디를 세션을 통해 받아오고 이를 비디오를 생성할 때 같이 넣어준다.

그렇다면 비디오의 스키마도 수정을 해주어야 한다.

...
  owner: { type: mongoose.Schema.Types.ObjectId, required: true, ref: "User" },
...

이렇게 하면 기능적인 부분의 수정은 끝났다.

프런트엔드도 조금 수정해 주자.

우선 비디오의 업로더일 때,
영상 수정과 삭제 버튼을 활성화해 보자.

...
		small Uploaded by 
            a(href=`/users/${video.owner._id}`)=video.owner.name
    if String(video.owner._id) === String(loggedInUser._id)
        a(href=`${video.id}/edit`) Edit Video →
        br
        a(href=`${video.id}/delete`) Delete Video →

이런 식으로 비디오 업로더의 이름을 표기해 주었고
비디오의 업로더일 경우 수정 페이지와 삭제 페이지에 접근이 가능하게 했다.

마무리

이번 시간에는 비디오 업로더에 대한 표기와 기능적인 부분 수정을 해보았다.

다음 시간부터는 본격적으로 Webpack을 다뤄보자.