Comment

0. Before start

 - 댓글을 구현할 건데 우리가 했던 모든 것들을 복습할거임

 - 새로운 모델, 컨트롤러, 라우터, 바닐라JS, 상태코드, populate, mongoose relationship 등등

 - 동적인 댓글을 구현하고 이게 끝나면 배포할 거임

 - 실제 db를 사용하고 assets은 서버에 저장하면 안되니 그런 것들을 전부 수정

 - 모든 시작은 데이터부터 이므로 모델 먼저 만들거임

1. Comment Model

import mongoose from "mongoose";
const commentSchema = new Mongoose.Schema({
  text: { type: String, required: true },
  owner: { type: mongoose.Schema.Types.ObjectId, required: true, ref: "User" },
  video: { type: mongoose.Schema.Types.ObjectId, required: true, ref: "Video" },
  createdAt: { type: Date, required: true, default: Date.now() },
});
const Comment = mongoose.model("Comment", commentSchema);
export default Comment;

 - 모델을 만들고 나면 init에 import를 해줘야 하는데, 생각해보면 댓글은 영상에 달리고 영상은 많은 댓글을 가지게 됨

   - 영상도 여러 개의 해시태그를 가질 수 있는 것처럼 영상도 많은 댓글을 가질 수 있도록 배열 사용

   - 유저 모델도 마찬가지였음

 - 다음으로는 User 모델에서 했던 것처럼 할거임

   - 유저는 많은 영상을 가질 수 있고, 거기에 다른 유저들이 댓글을 작성하므로 영상을 올린 유저는 수많은 댓글을 가지게 됨

 - init에 import를 까먹지 말고 해두면 모델은 일단 마무리

2. Front-end

 - 설명이 필요한 부분만 작성하고 깃허브 링크로 대체

 - 우리는 댓글의 내용을 받고, 영상의 id를 dataset을 통해 받음

   - 그럼 데이터를 백엔드에 API로 전송할 준비가 됨

 - 댓글 모델에 소유자가 있는데 굳이 유저를 통해 댓글의 주인이 누구인지 알 필요가 없음

   - 세션을 통해 알 수 있음

   - 프론트 코드에 누가 댓글의 주인인지 알려줄 필요가 없음

 - https://github.com/Daniel-Jeon/wetube-loaded/commit/0dd39eba1a193c2a24224d2cec5fc8599ffffadd

Create Comment ! · Daniel-Jeon/wetube-loaded@0dd39eb

3. Comment API

 - 2번까지 했을때 querySelector of null 에러가 발생했으므로 이결 해결해야함

 - 로그인 되지 않았기 때문에 댓글 입력부분이 안나오므로 발생

 - block script에서 commentSection.js 또한 로그인 했을때만 보이도록 할수도 있지만 다른방법을 사용

 - 실제로 그렇지 않은데도 모든게 존재한다고 가정하는 것이 아니라 댓글 부분의 form을 먼저 찾음

   - 그 다음에 우리가 그것들을 받아오는 함수를 하나 만듦

 - 이렇게 했지만 존재하지 않는 것에는 addEventListener를 쓸 수없다고 함

   - 여전히 로그아웃 되어 있어서 form이 존재하지 않기 때문

 - 해결이 되었지만 더 안전한 것을 원한다면, 좀 전에 말했전 block script에도 조건문을 넣어주면 됨

 - 에러는 해결됐으니 백엔드에 request를 보내야 함

 - POST request는 데이터를 필요로 하는데 비디오 플레이어에서는 해당 영상의 url로 그냥 보내기만 해도 됐음

   - 추가 정보가 필요 없었지만 댓글의 경우 정보(댓글 내용)가 필요

 - 기억해보면 예로 영상을 업로드하면 백엔드는 req.body안 모든 input을 받게 됨

   - req.body를 만들기 위해 form이 필요하지 않음

 - 그러므로 req.body를 만들건데 fetch를 사용

// apiRouter.js
import { registerView, createComment } from "../controllers/videoController";
apiRouter.post("/videos/:id([0-9a-f]{24})/comment", createComment);
// videoController.js
export const createComment = async (req, res) => {
  console.log("req.params:", req.params);
  console.log("req.body:", req.body);
  res.end();
};

 

 - 에러없고 관리자 도구에도 comment request가 보임

 - req.params는 잘 나오지만 req.body가 비어있으며 우리가 원하는게 보내지지 않음

 - 나머지는 다음글에서 진행