Project#1 M-MEMOTION (1)

주제 선정

 누구나 인생의 이정표가 된 음악이 존재할 것이다. 따로 글로 기록해두지 않아도 자연스레 음악을 듣던 시간이 추억된다는 건 근사한 일이다.
 음악을 좋아하기 시작해서 사랑하게 된 나이기 때문에 음악에 대한 기억과 감정이 많다. 이를 어딘가에 적어두면 영원히 사라지지 않을까 싶어서 첫 프로젝트의 주제로 선정하게 되었다.

무엇을 구현하고 싶은지

• 메모할 때 필요로 하는 부분(곡 제목, 앨범, 발매일 등)만 커스텀할 수 없을까?
• 일일이 가사를 검색하고 복사, 붙여넣기 하는 일을 줄일 수 없을까?

음원 정보를 가져오자

• 국내 음원 사이트 '멜론'은 더이상 API를 제공해주지 않았고 '벅스' 등 도 마찬가지였다.
• https://www.last.fm/api
  데이터 접근 방식이 간편하고 쉬웠지만 앨범 커버 이미지를 제공해주지 않았다. 메모를 하는데 이미지는 생명이라고 판단했기 때문에 아쉽지만 대안을 찾았다.
• http://www.maniadb.com/api
  국내 사이트로 꽤 오랜 역사를 지닌 분위기가 느껴진다. 앨범 커버 이미지를 제공해주었지만 데이터가 XML 형식이었고 JSON 형식을 다루고 싶어 과감히 패스했다.

문제의 시작

Spotify API

• 결국 국내 뿐만 아니라 해외 음원도 제공되는 Spotify API를 활용하기로 판단했다.
• 문제는 구글에 검색해도 국내에서 Spotify의 API를 활용한 케이스는 파이썬 장고가 대부분이었다.
• API를 접근하는 것부터 미흡했기 때문에 하는 수 없이 유튜브를 통해 해외 자료를 찾기 시작했다.
• 말을 잘 알아 듣지 못했지만 따라하기 식으로 덤벼들었다.
• 며칠 삽질(?)한 끝에 내가 만드는 프로젝트에 필요한 것들과 불필요한 것들을 가릴 수 있게 됐다.
  

필요한 것은 검색 기능

• 로그인이나 사용자 개인 데이터를 접근하는 기능은 생략해도 되고, Spotify에서 제공하는 음원만 가져오면 된다고 판단했다.
• 이전에 활용하려고 했던 API 사이트들은 따로 토큰을 POST 요청하지 않고 맨 처음에 key값만 받거나 이 마저 불필요한 경우였다.
• Spotify는 이들과 다르게 토큰을 요청하고 가지고 있어야 데이터에 접근할 수 있는 방식이었다.
• react의 axios 라이브러리를 통해 API에 토큰을 요청하여 받아와서 음원 검색 기능에 활용했다.

오픈소스의 힘을 빌릴 수 있었다.

https://github.com/JMPerez/spotify-web-api-js

• 며칠을 검색하다보니 이런 오픈소스도 존재하였다.
• 토큰 설정부터 검색 및 결과 받아오기 등 모든 기능이 구현되어 있어서 import만 하면 손쉽게 가져와 쓸 수 있었던 것이다.
• 남이 만든 것을 나의 입맛에 맞게 사용하는 것도 쉽지 않다는 사실을 깨달았다.
• 하지만 최대한 나의 힘으로 기능을 구현하는 것이 목표이므로 최대한 지양하고자 한다.

의문점

• 배열 state에 JSON 데이터를 추가하는 형식을 선택했다. state의 불변성을 지키고자 spread 연산자(...array)를 사용했는데 변수가 많아 일일이 임시 배열로 옮기고 추가하는 작업이 번거로웠다. 더 쉬운 방법이 없을까?