data-* & dataset

문제 발생

동영상을 끝까지 시청했으면 조회수가 증가하는 api를 구현하고 싶었다. 그러기 위해서는 videoPlayer.js에 동영상의 id를 전달해야 했다.

해결

data-*

data 속성은 HTML 요소에 추가적으로 데이터를 저장할 수 있게 해준다.

// pug

div.video-watch__screen(data-id=video.id)

위와 같이 'data-' 뒤에 변수명을 넣어주고 데이터를 넣어주면 된다.

dataset

data-*를 읽기 위해서는 dataset을 이용해야 한다.

const handleVideo = () => {
  playBtn.className = "fas fa-undo-alt";

  const {
    dataset: { id },
  } = videoContainer;

  fetch(`/api/videos/${id}/views`, {
    method: "POST",
  });
};

✔ dataset의 출력값

DOMStringMap
id: "610bbb9822a61f2cac5adff5"
[[Prototype]]: DOMStringMap

id가 출력된 것을 확인할 수 있다.

Reference

data-*
data-*