프로젝트명
Youtube 클론 프로젝트
제작기간
2022.03.06 - 2022.03.29
개발스택
Javascript | React | Redux
프로젝트 소개
Firebase와 Youtube API를 활용한 Redux 기반의 Youtube 클론 프로젝트.
Google 계정으로 로그인을 한 후 해당 사용자의 Youtube 데이터를 동기화시켜 구독중인 채널을 보여주거나 댓글을 남기는 등 실제 Youtube 웹사이트처럼 이용할 수 있도록 제작한 프로젝트입니다. Youtube Data API 공식문서를 참고하여 개발했습니다.
프로젝트 구현 사항
Redux 상태관리 툴
•
Redux와 Redux-thunk로 비동기적인 상태를 효율적으로 관리도록 개발했습니다.
로그인 페이지
•
메인 페이지
•
영상을 클릭하면 해당 영상의 상세 페이지로 이동합니다.
•
카테고리를 클릭하면 카테고리 키워드에 대한 비디오를 출력합니다.
•
상단 검색창에 텍스트를 검색하면 검색 결과 페이지로 이동합니다.
•
InfiniteScroll 라이브러리로 무한 스크롤 기능을 구현하였습니다.
•
영상 로딩 시 Skeleton UI를 노출시켜 사용자 경험을 개선하였습니다.
영상 페이지
•
실행가능한 영상과 영상에 대한 상세 정보를 출력합니다.
•
페이지 우측에는 현재 페이지와 관련된 영상 목록을 출력합니다.
•
영상 로딩 시 Skeleton UI를 노출시켜 사용자 경험을 개선하였습니다.
•
로그인한 Google 계정과 동기화 하여 실제로 댓글을 남길 수 있도록 구현하였습니다.
검색 결과 페이지
•
검색한 키워드에 대한 영상 및 채널 목록을 출력합니다.
채널 목록 페이지 (subscriptions)
•
로그인한 Google 계정과 동기화 하여 사용자가 구독중인 채널 목록을 출력합니다.