동영상을 끝까지 시청했으면 조회수가 증가하는 api를 구현하고 싶었다. 그러기 위해서는 videoPlayer.js에 동영상의 id를 전달해야 했다.
data 속성은 HTML 요소에 추가적으로 데이터를 저장할 수 있게 해준다.
// pug
div.video-watch__screen(data-id=video.id)
위와 같이 'data-' 뒤에 변수명을 넣어주고 데이터를 넣어주면 된다.
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가 출력된 것을 확인할 수 있다.