SpotifyGenius

프로젝트 목적

최근 JPOP을 즐겨 들어서 많이 듣는데 한가지 불편한 점을 느꼈다.
가사를 이해하고 싶은데 이해하지 못하는 것..

Melon, flow, spotify, youtube music등 여러 다양한 음악 플레이어 웹, 어플이 있고, 기능도 여러가지로 사용하는데 사실 문제는 없다.
하지만 가사 번역을 지원하는 기능을 가진 음악 플레이어는 많이 없을 뿐더러, 가사를 찾으려면 일일이 노래를 찾아 검색을 해야하는 귀찮음이 있다.

"해당 프로젝트를 서비스로 확장하고자 했지만, 저작권 문제와 서버 호스팅 비용 등 여러 현실적인 제약으로 인해 개인 프로젝트로 마무리하게 되었습니다."

사용 기술 스택

React, React-bootstrap, HTML, CSS, JavaScript

프로젝트 계획

이번 프로젝트에서는 여러 3가지 api를 이용하기 때문에 구현하면서 제대로 폴더를 나눠 관리하지 않으면 복잡하게 느껴졌다. api란?

spotify API를 이용해서 가사 번역기능을 구현하기 위해 구글링 해보면 spotify API에서 가사를 제공하지 않을까 생각했지만, spotify는 자체적으로 가사를 제공하지 않는다.
Spotify에서 또한 Musixmatch에서 가사 정보를 불러와 사용자에게 제공한다.

• spotify api를 이용해 음악, 아티스트 검색 및 플레이어 구현
• Genius api를 이용해 선택한 음악의 가사정보 불러오기
• deepL api를 이용해서 불러온 가사의 번역 기능 수행

Code

github

Client: server쪽으로 응답을 요청한다. (Artist name, trackId, get lyrics, track .. )
Server: Client 에서 보낸 요청에 데이터를 담아 응답한다.
(artists 정보들, tracks 정보들, lyrics 정보, translate 정보)

문제점 발생 후 방법 모색

프론트엔드 신입 개발자들에게 있어 가장 거슬리는 문제점 중 하나이다.

브라우저의 CORS 정책.

• 로컬에서는 Proxy 서버를 이용해서 구현이 가능.

이를 해결하기 위해 구글링을 통해 여러 방법들을 봤지만, 스스로 보고 이해할 수 있었던 방법은 서버와 클라이언트 분리 방법이다.
그래서 클라이언트 측만 구현했던 프로젝트를 서버와 클라이언트로 분리 시켰다.

결과

부족한 실력이지만, 3가지 api를 사용해보면서 api를 사용 경험을 좀 더 길러 볼 수 있었고,
문제를 해결하기 위해서 여러 서비스들을 비교해보는 재미도 있었다. 또한 당연하다고 느끼는 기술들 뒤에 여러 개발자들의 노력이 들어감을 다시 한번 느끼며 프로젝트를 마무리한다.