🎹 음악 api 선정

처음에는 youtube api로 사용자가 원하는 음악을 검색해서 리스트를 랜덤으로 로딩하려 했다.
하지만 할당량이 생각보다 많지가 않아 이 방법은 패스했다.
일일 할당량이 10,000인데 한번 조회를 할 때마다 100을 사용한다.
그래서 100번만 조회를 해도 하루 할당량을 모두 사용하기 때문에 다른 api를 찾아봤다.

또다른 api는 사운드 클라우드, 스포티파이가 있었다.
근데 사운드클라우드는 이제 더이상 추가로 토큰을 발급해주지 않고, 스포티파이는 유료기 때문에
결국 남은 선택지는 youtube api밖에 없었다

그래서 어떻게 하지? 고민을 하다 내린 결론은 이렇다.

하루에 100회 조회하는 페이지를 따로 만들고 그 결과를 파베에 저장하자!

그러면 파베 쓰기 할당량을 좀 쓰긴 하지만 생각보다 널널하기 때문에 초과하지는 않는다.
이렇게 api를 어떤걸 쓸지 골랐으니 이제 구현만 남았다.

🧠 firestore에서 랜덤한 문서를 받아오기?

songs 컬렉션에 음악 정보에 대한 문서들이 담겨있다.
문서에는 썸네일 주소, 음악 주소, 영상 제목 정보가 담겨있다.

mysql을 사용할때는 랜덤한 시드를 넣어 SELECT RAND(x)를 해주면 랜덤하게 됐는데
firestore에는 그런 기능이 없어보였다.

그래서 아래와 같은 방법으로 랜덤하게 받아오는 방법을 구현했다.

• 우선 firestore에 저장시 1부터 쭉 카운팅을 하면서 저장한다.
• firestore에서 불러올시 음악이 몇개인지 카운팅한다.
• 1 ~ "음악갯수" 만큼 랜덤한 배열을 생성해 요소들을 섞는다.
• 배열을 12개씩 증가시키며 firestore에서 값들을 불러온다.

🥱 유저가 심심하지 않게 skeleton ui 구성하기

맨 위의 gif파일을 보면 알 수 있듯 서버에서 데이터를 로딩하는데 시간이 오래 걸린다.
오래걸리는 이유는 썸네일 파일을 12개씩 받아오기 때문인데 썸네일을 없앨수는 없으니
기다리는동안 스켈레톤 컴포넌트를 보여주기로 했다.

리액트 18에서 추가된 Suspense를 사용할것이다.
Suspense를 간단히 설명하면 컴포넌트 로딩이 끝나기 전에 다른 컴포넌트를 대신 보여줄 수 있는 기능이다.

<Suspense fallback={<SkeletonMainPage />}>
  <MainPage />
</Suspense>

그래서 위의 코드는 로딩이 완료되기 이전에는 SkeltonMainPage 컴포넌트를 보여주지만
로딩이 완전히 끝난다면 MainPage 컴포넌트를 렌더링하게된다.

그리고 페이지를 맨 아래까지 내린후 로딩이 완료될 때 까지 일정시간 기다리는 UX는 좋지 않다고 생각했다.
그래서 여기에도 동일하게 로딩이 끝날때까지 스켈레톤 컴포넌트를 보여주기로 했다.

react-query의 useInfiniteQuery훅을 사용하는 방법이다.

const {isFetchingNextPage} = useInfiniteQuery(['lists'],()=>{...},{...});

만약 다음 페이지가 로딩중이라면 isFetchingNextPage값이 true로 변한다 이 때

{isFetchingNextPage && <SkeletonMainPage />

이런식으로 SkeletonMainPage 컴포넌트를 렌더링해줬다.

⎘ 앞으로..?

이번 프로젝트는 규모가 작고 간단해서 구현할게 상당히 적다.
그래서 내가 해야할 일은 Profile 페이지 구현만 남았는데
다른 팀원이 firestore에 저장한걸 불러오기만 하면 된다!!!