분류 전체보기
-
flashProject using node.js/Cloning Youtube 2020. 9. 7. 08:37
설치 #npm i express-flash app.js flash를 사용하는 방법은 간단하다. app.js 에서 middleware로 app.use(flash())를 사용한다. userController.js 그리고 각각의 controller part에서 req.flash('message type', 'message text')를 사용해서 flash message를 전송한다. message type은 info, warn, error, success 등이 있다. 그리고 항상 req.flash()가 res.redirect()나 res.render()보다 위에 와야 한다. 그렇지 않다면 이미 rendering을 끝난 상태에서 message를 전송하기 때문에 Front-end에서 message를 받을 수가 없다..
-
SCSS-commentsProject using node.js/Cloning Youtube 2020. 9. 6. 14:50
partials/comments.scss .video__comments { padding: 20px 0; flex .comments__cnt { margin-bottom: 20px; } .comments__add { display: flex; align-items: center; margin: 20px 0; .comments__form { margin-left: 15px; width: 100%; max-height: 600px; textarea { resize: none; border: none; outline: none; width: 100%; max-height: 600px; font-size: 16px; transition: border-bottom 1s ease-in-out; margin-bott..
-
AJAX - API of deleting commentsProject using node.js/Cloning Youtube 2020. 9. 6. 14:44
videoDetail.pug addComment.js Delete 버튼을 누르면 handleDeleteComment가 실행된다. e.preventDefault()로 submit의 새로고침을 차단하고 axios를 통해서 server에 어떤 comment를 삭제해야 하는지 알려준다. 그리고 Comment count를 내리고 element도 삭제한다. routes.js AJAX는 다른 페이지를 접속하지 않고 데이터를 로드하는 방식이기 때문에, 일단 실제 페이지를 생성하긴 해야 한다. apiRouter.js apiController.js Front-end가 보낸 id값으로 comment를 찾고 삭제한다. comment.creator와 comment를 삭제하려는 user가 동일인물이 아닐 경우 error를 발생한..
-
AJAX - API of adding commentsProject using node.js/Cloning Youtube 2020. 9. 6. 09:34
videoDetail.pug videoDetail.pug에 comment 관련 코드를 추가했다. videoController.js Comment를 추가하여 새롭게 수정된 videoDetail()이다. 먼저 comment를 다는 대상이 로그인이 되어있는지 부터 확인한다. 로그인이 되어있다면 logged user의 avatarUrl을 가져오고 그렇지 않다면 다른 avatarUrl을 가져온다. 또 comment를 다는 대상이 누구인지도 지정해줘야 하기 때문에 req.user를 통해서 user를 가져온다. video에서는 creator와 comments 그리고 comments를 단 creator의 객체도 필요해서 nested populate를 사용했다. 다른 데이터와는 다르게 JSONUser라는 것이 있다. u..
-
AJAX - API of increasing viewsProject using node.js/Cloning Youtube 2020. 9. 6. 09:15
소개 나는 웹페이지의 이동 없이 video 시청이 끝나면 view를 1증가시키고 싶다. 그러기 위해서 사용하는 것이 AJAX다. AJAX는 웹 페이지에서 서버로부터 동적으로 데이터를 주고 받을 수 있다. 그래서 다른 웹 페이지에 가거나 새로고침을 하지 않아도 그 웹페이지의 데이터를 로드할 수가 있다. JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다.\ AJAX는 SPA(Single Page Application)의 기본 토대가 된다. SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹 사이트를 말한다. routes.js AJAX는 다른 페이지를 접..
-
JavaScript video recordingProject using node.js/Cloning Youtube 2020. 9. 5. 11:37
videoRecorder.js 소스 코드 분석 recordBtn을 누르면 getVideo가 실행이 된다. getVideo()는 navigator.mediaDevices.getUserMedia()는 새로운 MediaStream을 요청한다. 이 stream이 우리가 recording 하는 것이다. videoPreview는 녹화되는 display 화면이다. videoPreview.play()로 현재 녹화되고 있는 영상을 실시간으로 확인할 수 있다. navigator.mediaDevices.getUserMedia()로 얻은 stream을 startRecording으로 보낸다. input stream을 다루는 MediaRecorder를 생성한다. 그리고 recorder.start()로 녹화를 시작한다. dataa..
-
JavaScript key down button for progress bar on videoProject using node.js/Cloning Youtube 2020. 9. 5. 10:02
videoPlayer.js video의 되감기와 앞으로 가기는 화살표 좌우 방향으로 했다. 각각의 key code 값은 37과 39이다. 또한 뒤로 가기를 눌렀을 때 video의 시간이 (-)minus가 되지 않도록 하고 앞으로 갔을 때 video의 총 시간을 초과하지 않도록 조건을 준다. 뒤로 가기와 앞으로 가기의 시간은 10s다. video의 실제 시간을 변경하고 동시에 progressBar에도 변화를 준다. 소스 코드 github.com/zpskek/wetube-v3/commit/c05747baf64a1cbf36c1045820f9c4f3b0cf41bd
-
JavaScript video progress barProject using node.js/Cloning Youtube 2020. 9. 5. 09:43
videoPlayer.js DOM 객체 Progress Boolean constant init() video prgress Bar는 두 가지로 나뉜다. 하나는 controller part이고 다른 하나는 사용자가 마우스를 click하거나 drag했을 때 발생하는 boolean 값이다. 하나씩 설명하자면 위 코드는 video가 실행되면서 currentTime이 바뀔것이다. 즉, timeupdate가 될 것이고 그 때마다 handleProgress를 실행시키는 것이다. handlePorgress() 함수를 보면 currentTime을 총 시간으로 나누고 백분율 100을 곱한다. 그리고 그 값을 scss에서 정의한 flex-basis의 style 값을 변경하는데 사용한다. 그렇게 되면 시간이 지남에 따라 빨간..