Skip to content

FastCampusToyStory/Youtube-Clone

Repository files navigation

FastCampusToyStory - 리액트 토이 프로젝트(유튜브 클론)

팀원들


팀장 FE.

팀원 FE.
팀원 FE.
팀원 FE.
팀원 FE.

📌 과제 목표

  • youtube API 사용해보기
  • react-typescript 적용을 빨리 해보자
  • recoil, custom hooks 사용 등 다양한 기술을 배우면서 적용해보기
  • Redux 대신 러닝커브가 낮은 Recoil 사용해보기
  • scss 모듈 방식과 styled-component 방식 사용해보기

✅ 구현 기능

  • 메인에 영상 출력
  • ui 최대한 비슷하게 구현
  • 검색 기능
  • 동영상 영역에 호버하면 자동 재생
  • 비디오 상세페이지 관련 동영상 출력
  • 비디오 상세페이지 댓글, 대댓글 출력
  • Not Found 페이지 구현
  • dayjs 사용해서 영상 업로드 날짜 변환 후 출력
  • 재생 시간 변환
  • 조회수 포맷 설정
  • side bar 구현
  • 로딩 중 애니메이션
  • 스켈레톤 UI 구현 시도 했으나 로딩 끝난 후 사라지지 않음
  • 무한 스크롤 구현

🛠 사용기술스택

  • vite
  • react
  • recoil
  • eslint
  • prettier
  • typescript
  • scss
  • styled
  • axios
  • dotenv
  • dayjs

이슈

  • 파일명 소문자로 작성 및 배포 후에 파일명을 대문자로 변경 시, git 상에서 해당 변경 사항을 추적하지 못하여 netlify에서 빌드 오류가 발생함
  • hover 동영상 자동재생 시 이슈 부분에 cookie 관련 문제 발생 Alt text

소감

  • 배현수 : 리액트로 컴포넌트 단위의 개발이 바닐라 자바스크립트 보다 얼마나 편한 방법인지 알게 되었음..
  • 이혜란: 타입스크립트 사용이 어려웠고, 상태관리 라이브러리도 유용하게 사용하지 못한것 같아 아쉬움이 많이 남습니다..
  • 전소윤 : 타입스크립트를 제대로 못 써서 아쉽습니당…시간에 쫓겨서 되는 대로 개발한 느낌이라 쓴소리 달게 받겠습니다.
  • 방준우 : 프로젝트에 대한 다양한 짬밥을 얻을 수 있었다, 타입스크립트 제네릭 공부 해야겠다, 깃 플로우 잘 쓰니 유용하더라, 로티 재밌다, 초기 세팅과 회의가 중요함,
  • 오혜성 : 타입스크립트의 타입 지정에 대한 적응 때문에 상당히 오랜 시간이 필요하였으며, 리액트의 컴포넌트를 재사용성을 제대로 이용하지 못하였다… 다음에는 더 제대로 해보겠슴다…

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published