(1) 자기소개 :
대구에서 취업 준비를 하고있고 노마드에서 번역 장학생으로 활동하고있는 푸린이라고 합니다! 프론트엔드 개발자가 되고싶습니다.

멜론 클론코딩 컨테스트에 참가했었는데 아쉬움이 많이 남아서 Next13버전도 익힐겸 만들어보았습니다.

• (2) 서비스 소개

Github: https://github.com/jieuncodes/next-cherry-music/

URL : https://next-cherry-music.vercel.app/

사용 기술 및 도구:

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

1. Next.js의 SSR(Server Side Rendering)와 React 서버 컴포넌트를 활용, 사용자의 화면에 실제로 보여지는 데이터만 미리 패칭하였습니다.

2. Vercel의 cron 기능을 활용하여 매일 자정에 사용자가 가장 많이 접근할 것으로 예상되는 데이터를 데이터베이스에 미리 저장하도록 했습니다.

3. 사용자가 애플리케이션에 접근할 때, 이 미리 저장된 데이터를 우선적으로 제공하고, 추가적인 데이터는 API에서 동적으로 패칭하여 제공하도록 설계하였

   습니다.

4. D3 차트 라이브러리를 이용하여 인기 아티스트의 인기도를 시각적인 버블차트로 표현했습니다. 차트에 사용자의 인터렉션에 반응하도록 다양한 효과를 더했습니다.

5. 사이즈를 줄이면 플레이어가 바닥으로 이동하는 등 화면의 사이즈에 따른 반응형 디자인을 구현했습니다.

• (3) 투두리스트

현재 댓글 CRUD 기능을 추가하고있고

사용자가 직접 음악 플레이리스트를 만들고 공유 할 수 있는 기능을 넣고있습니다.

계속 페이지를 이동하다보면 레이아웃 쉬프팅이 일어나는데, 원인을 찾지못하고있습니다 ㅠㅜ

혹시 제 코드에 대한 피드백이나 사이트에서 불편한 점이 있다면 알려주시면 감사하겠습니다! (진짜 감사합니다)

계속 업데이트 할 예정입니다!