코딩/Today I Learn

1/03 공부

코딩쪼렙 2022. 1. 3. 20:43
728x90

컨트롤러 구현하기

1.마우스위치에 따라 컨트롤러 보이기,숨기기

 

setTimeOut function 사용할 때 return값으로받는 id 이용하기!!

 

const handleMouseLeave = ( )=> {

 const id = setTimeout( ( ) =>{

  videoControls.classListremove("showing");

 },3000);

console.log(id);

clearTimeout(id);

}

 

 

전체코드

1.비디오에 마우스 움직임이 있으면 컨트롤러가보이고

2.비디오를 벗어나면 컨트롤러 안보이게 

3.비디오를 벗어나서 바로 마우스가 비디오에 들어오면 settimeout 때문에 remove.showing이 되어 컨트롤러 안보임

 -> clearTimeout

 

let controlsTimeout = null;
  const  handleMouseMove = ( )=>{
      if(controlsTimeout){
          clearTimeout(controlsTimeout);
          controlsTimeout = null;
      }
    videoControls.classList.add("showing");
  }

  const handleMouseLeave = ( )=> {
    controlsTimeout = setTimeout(( )=>{
        videoControls.classList.remove("showing");
    },3000);
  }
 
video.addEventListener("mousemove", handleMouseMove);
video.addEventListener("mouseleave", handleMouseLeave);

 

2.유저가 비디오에서 마우스를 멈췄는지 감지하기

let controlsMovementTimeout = null;
  const  handleMouseMove = ( )=>{
      if(controlsTimeout){
          clearTimeout(controlsTimeout);
          controlsTimeout = null;
      }

    if(controlsMovementTimeout){                   //오래된 timeout clear  마우스가 움직일 때만 삭제되는 기능 
        clearTimeout(controlsMovementTimeout);
        controlsMovementTimeout =null;
    }
    videoControls.classList.add("showing");
    controlsMovementTimeout = setTimeout(hideControls, 3000);      // setTimeout
  }

setTimeout(hideControls, 3000) 이후  마우스가 멈춰있으면 hanldeMouseMove를 다시 호출 하지 않기 때문에 

clearTimeout 되지 않는다. 

 

 

 

---

영상 조회수 기록하기 

 

영상을 시청할 때마다 백엔드에 요청을 보내고 영상 id에 해당되는 조회수 증가시키기 

템플릿을 렌더링하지 않는 views -->api views

요즘시대에 백엔드에서 템플릿을 렌더링하지 않아  

백엔드: 인증, db Nodejs

프론트엔드 reactJs, javascript

현재까지 공부한 방식 serversiderendering 서버가 템플릿 렌더링까지하고있는 방식 

 

텝플릿을 렌더링하는 view와 api view를 구분할 수있음 

 

api : 프론트엔드와 백엔드가 서버를 통해 통신하는 방법 

routers >  apiRoute.js 생성 백엔드가 템플릿을 렌더링하지 않을 때 프론트와 백엔드가 통신하는 방법 

 

유저가 영상을 시청하면 백엔드에 요청 보내지만 이요청으로는 url을 바꾸진 않을것 

렌더링 요청을 보내더라도 url을 바꾸지않고 템플릿 렌더링하지 않겠다는 뜻

자바스크립트로 요청을 보낼 것

 

이동없이 url호출 하는방법  Interactivity: Changing a page without changing the url

예) 강의에 댓글달아도 주소가 바뀌지않음 

pug는 interativity 하지않음 

클라이언트에서 자바스크립트로 

현재까지 코드 

https://github.com/nomadcoders/wetube-reloaded/commit/a31ec5b743a189db313743a42c3be3fe4573070f

 

11.0 Register View Controller · nomadcoders/wetube-reloaded@a31ec5b

Permalink This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Browse files 11.0 Register View Controller Loading branch information Showing 3 changed files with 21 additions and 0 deletions. +11

github.com

HTMLVideoElement의 부모인 HTMLMediaElement가 있다.우리가 사용할 이벤트는 미디어 재생이 끝났을 때 발생하는 이벤트 ended

ended event
audio 또는 video 미디어가 끝까지 재생 완료 된 시점에 발생합니다.
ended 이벤트는 미디어(오디오나 비디오)의 끝 부분에 도달했거나 더 이상 사용할 수 있는 데이터가 없어서 재생 또는 스트리밍이 중지되면 시작됩니다.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event

HTMLMediaElement
https://developer.mozilla.org/ko/docs/Web/API/HTMLMediaElement

 

이 템플릿을 렌더링하는 pug한테 비디오에대한 정보를 남기라고 말해줘야함

프론트엔드에서 자바스크립트가 알 수있도록 

직접데이터를 만들어서Html element에 남기기 -->data attributes 

원하는 어느 데이터든 만들 수있음

백엔드와 프론트엔드에서 데이터를 공유하는 가장 쉬운 방법

w자바스크립트로 데이터에 쉽게 접근 할 수있다.


Data Attributes
HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.
https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

 

 

자바스크립트 client 에 있는 videoplayer.js에서 해당 주소의 비디오 아이디를 알려고한다

pug는 back-end에서 컴파일 되니까 

pug에 data속성을 이용하여 비디오 아이디를 가져오자

pug

div#videoContainer(data-Id= video._id)  //data-무엇 이로든지 저장이가능하고

 

js

console.log(videoContainer.dataset); //dataset으로 확인이가능 

const {id} = videoContainer.dataset;

 

const handleEnded =()=>{
    const {id}= videoContainer.dataset;
    fetch(`api/videos/${id}/view`); /// 이렇게 fetch하면 GET요청을 보내는 것임 
우리가 필요한것은 post *apiRouter 참고 apiRouter.post("/videos/:id[0-9a-f]{24}/view",registerView)
}

 

const handleEnded =()=>{
    const {id}= videoContainer.dataset;
    fetch(`api/videos/${id}/view`,{
        method: "POST",
    });
}
video.addEventListener("ended", handleEnded);

 

Inspect - Network창을 보면 브라우저가 보내는 요청을 볼 수있음 view라는 요청이 생김 pending은 대기중 

 

 

res.status(404).render()은 OK

res.status(404)로는 연결이 끝이나지 않음 

res.sendStatus(404)

 

이벤트가 발생할 때까지기다리면 백엔ㄷ로 알아서 보내짐