📝 오늘 한 것

1. 복습 - VIEWS API

2. 복습 - VIDEO RECORDER

3. 복습 - WEBASSEMBLY VIDEO TRANSCODE

📚 배운 것 (복습)

실제 코드는 github에 올림(wetube_v2)

9. VIEWS API

• [TIL] 211212
  • 페이지 이동 없이 url 호출 (fetch API)
  • 프론트엔드와 백엔드에서 데이터 공유하는 법 (data 속성)

10. VIDEO RECORDER

• [TIL] 211213
  • video recorder 만들기
  • FFmpeg.wasm 설치 및 사용
  • CORS 에러 및 해결 - CORS 설정 / img 태그에 crossorigin 속성 추가

11. WEBASSEMBLY VIDEO TRANSCODE

• [TIL] 211214

  • 썸네일 추출하기 (ffpmeg 이용)
  • flexbox / grid에서 마지막 행을 정렬하는 방법 🔥
    → 두 번째 버전에서는 이를 참고는 했으나 실제 수정은 이렇게 했다 - [TIL] 211227

• [TIL] 211215

  • input[type="file"] CSS 스타일링
  • 선택한 파일 이름 보여주기
  • fileName input[type="text"]에 focus 이벤트 발생 시 파일 선택 창 띄우기 (추가)

💡 fileName input[type="text"]에 focus 이벤트 발생 시 파일 선택 창 띄우기 (추가)

• watch.pug ( thumb.pug와 avatar.pug도 마찬가지 )

div.upload.upload-video
  input.upload-video__file-name(value="VIDEO 파일" readonly)
  label.upload-video__label(for="video" readonly)
    i.fas.fa-file-import
  input.upload-video__file(name="video", type="file", accept="video/*", id="video", required)

• fileName.js

const videoFileName = document.querySelector(".upload-video__file-name");
const thumbFileName = document.querySelector(".upload-thumb__file-name");
const avatarFileName = document.querySelector(".upload-avatar__file-name");
const videoFileInput = document.querySelector(".upload-video__file");
const thumbFileInput = document.querySelector(".upload-thumb__file");
const avatarFileInput = document.querySelector(".upload-avatar__file");
const videoLabel = document.querySelector(".upload-video__label");
const thumbLabel = document.querySelector(".upload-thumb__label");
const avatarLabel = document.querySelector(".upload-avatar__label");

const showFileName = (fileInput, fileName) => {
  fileInput.addEventListener(
    "input",
    (event) => (fileName.value = event.target.files[0].name)
  );
};

const openUploader = (fileName, fileLabel) => {
  fileName.addEventListener("focus", () => fileLabel.click());
};

if (videoFileInput) {
  showFileName(videoFileInput, videoFileName);
  openUploader(videoFileName, videoLabel);
}

if (thumbFileInput) {
  showFileName(thumbFileInput, thumbFileName);
  openUploader(thumbFileName, thumbLabel);
}

if (avatarFileInput) {
  showFileName(avatarFileInput, avatarFileName);
  openUploader(avatarFileName, avatarLabel);
}

그 외 버그 수정

• video 삭제 시 video.owner.videos에서도 해당 video 삭제

export const deleteVideo = async (req, res) => {
  const { _id } = req.session.user;
  const { id } = req.params;
  const video = await Video.findById(id);
  if (!video) {
    return res.render("404", { pageTitle: "Video not found" });
  }
  if (String(video.owner) !== _id) {
    return res.status(403).redirect("/");
  }
  await Video.findByIdAndDelete(id);
  const user = await User.findById(_id);
  user.videos.splice(user.videos.indexOf(id), 1);
  await user.save();
  return res.redirect("/");
};

• VIEWS apiRouter에 protectorMiddleware 추가

• video player의 keydown 이벤트 switch 문에 case "M"(대문자) 추가

✨ 내일 할 것

1. 복습 계속하기 - FLASH MESSAGE