[React] Youtube 클론코딩

 

Youtube clone 실습 

개발언어 : React 활용 

개발 환경 : HTML, PostCss

사용 API : Youtube Data API v3

특징 :

• 반응형 : CSS Grid를 이용해 창의 크기에 따른 열수 변화 자동적용
• 성능향상: memo를 이용한 리렌더링 방지, useCallback을 이용한 prop재전달 방지 

기능 : 

• 초기화면 : 추천리스트를 보여줌
• 검색 : 검색 키워드를 입력하고 엔터 혹은 돋보기 클릭시 해당 키워드의 검색결과 리스트를 보여줌
• 로고 클릭 : 로고를 클릭하면 초기 추천리스트 화면으로 돌아가고 검색창초기화 
• 비디오 선택 : 비디오를 선택하면 비디오 재생레이아웃과 정보를 좌측에 출력하고 우측에 리스트를 출
•                        화면을 줄이면 우측에 있던 리스트가 재생레이아웃 아래로 이동 

 

 

GIt 주소 

https://github.com/amy4229/youtube-clone

GitHub - amy4229/youtube-clone