📝 오늘 한 것

1. video & videoControls - CSS 스타일링 및 정렬

2. keydown 이벤트

3. API - apiRouter / sendStatus / fetch API / data attribute

📚 배운 것

1. video player

CSS 스타일링 및 정렬 + video player 마무리
막혔다가 해결한 부분들 혹은 다시 보고 싶은 부분들 정리

1) video 중앙 정렬

video는 inline 레벨 요소이다.

여태까지 block 레벨 요소로 알고 있었던 거 실화인가. 한국어로 구글링하면 포스팅마다 video가 block 레벨 요소라고 설명되어 있다. MDN에서 확인해보니 inline 레벨 요소라고 적혀 있었다.

video {
  display: block;
  margin: 0 auto;
}

2) 큰따옴표 / 작은따옴표

큰따옴표 안에는 작은따옴표를 써야 한다. 잊지 말자.

3) videoControls opacity

'showing' class가 있을 때만 비디오 컨트롤러가 보이도록 해야 한다.
그러나, 아래처럼 작성하면 비디오 컨트롤러는 어떻게 해도 보이지 않는다.

#videoControls {
  opacity: 0;
}

.showing {
  opacity: 1;
}

이렇게 작성해야 한다.

#videoControls {
  opacity: 0;
  &.showing {
    opacity: 1;
  }
}

4) video-player.scss

watch.pug 파일과 videoPlayer.js 파일에서 버튼 안의 텍스트들을 font-awesome 아이콘으로 바꿨다.
videoContainer(video & videoControls)를 스타일링하고 정렬했다.

#videoContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

video {
  width: 100%;
  max-height: 800px; // 세로가 긴 동영상을 위해 추가함
}

#videoControls {
  opacity: 0;
  &.showing {
    opacity: 1;
  }
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 98%;
  padding-bottom: 1%;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
  background-color: transparent;
  button {
    all: unset;
    cursor: pointer;
  }
  #volume {
    width: 10%;
    &:focus {
      outline: none;
    }
  }
  #timeline {
    width: 65%;
    &:focus {
      outline: none;
    }
  }
}

5) click & keydown

💡 키보드 키를 누르면 keydown → keypress → keyup의 순서대로 이벤트가 발생한다.

이때 keydown 이벤트는 키보드의 모든 키를 눌렀을 때 발생하는 반면, keypress 이벤트는 출력할 수 있는 키보드를 눌렀을 때만 발생한다.(화살표 등을 눌렀을 때는 keypress 이벤트 발생x)

(1) 재생 / 일시정지

playBtn과 video를 클릭하거나 Space 바를 누르면, video가 재생 또는 일시정지되도록 수정했다.
space 바를 누를 때마다 스크롤이 내려가는 것(브라우저의 기본 동작)을 막기 위해 event.preventDefault()를 사용했다.

const handlePlayOrPause = () => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
  playBtn.innerHTML = video.paused
    ? "<i class='fas fa-play'></i>"
    : "<i class='fas fa-pause'></i>";
};

const handleKeyPress = (event) => {
  if (event.code === "Space") {
    handlePlayOrPause();
    event.preventDefault()
  }
};

playBtn.addEventListener("click", handlePlayOrPause);
video.addEventListener("click", handlePlayOrPause);
window.addEventListener("keypress", handleKeyPress);

(2) 현재 재생 시간 변경

ArrowLeft와 ArrowRight를 누르면 동영상 현재 재생 위치를 이동할 수 있도록 수정했다.
handleKeyPress 함수를 swith 구문과 event.key를 이용해 작성했다.

const handleKeyPress = (event) => {
  const { key } = event;
  const { currentTime } = video;
  switch (key) {
    case " ":
      handlePlayOrPause();
      event.preventDefault();
      break;
    case "ArrowLeft":
      video.currentTime = currentTime - 1;
      break;
    case "ArrowRight":
      video.currentTime = currentTime + 1;
  }
};

window.addEventListener("keydown", handleKeyPress);

(3) 전체 화면 전환

전체 화면 버튼을 클릭했을 때뿐 아니라 Enter 키를 눌러도 전체 화면으로 전환할 수 있도록 수정했다.

const handleFullscreen = () => {
  const fullscreen = document.fullscreenElement;
  if (fullscreen) {
    document.exitFullscreen();
    fullScreenBtn.innerHTML = "<i class='fas fa-expand'></i>";
  } else {
    videoContainer.requestFullscreen();
    fullScreenBtn.innerHTML = "<i class='fas fa-compress'></i>";
  }
};

const handleKeyPress = (event) => {
  const { key } = event;
  const { currentTime } = video;
  switch (key) {
    case " ":
      handlePlayOrPause();
      event.preventDefault();
      break;
    case "ArrowLeft":
      video.currentTime = currentTime - 1;
      break;
    case "ArrowRight":
      video.currentTime = currentTime + 1;
      break;
    case "Enter":
      handleFullscreen();
      break;
  }
};

fullScreenBtn.addEventListener("click", handleFullscreen);
window.addEventListener("keydown", handleKeyPress);

2. API

앞서 백엔드를 다룰 때 pug를 사용해서 NodeJS로 템플릿(views)을 렌더링하는 SSR 방식을 사용했다.
SSR(Server Side Rendering)이란 서버가 템플릿을 렌더링하는 일까지 하는 것을 의미한다.

그러나, 백엔드에서 템플릿을 렌더링하지 않고 요즘은 API를 이용한다.
API란 백엔드가 템플릿을 렌더링하지 않을 때 프론트엔드와 백엔드가 서버를 통해 통신하는 방법을 말한다.

user가 video 시청을 한번 완료할 때마다, 조회수가 업데이트되도록 API를 이용해 구현해보려고 한다.

1) apiRouter

apiRouter.js 파일을 만든 후 apiRouter를 만들어 export default 한다.
server.js 파일에서 apiRouter를 import 한 후 이를 사용할 수 있도록 추가한다.

// apiRouter.js
import express from "express";

const apiRouter = express.Router();

export default apiRouter;

// server.js
import apiRouter from "./routers/apiRouter";

app.use("/api", apiRouter);

apiRouter.js 파일에서 route를 추가한다.
user가 video를 시청하기 시작하면 백엔드에 post 요청을 보내도록 한다.

// apiRouter.js
import { registerView } from "../controllers/videoController";

apiRouter.post("/videos/:id([0-9a-f]{24})/view", registerView);

2) registerView 컨트롤러

registerView 컨트롤러를 작성한다.
req.params.id를 이용해 DB에서 video를 찾은 후 video.meta.views를 업데이트한다.

이때 url을 바꿔 페이지를 이동하지는 않을 것이다. (즉, 템플릿을 렌더링하지 않을 것이다.)
그러나 템플릿은 렌더링하지 않아도 서버가 요청에 대한 응답은 해야 하므로 render 대신 sendStatus를 이용해 status code를 보내도록 한다.

💡 status는 render 전에 상태 코드를 지정해줄 뿐이지만, sendStatus는 지정한 상태 코드를 보냄으로써 연결을 끝내버린다.

// videoController.js
export const registerView = async (req, res) => {
  const { id } = req.params;
  const video = await Video.findById(id);
  if (!video) {
    return res.sendStatus(404);
  }
  video.meta.views = video.meta.views + 1;
  await video.save();
  return res.sendStatus(200);
};

💡 상태 코드

상태 코드는 기능이 제대로 처리되었는지를 알려준다.

조회수를 업데이트할 때는 상태 코드를 지정해주긴 하지만 이를 굳이 이용하지는 않을 것이다. 사용자에게 '조회수가 올라가지 않았습니다.'라고 알려줄 필요는 없기 때문이다.

그러나, 뒤에서 댓글을 다룰 때는 상태 코드를 이용할 것이다. 사용자에게 '댓글 작성에 실패했습니다.'라고 알려주거나 추가된 댓글을 볼 수 있도록 만들어줘야 하기 때문이다.

3) 프론트엔드에서 페이지 이동 없이 url 호출

(1) fetch API

위에서 조회수를 업데이트하는 코드를 작성했다.
이제 user가 video 시청을 한번 완료할 때마다 프론트엔드에서 위에서 작성한 url을 호출하도록 해야 한다.

앞서 백엔드를 다룰 때는 브라우저가 서버에 요청을 하여 url이 바뀌면(페이지가 이동되면) 서버가 응답을 하는 방식이었다.
이번에는 프론트엔드에서 페이지 이동 없이 url을 호출해볼 것이다.
이를 통해 url이 바뀌지 않아도 페이지에 변화가 일어나는 interactive website를 만들 수 있다.

// videoPlayer.js
const handleVideoEnded = () => {
  // 중략

  // fetch("/api/videos/video의 id/view");
};

video.addEventListener("ended", handleVideoEnded); 

먼저, 비디오가 끝나는 것을 감지하는 ended 이벤트를 등록한 후 이벤트 리스너에서 fetch()를 이용해 앞에서 만든 route에 요청을 보내도록 하려고 한다.
그런데 api로 요청을 보내기 위해서는 videoPlayer.js에서 video.id의 값을 가져올 수 있어야 한다.

(2) 프론트엔드와 백엔드에서 데이터 공유하는 법

이를 위해 data 속성을 이용해 직접 커스텀 데이터를 만들어 HTML element에 저장하려고 한다.
프론트엔드에서 자바스크립트가 알 수 있도록 pug 파일에 video.id의 값을 남길 수 있다.

//- watch.pug

// 중략
video(src="/" + video.fileUrl, data-id=video._id)

pug 파일에서 data-를 이용해 커스텀 데이터를 저장한다.

// videoPlayer.js
const handleVideoEnded = () => {
  // 중략
  
  const { id } = video.dataset;
  fetch(`/api/videos/${id}/view`, {
    method: "POST",
  })
};

video.addEventListener("ended", handleVideoEnded);

프론트엔드에서 element.dataset을 이용해 저장한 데이터를 가져온다.
fetch()는 기본적으로 GET Request를 보내게 되므로 이를 POST Request로 바꿔야 한다.

이제 아무것도 클릭하지 않고 url을 바꾸지 않아도 지정한 이벤트가 발생하기만 하면 프론트엔드에서 자바스크립트가 알아서 백엔드에 요청을 보낸다.

✨ 내일 할 것

1. video recorder