🎆 프로젝트 소개
'YouTube-Clone'은 React와 Typescript를 이용하여, 추천영상, 검색, 동영상 재생 등의 페이지로 구성되어 있는 YouTube Clone 프로젝트 이며, 반응형과 Typescript를 공부하면서 적용하기 위해 프로젝트를 계획했습니다.
🎨 프로젝트 개요
✔ 개발 인원 : 1명 (프론트 1)
✔ 프로젝트 기간 : 2022.10.03 ~ 2022.10.31 (4주)
1주차
- 와이어프레임 설계
- YouTube API 가져오기
- Google 소셜 로그인 기능 구현
2주차
- Google 소셜 로그인 기능 구현
- Header 컴포넌트와 관련된 기능 구현
- SideBar 컴포넌트와 관련된 기능 구현
3주차
- 검색 기능 구현
- 메인 기능 구현
4주차
- 동영상 재생 페이지와 비디오 실행 기능 구현
- AWS - S3로 배포
🔧 주요 기능
① 메인 페이지
- 한국에서 가장 인기있는 동영상 25개 조회
- 비디오 썸네일 클릭 시 해당 영상을 재생할 수 있는 페이지로 이동
- 로고 클릭 시 초기 인기리스트 화면으로 돌아가고 검색창 초기화
② 검색
- 검색 키워드를 입력하고 엔터 혹은 돋보기 클릭시 해당 키워드의 검색결과 리스트가 나옴
③ 비디오 실행
- iframe 태그를 사용하여 비디오 자동 재생
- 좌측엔 비디오 재생 레이아웃과 정보가 있고 우측엔 선택한 비디오와 관련 리스트가 있음
🔧 개발 내용
① 반응형
모든 페이지를 반응형 페이지로 제작 했으며, CSS Grid를 이용해 창의 크기에 따른 열수 변화 자동 적용하였고 media query에 따라 자동으로 크기가 조절되도록 만들었습니다.
② typescript
③ React-Query
서버 데이터를 위한 로직이 과도하게 커지고, 그로 인해서 Redux 를 활용하기 위한 보일러 플레이트가 비대해 진다는 점
React-Query 를 도입함 으로 Server Data 와 Client Data 의 경계를 분명하게 하면서 개발할 수 있을것 같다는 생각
④ React.memo
memo로 바꿔줌으로써 불필요한 렌더링을 방지
🕹 기술 스택
| Name | Appliance | Version |
|---|---|---|
| React | 리액트 | 18.2.0 |
| React-dom | 브라우저 렌더링 | 18.2.0 |
| React-router-dom | 라우터 | 6.3.0 |
| React-icons | 아이콘 | 4.4.0 |
| React-Query | Server State 관리 | 4.23.0 |
| typescript | 프로그래밍 언어 | 4.4.2 |
| Axios | HTTP 클라이언트 라이브러리 | 0.27.2 |
| timeago.js | 시간 계산 라이브러리 | 4.0.0-beta.3 |
| Styled-components | CSS in JS | 5.3.5 |
⚓️ Links
Project homepage : http://myyoutube-clone.s3-website.ap-northeast-2.amazonaws.com/