Project using node.js
-
Multer - s3Project using node.js/Cloning Youtube 2020. 9. 7. 10:33
AWS 세팅은 끝났다. 이제는 multer를 multerS3로 바꿔서 user가 파일을 업로드 할 때 aws로 업로드될 수 있도록 수정하면 된다. 설치 #npm install aws-sdk multer-s3 middlewares.js new aws.S3()에 IAM을 통해서 얻은 AWS key 값들을 넣고 s3 를 생성한다. multerS3는 s3가 필요하다. userController.js profile을 edit할 때 avatar를 전송받는다. 이 때, multer는 file.path로 받았다. 하지만 multer-s3는 file.location으로 받는다. 그러므로 다른 controller에서도 file.path를 모두 file.location으로 바꿔야 한다. videoDetail.pug vide..
-
AWS - S3 & IAMProject using node.js/Cloning Youtube 2020. 9. 7. 09:39
소개 S3는 AWS의 파일을 업로드할 수 있는 시스템이다. 구글 클라우드 같은 것이라고 생각하면 된다. 우리는 여태까지 video와 avatar를 local에 저장하고 그에 대한 url을 mongoDB에 저장했다. 이제는 이러한 파일들을 local이 아닌 외부 storage인 AWS-S3에 저장할 것이다. 먼저 AWS 홈페이지를 방문해서 가입을 하자. AWS-S3 상단에 있는 navigation에서 서비스->S3를 클릭한다. 나는 예전에 미리 생성해 둔 bucket이 2개가 있다. 우리가 할 것은 +버킷 만들기다. 새로운 bucket을 생성하자. 여기서 bucket이란 파일을 업로드할 공간을 뜻한다. 우리는 새로 생성한 bucket에 video와 avatar를 저장할 것이다. 버킷 이름(이름은 하고 싶은..
-
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..