체리뮤직
대구에서 취업 준비를 하고있고 노마드에서 번역 장학생으로 활동하고있는 푸린이라고 합니다! 프론트엔드 개발자가 되고싶습니다.
멜론 클론코딩 컨테스트에 참가했었는데 아쉬움이 많이 남아서 Next13버전도 익힐겸 만들어보았습니다
사용 기술 및 도구
Front-end: Next.js, TypeScript, React, Framer Motion, Tailwind, React Query
Back-end: Supabase(Postgre SQL)
library: Recoil, D3.js, cheerio
기타 도구: Git, Vercel
API: LastFM, Spotify
Vercel의 cron 기능을 활용하여 매일 자정에 사용자가 가장 많이 접근할 것으로 예상되는 데이터를 데이터베이스에 미리 저장하도록 했습니다.
사용자가 애플리케이션에 접근할 때, 이 미리 저장된 데이터를 우선적으로 제공하고, 추가적인 데이터는 API에서 동적으로 패칭하여 제공하도록 설계하였습니다.
D3 차트 라이브러리를 이용하여 인기 아티스트의 인기도를 시각적인 버블차트로 표현했습니다. 차트에 사용자의 인터렉션에 반응하도록 다양한 효과를 더했습니다.
사이즈를 줄이면 플레이어가 바닥으로 이동하는 등 화면의 사이즈에 따른 반응형 디자인을 구현했습니다.