꾸매코딩

결과 [ 홈 / TV / 영화 / 검색 ] 페이지를 반응형으로 변경하였다. gh-pages를 활용하여 웹 사이트를 배포하였다. 계획 9월 26일까지 모든 페이지를 반응형으로 변경할 예정이다. gh-pages를 사용해본 경험이 있어서 우선 gh-pages로 비교하면서 진행하고 최종적으로 netlify를 사용하여 배포할 예정이다. 느낀 점 아직 세부 페이지는 변경하지 못하였는데 모니터로 보이는 화면은 괜찮아 보였는데, 스마트폰 화면으로 보니까 배치도 망가지고 글자도 겹치는 문제가 발생하였다. 미디어 쿼리와 css를 변경해가며 페이지를 수정하였다. '처음엔 막막하게 어떻게 변경하지?'라는 생각을 가지고 있었는데 역시 하면 된다는 걸 느꼈다. 페이지를 반응형으로 변경하는 과정이 계속 비교하면서 노가다하는 것이 ..

결과 검색 화면의 결과를 TV와 영화로 분리하였다. 검색 화면 결과를 infinite Scroll을 통해 결과를 계속 불러온다. iframe을 사용해서 불러온 유튜브 영상을 전체 화면이 가능하도록 변경해주었다. [ 예고편 영상 ] [ 검색 창 ] iframe 유튜브 영상 전체 화면 적용 유튜브 영상에서 공유 -> 퍼가기를 하면 코드로 복사가 가능하다. 하지만, 전체 화면으로 볼 수 없어서 검색해보았더니 allowfullscreen = 'true'가 아닌 allow='fullscreen'을 적용해주었더니 해결되었다.

결과 추천 영상, 예고편 슬라이드(Splide 사용) 기능을 적용하였다. 각 페이지 [ Tv / 영화 / 검색 ] 배치와 디자인을 수정하였다. [ TV / 영화 페이지 ] [ 검색 창 ] [ 예고편 ] [ 추천 영상 ] 슬라이더(Slider) Splide( $ npm install @splidejs/react-splide )를 활용하여 구현했다. 슬라이드 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 계획 검색 화면의 결과를 TV와 영화로 분리한 뒤, infinite Scroll을 통해 결과를 계속 불러올 예정이다. 예고편(Youtube) 영상에 전체화면 기능이 안되는 것을 해결할 예정이다. 점차적으로 반응형 페이지로 변경할 예정이다. 느낀 점 배치와 스타일을 싹 변경하는데 많은 노가다를 하였고..

결과 Infinite Scroll 기능을 구현하였다. Api 데이터에서 해당 [ Tv / 영화 ]와 관련된 추천 영상을 불러와서 출력해주었다. Infinite Scroll Tv / 영화 두 곳에서 필요로 하기 때문에 기능이 중복된다. 따라서 Custom Hook으로 따로 분리해주었다. page값이 url 마지막에 붙어(...&language=en-US&page=1) 있어서 params : { page : page }로 전달해주었다. lodash uniqBy()로 id 값을 비교해서 중복을 방지해주었다. [ useInfiniteScroll.js ] import { useEffect, useState } from 'react'; const useInfiniteScroll = () => { const [pag..