넷플릭스 클론코딩

리액트 복습도 할 겸 포트폴리오를 만들기 위해 영화 OTT 서비스인 넷플릭스를 클론코딩 해보려고 한다. 영화의 API는 The Movie Database(이하 'TMDB')라는 영화 정보 사이트의 API를 사용하기로 했다.

클론코딩을 위한 프로젝트 생성, npm 모듈 설치, 프로젝트를 완성하기 위해 할 일들을 리스트업 해 보았다.

페이지를 전환하며 보여주기 위해서는 라우터를 적용하여야 한다. 전에 설치한 react-router-dom 모듈의 `BrowserRouter`, `Routes`, `Route`를 적용시켜 준다.

전역적인 상태관리를 하기 위해 리덕스를 세팅해보자.

일단 간단하게부트스트랩으로 만들어 놓고 나중에 Scss로 기깔나게 스타일링을 하려고 한다. 검색창이 있는 네비바 코드를 가져와 수정을 거쳐 네비바를 만들어보았다.

앞에서 만든 리덕스를 적용하기 위해 리듀서를 만들어보자.

useEffect는 렌더링 이후에 실행되기 때문에 에러가 나게 된다. 따라서 데이터가 있다면 렌더링을 시켜주는 조건부 렌더링을 실시해야 한다.

홈페이지에서 API로 받아온 영화 정보로 배너를 만들어보자.

배너 밑의 영화리스트들을 슬라이더로 만들어보자. 그리고 API로 영화정보를 받아와서 배너와 슬라이드에 적용될 때 까지 로딩 스피너를 보여주도록 하자.

슬라이드를 만들었으면 슬라이드 안에 영화의 정보를 담은 카드를 만들어 담아 보자. react multi carousel의 기본 코드를 작성하고 props로 받아온 영화들을 MovieCard라는 컴포넌트를 만들어 map으로 리스트했다.