📝 오늘 한 것

1. 에러 해결 - video.duration 가져오기

2. 복습 - SETUP / EXPRESS / MONGODB AND MONGOOSE(가짜 데이터베이스)

📚 배운 것

에러 해결

1. video.duration 가져오기

1) 에러 원인

로컬에서 AWS S3로 저장소를 옮긴 후 video.duration의 값을 가져오지 못해 비디오 플레이어에 전체 동영상의 길이가 뜨지 않는 에러가 발생했다.

처음에는 video.duration을 못 받아오는 게 문제인 줄 알았는데 알고 보니 애초에 lodeaddata 이벤트가 발생하지 않는 것이 문제였다. loadedmetadata도 마찬가지로 어떻게 해도 일어나지 않았다.
(현재 에러를 해결하기는 했지만, loadeddata 이벤트가 왜 발생하지 않았던 것인지는 아직도 모르겠다.)

2) 에러 해결

그래서 watch 페이지에 들어가서 video만 있다면 video.duration을 가져오는 handleLoadedData 함수가 바로 실행되도록 코드를 추가했다.

// videoPlayer.js
const formatTime = (seconds) => new Date(seconds * 1000).toISOString().substring(14, 19);

const handleLoadedData = () => {
  totalTime.innerText = formatTime(Math.floor(video.duration));
  timeline.max = Math.floor(video.duration);
};

// 추가 ❗
if (video) {
  handleLoadedData();
}

video.addEventListener("loadeddata", handleLoadedData);

그러나 그렇게만 작성하면 heroku에서는 잘 작동하지만 반대로 Local에서는 videoplayer가 아예 뜨지 않으면서 콘솔에 다음과 같은 에러가 출력됐다.

Uncaught RangeError: Invalid time value
at Date.toISOString ()

watch 페이지에 들어가기만 하면(다시 말해, video.duration을 포함한 동영상의 메타데이터를 로드하는 loadedmetadata 이벤트가 차마 발생하기도 전에) video.duration 값을 가져오는 handleLoadedData 함수가 실행되기 때문에 video.duration이 NAN 값을 가지게 되어 formatTime 함수에서 NAN * 1000을 정상적으로 계산할 수 없어 발생하는 에러였다.

그래서 아예 handleLoadedData 함수는 watch 페이지에 들어갔을 때 & Heroku 서버에 있을 때만 실행되도록 isHeroku 변수를 추가했다.

const formatTime = (seconds) => new Date(seconds * 1000).toISOString().substring(14, 19);

const handleLoadedData = () => {
  totalTime.innerText = formatTime(Math.floor(video.duration));
  timeline.max = Math.floor(video.duration);
};

// 추가 ❗
const isHeroku = process.env.NODE_ENV === "production";

// 수정 ❗
if (isHeroku && video) {
  handleLoadedData();
}

video.addEventListener("loadeddata", handleLoadedData);

이제 Heroku와 Local 모두에서 정상적으로 video.duration을 가져와 비디오 플레이어에 표시되는 것을 확인할 수 있다.

---

복습

처음부터 다시 구현 시작
실제 코드는 github에 올림(wetube_v2)

1. SET UP

• [TIL] 211111 ==> node.js / npm 이용해 package.json 파일 생성 / scripts
• [TIL] 211112 ==> npm i / dependencies
• [TIL] 211113 ==> Babel / Nodemon
• [TIL] 211119 ==> nodemon 에러(∵ /mnt) 해결

2. EXPRESS

1) routers & controllers

• [TIL] 211120 ==> 서버 구축 / GET Request / Responses
• [TIL] 211121 ==> morgan middleware / routers
• [TIL] 211122 ==> 모듈화(routers & controllers) / templates

홈 / 회원가입 / 로그인 /검색

app.use("/", rootRouter);

프로필 보기 / 프로필 수정 / 로그아웃

app.use("/", userRouter);

비디오 업로드 / 비디오 보기 / 비디오 수정 / 비디오 삭제

app.use("/", videoRouter);

2) pug

• [TIL] 211122 ==> pug 설정 / #{JS 코드} / include
• [TIL] 211123 ==> extends & block / #{변수} / 조건문 / 반복문 / mixins

3. MONGODB AND MONGOOSE

• 🔥 [TIL] 211124 ==> 가짜 데이터베이스(home, watch, edit, upload) / 상대 경로 vs 절대 경로 / GET Method vs POST Method / req.params / req.body

✨ 내일 할 것

1. 복습 계속하기 - mongoDB & mongoose