드디어 홈 데이터 패칭
한동안 홈 화면은 휑~했었음
새 앨범 발매 섹션만 있었고, 나머지는 없었음.
왜냐, 이 때 플레이리스트 부분의 작업을 하고 있었기 때문.
그래서 npm start하고 화면이 켜졌을 때, 내가 계속 작업은 하고 있지만 뭔가 비었다(?), 볼게 없다(?)라고 느꼈었음.
그때마다 재빠르게 로그인하고 플레이리스트로 이동을 했지만ㅋ
계속 이렇게 둘 수는 없다 싶어서 드디어 홈 작업에 돌입!
섹션에 대한 API를 제공하지 않는다고?
드디어 홈 작업한다고 어떤 데이터들을 보일까 타이틀을 정했었음.
- 새 앨범 발매(Release Album) → 이건 이미 했으니까
- 인기 아티스트(Top Artists)
- 인기 앨범(Popular Albums)
- 추천 차트(Recommended / Charts)
그래서 API Document에서 해당 API들을 제공해주는지 찾아봤는데 제공해주지 않았음.
근데 아니, 이건 좀 기본적으로 제공해주는 API이지않나?, 이걸 제공안한다고?라는 생각으로 ChatGPT한테 물어봄.
?? 근데 알려주는거임.
그래서 그래, 이게 없을리가 없지라고 생각하고 api를 만들었음.
그리고 해당 API들은 Token을 꼭 필요로 했기 때문에, clientCredentialToken을 사용함.
홈 화면에서 로그인을 하지 않아도 데이터를 보여야하니까
clientCredentialToken
로그인을 하지 않고,Spotify의CLIENT_ID와CLIENT_SECRET을 기반으로 만든 토큰임.
만들고 호출했는데
???? 왜 안줘?? 왜 404??? 왜 Resource not found???
일단, 나는 여기서 ChatGPT가 준 api 자체는 문제가 없다고 생각했음.
그럼 Token이 제대로 안들어갔나? Network 탭 바로 들어가서 Token 상태 확인함.
undefined인가?? NO!! 제대로 들어감.
하지만 결과는 계속 404 Resource not found
그럼 clientCredentialToken으로 안되는건가? 싶어서 로그인한 Token으로 테스트를 했는데도 계속 404
아니, gpt가 이 api 맞다고 했는데???
그래서 curl로 직접 테스트를 진행해봄.
??? 근데 여기서도 안나오는거임.
api 문제라는 생각은 또 안하고, 토큰 때문인가 싶어서 이미 만들어 둔 새 앨범 발매 api를 curl로 테스트해봄.
정상적으로 호출되고 결과도 나옴.
아 이거 api 문제 있구나, 그래서 gpt한테 물어보니 지역 제한 때문에 발생할 수도 있다고 해서 쿼리 스트링으로 지역 설정까지 해줘봤음.(?market=US) → 안됨.
그래서 이 문제의 전체적인 맥락을 분석하면,
- 일단 공식 API로 제공하지 않음
- 인기 차트 관련(트랙/아티스트/앨범 순위 등)은 Spotify에서 만든 내부 차트로 API 제공하지 않음
- 일부 가능한 API 등도 기능 제한이 있거나, 접근 제한(지역, 토큰 등)이 있음
그래서? 차트 관련 API를 사용하지 못했다.
결론 : 섹션 변경
저러한 문제들 때문에, 결론적으로 섹션을 변경하기로 했음.
- 새 앨범 발매(Release Album) → 이건 이미 했으니까
- 아티스트(Artists)
- 앨범(Albums)
- 플레이리스트(Playlists)
- 카테고리(Categories)
일단, 이 섹션들에 대해서는 공식 API들은 제공을 했음.
하지만 문제가 뭐냐, 카테고리 제외 나머지 API들은 특정 id가 필요했음.
즉, 아티스트가 랜덤으로 뽑히는게 아니라 특정 아티스트의 id가 필요로 했음.
어떻게 해결? 특정 키워드로 검색하기
카테고리는 여러 카테고리를 제공해주는 공식 API가 있기 때문에 카테고리 제외한 나머지 섹션들은 검색 API를 사용해 작업을 진행했음.
검색 API는 특정 키워트를 기준으로 결과를 제공해주기 때문에, {q: 'k-pop', limit: 10, type: '섹션별'}을 기준으로 결과를 출력했고
const { data, isLoading } = useSearchCategory({
q: "k-pop",
type: [SEARCH_TYPE.Album],
limit: 10,
});카테고리는 여러 카테고리를 제공해주는 공식 API가 있어 해당 API를 사용함.
const { data, isLoading } = useGetServeralCategories({ limit: 10, offset: 0 });두 API 모두 Token을 필요로 하기에 로그인 없이도 API 호출이 가능한 clientCredentialToken을 사용했음.
스타일 지정
결과는 모두 정상적으로 출력됨.
그리고 10개씩 limit을 해두었기 때문에 가로 스크롤을 적용하는 것으로 일단 마무리함.
홈 화면 데이터 패칭 끝!
홈 화면 남은 작업
일단, 홈 화면을 채워서 휑~한 화면은 없지만, 각 이미지를 클릭했을 때의 라우터와 해당 페이지를 만들어야 함.
이 작업은 검색 페이지 완료하고 만들까 생각 중임.
왜냐면, 검색 페이지에도 해당 페이지로 이동하는 기능이 필요하기 때문.
작업 후기
이번 홈 화면을 작업하면서 공식적으로 제공하지 않는 API는 다 이유가 있기 때문에 제공하지 않음을 알게됨.
하지만, curl을 통해서 직접 호출하고 했던 경험은 재밌었음.
전에 회사에서도 해봤지만, 다시 해보니 재밌었고 api 응답 확인할 때 웹 사이트에서 Network 체크 뿐만 아니라, 직접 호출하는 방식으로 확인해보는 것도 괜찮다고 생각함.
그래서 나중에는 이런 방식으로도 체크를 많이 해볼 것 같음.
