저번 TIL에 작성했던 것 처럼 이번 프로젝트에서는 spotify api를 사용하게 되었는데, 다른 open api들과는 요청 방법이 살짝 달라 이 부분에 대해 글을 작성해보려고 한다.
그래도 api 사용 전에 문서를 한 번 꼼꼼히 읽어보면 좋을 것 같다.
api 발급부터 나는 살짝 우왕좌왕했기 때문에 발급부터 작성했다.
실제로 api 사용 부분은 spotify API 사용하기 부분을 참고하면 좋을 듯!
✅ spotify API 발급받기
- api 공식 문서에 들어가보면, 오른쪽 상단에서 로그인이 가능하다.
- 본인 계정으로 로그인 한 뒤, 프로필 부분을 놀러 dashboard 부분으로 들어간다.
- 대충 동의 누르고 다음으로 넘어간다.
- 이메일 인증을 진행한다.
- 내용을 채우고 앱 생성을 해준다.
- Redirect URIs : 실제로 배포한 웹이 없다면 로컬에서 실행되는 localhost 주소를 입력하면 된다.
- 이 두개가 필요하니 .env.local 파일에 환경변수로 저장한다.
✅ spotify Token 발급받기
spotify API는 특이하게 api key를 발급해주는 게 아니라 Client ID, Client secret 이 두개를 사용해 토큰을 요청하고 반환받은 토큰을 사용해서 api 요청을 해야하는 방식이다.
OAuth 2.0의 클라이언트 자격 증명 흐름(Client Credentials Flow) ... 이런 설명이 있던데 이와 관련한 건 따로 알아보는 것이 좋을 것 같다.
해당 부분에 대한 문서는 이곳
사실 문서를 봐도 백엔드 로직으로 구현되어있어 프론트엔드만 배운 나는 이해가 잘? 됐다.
그래서 여기서기 리액트나 넥스트로 구현한 자료가 없을까 찾아보다가 관련 블로그를 찾았다.
익숙한 구조의 코드를 보니까 천천히 이해할 수 있었다! 일단 복붙해서 써보고, 되는지 안되는지 확인한 후 조금 더 보기 쉽게 수정했다.
// 잊지 말고 환경변수 임포트하기
const SPOTIFY_CLIENT_ID = process.env.SPOTIFY_CLIENT_ID as string;
const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET as string;
// 스포티파이 api 요청을 위한 토큰 받아오는 함수
const getSpotifyToken = async () => {
const params = new URLSearchParams({
grant_type: "client_credentials",
client_id: SPOTIFY_CLIENT_ID,
client_secret: SPOTIFY_CLIENT_SECRET
});
// fetch 부분
const res = await fetch("https://accounts.spotify.com/api/token", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
// 쿼리스트링 형식으로 요청을 보냄
body: params.toString()
// 실제로 전달되는 형태
// grant_type=client_credentials&client_id=SPOTIFY_CLIENT_ID&client_secret=SPOTIFY_CLIENT_SECRET
});
// 토큰만 구조분해 할당으로 받아옴
const { access_token: token } = await res.json();
return token;
};
// 함수를 호출하여 반환된 토큰을 변수에 저장
const token = await getSpotifyToken();console.log로 token을 확인하면서 진행하니 수월했다.
✅ spotify API 요청하기
토큰을 받은 후에 요청은 기존 api들과 크게 다르진 않았다.
반환값에 쓸모없는 게 많아서 포맷팅하는 게 시간이 제일 오래 걸렸다...
// 스포티파이에 해당 음악 정보 요청
const res = await fetch(`https://api.spotify.com/v1/tracks/${id}`, {
method: "GET",
headers: {
// 헤더에 아까 받은 token 함께 보내기
Authorization: "Bearer " + token
}
});
const data: OriginalTrack = await res.json();
// 포맷팅 함수로 필요한 데이터만 받아옴
const music = formatTrackData(data);supabase에 저장된 music id를 받아 track정보를 불러오는 로직을 작성했다.
각각의 api 요청에 대한 건 공식 문서에 잘 나와있어서 어렵진 않다. 조금 헷갈릴 뿐...ㅜ
그리고 타입의 경우 spotify에서 반환값을 보여주기 때문에 손수 작성해도 되고, 구글링해서 나오는 이미 만들어진 타입을 사용해도 될 것 같다. 나는 ai와 함께 직접 타입을 작성했다.
아무튼 좀 생소하고 어려워보이지만, 하면 되긴 한다 < 이게 제일 중요
