영상 시간 안뜨는 버그 해결하기(Blob Duration Bug) 나도 전체 영상 시간이 NaN NaN NaN으로 나오는 영상이 있었는데, 니콜라스도 그 버그를 고치는 것을 알려줘서 다행이었다. Blob이 영상 전체 시간을 가지고 있지 않아서 그렇게 나온 것이라고 한다. https://github.com/evictor/get-blob-duration 여기 get-blob-duration 이라는 라이브러리가 있다. 내가 하고 싶은 걸 해주는 녀석이다. 이게 무엇을 말하는 거냐면 Blob의 길이(duration)를 알려주는 것이다. get-blob-duration 설치하기 npm install get-blob-duration videoPlayer.js에 가서 수정하기 import getBlobDuration..

10.4 API Adding a Comment part.3 🍒이번시간에 할 것 댓글 추가를 페이크(fake)로 할 것이다. 무슨 말이냐면, 누군가 댓글을 달면 덧글 수가 하나 추가된 거처럼 보이고, 방금 작성한 덧글이 보이도록 할 것이다. (그러니까 지금 현재 덧글을 작성하면 새로고침을 해야 반영이 되니까 새로고침하지 않고도 바로 반영이 된 것처럼 보이고 싶어서 그러는 것이다 → 리얼타임처럼 보이고 싶어서 페이크를 하는 것) 🍒 axios의 status code를 listen할 거고 status code가 200이면 그때 댓글이 추가됐다는 거니까 즉 댓글을 페이크로 달 것이다. addComment 함수 만들기(addComment.js) const addComment = (comment) => { cons..

10.3 API Adding a Comment part.2 🍓이번시간에 할 것 덧글(Comment) 기능의 프론트엔드부분을 구현할 것이다. comment를 하나 만들어보자 이번에는 Ajax로 보내보자 videoDetail.pug에서 id 추가하기 .video__comments if video.comments.length === 1 span.video__comment-number 1 comment else span.video__comment-number #{video.comments.length} comments form.add__comment#jsAddComment input(type="text", placeholder="Add a comment", name="comment") ul.video__comm..

10.2 API Adding a Comment part.1 🍎이번시간에 할 것 덧글(Comment) 기능을 구현하기 위해 html과 css는 이미 해놓은 상태이고, 프론트엔드부분을 하기 전에 먼저 백엔드부분을 구현해볼 것이다. Comment를 위한 api 루트 만들기 routes.js에서 루트를 만들어보자. view를 만들었던 것처럼 하면 된다. const ADD_COMMENT = "/:id/comment"; addComment: ADD_COMMENT //이 부분은 당연히 const routes에 추가 ↑ routes.js videoController.js에서 postAddComment함수 만들기 //Add Comment export const postAddComment = async(req,res) =..

10.0 API Registering a View part.1 💩이번 시간에는 조회수 기능을 구현할 것이다. 조회수 기능을 위해서 Ajax라는 것을 사용할 것이다. Ajax란? Asynchronouse Javascript and XML , 비동기 JS, XML 통신이다. 예를 들면 이 video가 끝나면 JavaScript에 전달해서 서버 URL로 가도록 하고 그 URL은 이 비디오가 시청됐다고 등록하는 것이다. 이 기능은 그 URL에 어떤 템플릿이 필요한 것이 아니다. 즉, 화면을 렌더링하지 않고 서버와 통신하는 것이다. 이런 것이 흔히 말하는 Single Page Application의 기본이 된다. 우리가 잘 아는 넷플릭스와 유튜브도 이러한 방식으로 동작한다. 예를 들어, 유튜브를 보면 내가 홈에서..

9.2 Recording Video part.2 지난시간에 데이터를 어떤 이유인지 얻어올 수 없었다. 그런데 알고보니 데이터는 레코딩이 다 끝나야 얻을 수 있다고 한다. 현재 start recording을 누르면 데이터는 recording 되는데, 아직 접근할 수 없다. 왜냐하면 디폴트로 MediaRecorder는 한번에 모든걸 저장하게 되어있기 때문이다. 그래서 dataavailable는 레코딩이 멈췄을 때 호출이 일어난다. 레코딩이 끝났을 때 전체 파일을 얻을 수 있다는 말이다. 🎁stopRecording 함수 만들기 const recordContainer = document.getElementById("jsRecordContainer"); const recordBtn = document.getEle..