코딩연습장

디테일페이지는 위와 같이 출연진과 비슷한 영화목록을 보여주는 박스들이 있다.이 박스들은 가로로 정렬되어있으며, 대부분이 기본 width값을 넘기 때문에 가로 스크롤이 생기도록 설정하였다.하지만 마우스를 갖다대고 휠을 아무리 내려도 우측의 기본 스크롤이 움직였다.물론 사용자가 직접 스크롤을 클릭하고 움직여도 되겠지만, 조금 더 편하게 만들기 위해 이벤트를 설정해주었다. export function addWheelEvents(id) { const $id = document.getElementById(`${id}`); function wheelEvent(e) { e.preventDefault(); $id.scrollTo({ left: $id.scrollLeft + e.del..

오늘은 디테일 페이지 반응형 작업을 진행하였다.@media를 사용하여 화면 너비에 따른 반응형 작업을 할 예정이었다.width값을 의도적으로 줄이며 작아져야 할 부분을 체크하여 진행하였다.하지만 역시나 문제가 발생했다. const backgroundImage = document.createElement("img");backgroundImage.className = "backgroundPoster";backgroundImage.src = `https://image.tmdb.org/t/p/w500${backdrop_path}`;$detailContainer.appendChild(backgroundImage);바로 배경에 깔아주는 포스터와 메인 박스에서 문제가 생긴 것이었다.문제는 메인박스에 적용되어있던 po..

웹 페이지에 영상플레이어를 넣으려면 video태그를 사용해야 하지만, 그렇게 하면 서버에 부담이 될 것이다.따라서 우리는 유튜브영상을 iframe을 이용하여 가져와 보자!원하는 영상의 공유버튼을 누르고, 모양을 누른다. 그러면 위처럼 iframe태그가 나오는데, 이를 복사해서 html에 넣으면 유튜브 비디오플레이어가 나오게 된다. 하지만 나는 원하는 영화의 예고편을 가져와야한다. 그리고 위의 src중 embed/뒷부분의 내용을 tmdb에서 지원해준다.따라서 저것만 넣어서 iframe을 만들고, 동적으로 붙여주는 작업만 하면 예고편 영상을 띄울 수 있는 것이다.디테일 페이지의 parameter에서 id값을 가져와 해당 id값을 tmdb 영상 관련 api에 요청을 한다.그러면 tmdb에서는 영화와 관련된 영..