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.1 API Registering a View part.2 😎이번 시간에 할 것 지난 시간에 백엔드에서 작성한 URL에 접근하기 위해 프론트엔드를 작성할 것이다. assets > js > videoPlayer.js로 가서 코드 작성하기 우리가 비동기 통신으로 처리해줘야 할 기능이 조회수 기능과 덧글 기능이 있는데, 일단 지금 하는 조회수 기능은 fetch로 할 것이고 덧글기능을 위해서는 axios를 사용할 것이다. 동영상이 있는 페이지에서 console로 fetch("http://localhost:4000/api/60531411f3ca0d4f485c23ea/view")라고 치면 pending 상태의 promise가 뜬다. 이처럼 fetch는 promise를 반환한다. const registerView..

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..

9.1 Recording Video part.1 우선 start recording을 눌렀으면 버튼의 innerHTML이 "Stop recording"으로 바뀌게 코드를 넣는다. 그리고 finally부분을 추가하여 removeEventListener 구문을 이곳으로 옮긴다 try나 catch 부분 둘 중 하나가 실행된 후 finally구문이 실행된다. 아직 여기까지 한 것은 진짜 녹화를 한 것이 아니라 그냥 프리뷰만 보이게 한 것이니까 함수 이름을 바꾼다. (startRecording => getVideo) const recordContainer = document.getElementById("jsRecordContainer"); const recordBtn = document.getElementById(..

9.0 Getting User Media 비디오를 업로드할 때 비디오 레코드도 가능하게 하는 것을 해볼 것이다. 🍰 views 고치고 scss 만들기 우선 그걸 위해 views를 좀 고치겠다. extends layouts/main block content .form-container .record-container#jsRecordContainer video#jsVideoPreview button#jsRecordBtn Start Recording form(action=`/videos${routes.upload}`, method="post", enctype="multipart/form-data") div.fileUpload label(for="file") Video File input(type="file",..