[React] 넷플릭스 클론 프로젝트 [1] - 들어가며

들어가며

Vuejs로 프론트엔드 경험을 쌓고 이직을 준비하며 React 학습의 필요성을 크게 깨달았다.

인프런, 유튜브 등 무료 인강을 수강하며 React의 문법과 기초 지식을 습득하였고,

개인 프로젝트를 통해 보다 더 심도 있게 React를 다뤄보기로 했다.

프로젝트 주제로 뭘 할지 꽤 고민을 하며 이것저것 찾아보았으나

일단 React 개발 공부가 목적이었기 때문에

1. 화면 기획까진 신경 쓰고 싶지 않았고...

2. 백엔드 구현도 패스하고 싶었다..

 

TMDB Open API를 활용하면 딱! 이겠다 싶어 넷플릭스 클론 코딩 프로젝트로 결정했다.

참고 ) https://developer.themoviedb.org/reference/intro/getting-started

 

최대한 넷플릭스 UI/UX와 유사하게 구현하고자 했다.

애초에 프로젝트 기간을 한 달로 잡았으나.. 한 달이 더 걸려 총 두 달 정도가 소요됐다.

무엇이 제일 힘들었냐 하면.. 역시나 퍼블리싱.........

 

총 기간: 2024-11-19 ~ 2025-01-15

 

기술 스택

React, Javascript

React Youtube, React Router Dom, React Query, Zustand, Styled Components, gh-page 등

 

결과물

데모 사이트) https://sngynhy.github.io/react-netflix-clone https://d2qzqs43xovcek.cloudfront.net/

GitHub) https://github.com/sngynhy/react-netflix-clone

 

추후 개선 사항

1. 반응형 적용 > 모바일 및 태블릿 버전

2. 콘텐츠 요약 정보 미리 보기 기능 > preview 모달

3. 검색 콘텐츠 출력 시 무한 스크롤 기능

4. 시리즈 UI 개선 > 시리즈 리스트 추가