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
Contribute to amy4229/youtube-clone development by creating an account on GitHub.
github.com
728x90
'실습' 카테고리의 다른 글
| [리액트앱] 습관 체크 애플리케이션 (0) | 2022.06.08 |
|---|---|
| [javascript] 양구하기 게임 (0) | 2022.05.25 |
| [webRTC] 화상채팅 실습 (0) | 2022.05.13 |
| [실습] 장보기체크리스트만들기 (0) | 2022.04.26 |