구글 로그인을 통해 가져온 access token으로 내 구독리스트를 불러오는데 자꾸 에러가났다.
토큰없이 불러오는 리스트는 다 되는데 토큰을 이용해서 불러오는 것들은 전부다 에러가났다.
온갖 방법을 검색해보고 찾아보고 했는데 원인을 모르겠다 ㅠㅜ...
그래서 @react-oauth/google 라이브러리를 이용해서 다시 로그인부터 구현하기로 했다.
우선 구글 클라우트 플랫폼에서 승인된 url에 포트가 없는 http://localhost도 추가해야한다.
Axios
내 구독 리스트를 불러오면서 axios get 요청시 params 매개변수를 객체로 넘기면 요청에 실패하고, path에 직접 쿼리 파라미터를 넘겨주면 요청에 성공하는 상황에 부딪혔다.
지인을 통해서 물어봤을땐 params는 post 요청시 사용하고 get할 때는 잘 안쓴다. 제대로 받아와지지 않는경우가 많다는 말을 들었다.
더 이상의 질문은 하지 않았지만 좀 이상하지 않은가 ... 왜지?
뭔가 좀 이상해서 공식문서를 통해 확인해봤다.
Axios 요청 config
자세한 설명은 나와있지 않았지만, 요청시 paramsSerialize 함수를 사용하라는 글이 보였다.
좀 더 구글링해 본 결과, 단순한 형태라면 잘 작동하지만, 중첩된 객체나 배열이 생기는 순간 제대로 stringfy를 처리하지 못한다고 한다.
그래서 qs라이브러리와 axios에서 제공하는 paramsSerialize를 이용하면 해결할 수 있다.
내가 보낸 쿼리 파라미터는 part="snippet", mine:true" 이게 다라서 복잡하지 않지만, 만약 youtube api를 사용하지 않았더라면 찾아보지도, 해결하지도 못했을 문제인 것 같다.