[Netflix] 추천 영상, 예고편 슬라이드 적용 및 디자인 변경

결과

추천 영상, 예고편 슬라이드(Splide 사용) 기능을 적용하였다.

각 페이지 [ Tv / 영화 / 검색 ] 배치와 디자인을 수정하였다.

 

[ TV / 영화 페이지 ]

[ 검색 창 ]

[ 예고편 ]

[ 추천 영상 ]

---

슬라이더(Slider)

Splide( $ npm install @splidejs/react-splide )를 활용하여 구현했다.

슬라이드 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리이다.

 

---

계획

검색 화면의 결과를 TV와 영화로 분리한 뒤, infinite Scroll을 통해 결과를 계속 불러올 예정이다.

예고편(Youtube) 영상에 전체화면 기능이 안되는 것을 해결할 예정이다.

점차적으로 반응형 페이지로 변경할 예정이다.

---

느낀 점

배치와 스타일을 싹 변경하는데 많은 노가다를 하였고, 여전히 하고 있다.

계획하는 단계가 정말 정말 중요하다는것을 고생하며 느끼고 있다고 생각한다. 

슬라이더의 경우 라이브러리를 사용하여 만들었는데, 여전히 라이브러리 사용에는 반감이 든다.

라이브러리 사용이 싫은것 보다는 공부하는 입장에서 나에게 이로운가? 를 계속 질문하게 된다. 

나중에 슬라이드 기능만 따로 만들어 볼 계획이다.

---

코드

https://github.com/ssc9811/scflix-hook

GitHub - ssc9811/scflix-hook: TMDB API를 활용하여 Netflix를 클론한 나만의 Scflix

---

참고 자료

https://splidejs.com/integration-react-splide/

React Splide – Splide