stakbucks / netflix-clone

Netflix clone using ReactJs, typescript

#Netflix Clone

(실제 넷플릭스 웹사이트)

(클론 결과)

들어가며

넷플릭스 웹사이트를 클론해 보았다. 강의를 참고 했지만 사실 강의대로 전혀 진행하지 않았다. 내가 배운 것들을 토대로 직접 구현하다가 막히는 부분이 있거나 선생님은 이걸 어떤 방법으로 구현하셨을지에 대한 의문이 생길때 강의를 봤다. 이 방법이 효과가 정말 좋았던 것 같다. 내가 배운것들이 복습도 되지만 동시에 잘하는 사람이 어떤 사고와 흐름으로 코드를 작성해 나가는지, 나와 차의점이 무엇이고 내가 부족한 부분이 무엇인지 정확하게 캐치하게 된다. 2021년에 촬영된 강의를 들었는데 그 때의 넷플릭스 사이트와 지금의 넷플릭스 사이트가 약간 달라서 도움을 못받는 부분도 많았다.

개요

0. 목표:

react, typescript 연습. 처음부터 끝까지 포기하지 않고 완성하기.

1. 사용 기술

• ReactJs, typescript
• 라이브러리: styled-components, react-query, framer-motion, react-router-dom(v5)

2. 작업 기간

23'01.21~23'01.23

3. API

https://developers.themoviedb.org/3/getting-started/introduction

기능 및 구현

1. Navigation Bar + 라우팅

• 애니메이션

scrollY < 40 일때 background의 opacity 0 (linear-gradient 존재), 검색 버튼 누르면 검색창 등장, 계정 아이콘에 마우스 올리면 화살표 180도 회전

• 라우팅

넷플릭스 로고 또는 '홈' 누르면 Home 컴포넌트로, '시리즈' 누르면 Series 컴포넌트로 라우팅

• z-index 최고, fixed 상태

2. 메인 페이지 배너

• background를 가장 인기 있는 영화/시리즈의 포스터로 설정. linear-gradient로 아래로 갈 수록 어둡게 설정.

3. TOP 10 슬라이더

• 동작 구현 가장 시간 소요가 많이 된 부분이다. 일단 넷플릭스 사이트를 보면 top 10을 두 슬라이드에 걸춰서 노출시키는데, 신기한건 5개씩 2번 노출시키는 게 아니라, 1위6위, 5위10위, 이런식으로 6개씩 노출시킨다. 즉, 5위, 6위는 두 슬라이드 모두 노출되는 것이다. 첫 슬라이드에서 두번째 슬라이드로 바뀌는 애니메이션에서 5위, 6위 영화는 슬라이드를 나가다가 맨 앞에서 멈춘다. 이것을 구현하기 위해서 각 영화/시리즈의 id값을 layoutId로 주었다. 또한 넷플릭스 사이트를 보면, 각 영화의 순위를 나타내는 숫자가 사진과 살짝 겹치면서 뒤로 가려진다. 이 부분도 position을 조절해가면서 최대한 비슷하게 구현하려 노력했다.

• 모달 영화 사진 위에 마우스를 올리면 위쪽으로 올라오면서 scale이 커진다. 사진을 클릭하면 모달이 나타나면서 영화에 대한 추가적인 정보가 나타나고, 모달 밖의 화면을 클릭하면 모달이 사라진다. history.push를 사용하여 구현했다.

-화살표 화살표를 둘러싼 어두운색 박스에 마우스를 올리면 슬라이드를 넘길 수 있는 화살표가 나타나고 마우스를 떼면 사라진다. 클릭하면 클릭한 화살표 방향으로 슬라이드가 바뀐다.

4. 콘텐츠 슬라이더

• 동작 구현 TOP 10 슬라이더 보다는 만들기 수월했다. 왜냐하면 똑같은 영화가 다음 슬라이드에 등장하지 않기 때문이다. 따라서 영화들을 Row라는 컴포넌트로 감싸고, 화살표 버튼을 누렀을 때 Row의 key를 변경함에 따라 슬라이드가 바뀌도록 만들었다. React에서 key가 바뀐다는 것은 다른 컴포넌트라는 뜻이다. 즉, Row의 key가 바뀌었단는 것은 다른 Row라는 뜻이고, 결국 애니메이션과 함께 다른 Row가 등장하게 된다. (이전 TOP 10 슬라이더는 이런식으로 구현이 안됐다. 왜냐면 Row의 key가 바뀌어서 새로운 Row가 등장하면 5위, 6위에 해당하는 영화가 함께 새롭게 등장하기 때문이다.)

마치며

난이도에 비해 시간이 오래걸렸다고 생각한다. 그 이유는 내가 너무나도 비효율적으로 클론코딩을 진행했기 때문이라고 생각한다. 전체 큰 틀을 구상해놓고 코딩을 시작해야하는데, 무턱대고 보이는 부분부터 구현을 했고, 나중에 애니메이션을 추가하거나 position을 변경한다든지 등의 상황이 왔을 때 미치는 영향을 생각하지 않을 때가 많았다. 그러다보니 작성했던 코드를 수정하는 일들이 너무 많았고 이러한 시행착오를 겪다보니 시간도 오래걸리고 지칠때가 있었다. 무엇보다 이러한 이유로 코드를 자주 수정하다보니 코드가 지저분해졌다고 느꼈다. 아쉬운점은, 아무래도 넷플릭스의 백엔드가 없고 다른 사이트의 무료 api를 사용하다보니 영화에 대해 내가 보여주고 싶은 정보가 없거나 양이 부족할 때가 많았다. 예를 들어 특정 영화는 장르가 안나온다던지, 특정 영화만 포스터가 존재하지 않는다던지의 한계가 있었다. 그래도 끝까지 완성한데서 보람을 느꼈고 다음에는 좀더 효율적이고 깨끗한 코드를 작성하도록 노력해봐야겠다.