Enjoy Programming

코멘트 작업을 해주는데 프론트 엔드 작업을 하기전에 백엔드 부터 해본다. root를 설정해주러 routes.js에서 api part에 url 설정을 해주고 videoController에서 postAddComment컨트롤러를 만들고 (videoDeail컨트롤러에서 populate를 이용해 creator와 comments를 가져온다) video, user를 이용해 comment를 만들고 넣어준다. 그리고 apiRouter에서 post방식으로 라우터 하나 만들어준다. 이제 템플릿에가서 코멘트 폼을 만들고 코멘트 리스트를 만들자. 그리고 이번에는 ajax를 통해 서버로 코멘트 정보를 보내고 받아오겠다. 프론트에서 작동할 addComment.js하나 만들고 submit 이벤트 핸들러를 하나만들어서 submit 이..

Asynchronouse Javascript and XML 비동기자바스크립트, xml통신 조회수 작업을 한다. ajax 작업을 하기 전에 새로운 파일을 웹사이트에 추가하는데 API view이다. 템플릿이 랜더링한 /video url과 /idXXXX의 유알엘 두개가 보인다. 랜더링과 상관없는 URL과 controller를 만들건데 http status code로 답해주는 것들이다. 사용자는 이url을 찾을 수 없고, 이 url에 어떤것도 랜더링 할 수 없다. routes 설정해주고 app.js에서 라우트 사용해준다. 그리고 router를 설정해주기 위해 router파일을 만들어서 라우터 설정해주고 적용될 컨트롤러를 videoController에 만들어준다. 컨트롤러는 post방식의 컨트롤러이고 기본적으로 ..

1. recording video create videoRecorder.scss, videoRecorder.js && upload.pug modify mediadevice mdn https://developer.mozilla.org/ko/docs/Web/API/MediaDevices MediaDevices - Web API | MDN MediaDevices 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스입니다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어 developer.mozilla.org getVideo 함수를 만들어서 웹캠애 접근까지 함. navigator.mediaDevices.getUserMedia()를 이용. 웹캠을 ..

1. videoPlayer.pug 만들어주고 scss작성 기존 video__player는 삭제 2. javascript 작성 videoPlayer.js play & pause function - 고유의 아디를 만들어주고 ~ videoContainer가 있을때만 작동하도록 해야 오류 안남. 그리고 이벤트 리스너를 통해 video play & pause 함수를 만들어 준다. https://developer.mozilla.org/ko/docs/Web/API/HTMLMediaElement HTMLMediaElement - Web API | MDN HTMLMediaElement는 오디오와 비디오에 통용되는 미디어 관련 확장성을 제공하기 위해 HTMLElement에 메소드와 프로퍼티를 추가한 인터페이스입니다. de..

앞서 만든 video edit은 로그인한 유저와 비디오 작성자 정보가 다르면 수정이 안되는 거였지만 문제는 routes활용해 url 마지막에 /edit을 써주면 수정페이지로 이동하게 된다. 이를 수정해보자~ get edit컨트롤러에서 video 객체를 받아와 조건문을 달아주자 video를 작성한 사람이 현재 로그인한 유저가 아니면 에럴를 발생시키고 아니면 수정페이지를 띄우게 한다. 한가지 주의 할 점은 video.creator는 타입이 object타입이고 req.user.id는 string 타입이다. 둘의 타입을 같게 해줘야 조건문이 성립하기에 video.creator를 toString()을 이용해 변환해주자. 그럼 성공적이다~!~! 이와 같이 delete 컨트롤러도 수정해주자 몇가지 수정을 더 해야하지..

이제 할 일은 업로드된 비디오에 작성자를 연결해주고 작성자가 로그인 되었다면 edit을 할수 있게한다 그리고 다른 유저라면 그냥 수정할 수 없게 하겠다 먼저 각 모델에 스키마를 추가한다. 비디오에는 유저의 정보를 그리고 유저에는 비디오와 코멘트 정보, 코멘트에는 유저의 정보를 넣어주자 그리고 비디오 컨트롤러에서 post업로드 컨트롤러를 수정해주자 새로 만들어진 비디오의 스키마 creator를 req.user.id를 추가해주고 (유저가 로그인 되어있다면 항상 req에는 user가 있다) videos에 neVideo.id를 넣어준다. 그리고 저장. 그리고 상세정보 컨트롤러를 살짝 수정해준다. populate함수를 통해 객체를 가져오도록 하는데 이 함수는 Object ID타입에만 쓸수있다 마지막으로 video..