yt-music-clone : 개인

프로젝트 개요

2주간 YouTube Music 웹을 클론코딩한 개인 프로젝트로, Next.js를 활용하여 프론트엔드를 구현

문제해결 과정 및 배운 점

1) GitHub Pages로 배포가 불가능한 현상
↳ GitHub Pages의 동적 라우팅 및 서버 사이드 렌더링을 지원하지 않는 것을 확인 후, Vercel로 배포
2) playSlider에서 다음 곡 재생이 되지 않는 현상
↳ 슬라이더 가장 끝으로 옮겼을 때, play 상태 시간이 100초인 것을 확인 후, Radix 공식문서에서 max값 기본 속성이 100인 것을 확인
↳ 슬라이더 max값이 플레이타임의 끝과 일치하도록 변경

개발 포인트

• - 4개의 페이지( 홈 / 둘러보기 / 보관함 / 채널 ) 및 반응형 UI 구현
• - Next.js 사용: AppRouter 기능활용으로 페이지 렌더링 성능과 SEO를 개선하였고, <Image /> 컴포넌트 활용하여 페이지 로딩 속도 개선
• - shadcn/ui 사용: 이전 프로젝트에서 사용했던 MUI에 비해 커스터마이징이 편리하여 디자인 작업 시간 단축
• - TailwindCSS 사용: HTML 클래스에 직접 스타일을 적용하여 디자인 구축 속도 향상
• - 음악 재생 슬라이더 및 채널 내 셔플 듣기 기능 구현