[프로젝트 리팩토링] nowmusic 랜덤하게 결과 보여주기

기존의 문제

저번 포스팅에서 nowmusic을 데이터로 모아 한번에 관리할 수 있도록 코드를 다 뜯고 react로 재구성해주었다. 이것을 시작한 이유도 사용자가 선택한 값에 따라 랜덤한 결과를 보여주도록 변경하고 싶어서였기 때문에 당장 진행했다.

어떤 방식으로 랜덤하게?

랜덤하게 보여줄 때 간단하고 근시안적인 방법으로는 내가 직접 키워드를 검색해서 랜덤한 결과물을 가져와 직접 json에 저장하는 방법을 생각할 수 있었다. 그러나 구현하는 나조차도 재미가 없고, 반복적인 복사와 붙여넣기를 할 것이고, 많이 사용하게 되면 결국 랜덤한 몇개의 동영상 목록도 다 익숙해진다는 단점이 있는 방식이다.

그래서 유튜브를 크롤링하여 랜덤하게 값을 돌려 도출하는 것을 생각했었다. 검색해보니 굳이 그럴 필요도 없이 youtube data api를 사용하면 됐다. (감사합니다 세상에나)

Youtube data api 의 search 기능 이용

유튜브 데이터 api는 구글이 관리하고 있으므로 이곳에 가면 api를 사용할 수 있다.

https://developers.google.com/youtube/v3?hl=ko

YouTube Data API  |  Google for Developers

나는 "검색" 기능을 사용했다.

 

쿼리 예시도 잘 나와 있어서 편리하게 사용할 수 있었다. 

한가지 헷갈렸던 점은 쿼리에서 type 이 video, channel, playlist 이렇게 세가지 있는데, 나는 음악 플레이리스트를 가져오고 싶어서 자칫 playlist를 타입으로 사용할 뻔 했으나, 여기에서 playlist는 동영상 목록을 의미하기 때문에 동영상 목록을 가져오고 싶다면 video로 값을 주면 된다.

 

github page에 api..? -> netlify 로 배포하도록 변경

기존에는 깃헙 페이지로 배포했었는데, 깃헙 페이지는 정적 사이트이기 때문에 api를 동적으로 불러오는 서비스와는 성질이 다르다고 생각했다. 무엇보다 api key를 저장해서 담아줘야 하므로 환경 변수를 설정해주어야 했다.

 

github page로 배포하려면 api key와 같이 숨겨야 할 내용들을 공개하는 방식이거나, google cloud console에서 도메인과 api를 제한하도록 설정하는 방법이 있는데, 둘 모두 완전히 가릴 수 있는 것은 아니므로 netlify를 통해 배포하는 것으로 변경하였다.

 

issue: netlify로 오픈한 페이지가 하얀화면이라니

GET https://nowmusic.netlify.app/%PUBLIC_URL%/favicon.ico net::ERR_HTTP2_PROTOCOL_ERROR

netlify로 배포하는 과정은 정상적이었는데, 페이지를 열어보니 하얀 화면과 함께 위와 같이 에러가 발생한 것을 볼 수 있었다. 

base directory와 publish directory는 잘 설정되어 있었고, favicon.ico 파일도 정해진 위치에 있었기 때문에, PUBLIC_URL을 찾지 못하고 있음을 알 수 있었다.

기존에 https://nowmusic.github.io 로 설정해둔 변수들을 모두 확인해서 netlify app url(https://nowmusic.netlify.app/)로 변경해주었다.

내가 변경한 변수들의 목록은 다음과 같다.

package.json

package.json

netlify에서 environment variables

site configuration에 들어가면 찾을 수 있는 환경변수 설정 화면이다.

이곳에 위와 같이 PUBLIC_URL을 추가해주면 된다. (package.json만 변경했을 때는 되지 않았다. 반드시 netlify에서 환경변수로 설정해주고 난 뒤, build를 다시 하고 배포해보도록 하자.)

 

리팩토링 성공 -> 야호

지금 들으면 좋을 음악은? 을 누르면 랜덤한 결과 값이 보여진다. 뿌듯행

 

 

이번에도 api 이용하면서 자연스럽게 async-await을 사용했는데, 사실 정확한 동작은 잘 모르고 있다. 다음 포스팅에서는 동기/비동기에 대해 자세히 알아봐야겠다.