Youtube IFrame API를 활용한 음악플레이어 제작기

• 최근 진행한 프로젝트에서는 멜론, 플로와 같은 음악플레이어를 만들어야 했습니다.
• 음원 자체를 재생하기엔 저작권, 저장 방법 등 고민할 거리가 많아서, 스트리밍을 하는 방식으로 Youtube IFrame API을 활용하기로 했습니다.
  • Youtube IFrame API는 유튜브 영상링크를 외부로 임베드 했을 때 등장하는 영상 재생화면 요소를 편리하게 코드상에서 이용할 수 있게 도와주는 api 입니다.
• 우선 플레이어는 앱 실행 내내 유지되어야 했기 때문에, 플레이어를 호출하는 컴포넌트를 분리하여 비교적 상위 컴포넌트 레벨에 두었습니다.
• 재생목록을 위해 음악을 저장했는데, 이때는 영상의 고유 ID 값을 활용했습니다. 고유 ID와 제목, 가수, 재생시간을 하나의 DTO로 관리하였습니다.
• 재생목록, 이전 곡, 다음곡을 구현해야 했습니다.
  • 우선 중복곡의 경우 재생 ID가 같았기에, 재생목록 상에서 어떻게 구분할지 고민했습니다.
  • 또한, 음악 삭제와 음악 추가할 때와 같이 재생목록이 변경되는 상황이 많았기에 어떻게 하면 이전 곡, 다음 곡을 정확하게 찾을지 고민했습니다.
  • 이를 해결하고자, 재생목록 배열을 Recoil 전역 스토어에 관리하였습니다.
  • 현재 재생중인 곡을 찾아 그의 index를 찾아 현재 재생 중인 곡을 관리하였고, 다른 컴포넌트에서 추가, 삭제 발생 시 재생목록 배열을 업데이트(fetch) 해주었습니다.
• 다른 문제들도 다수 있었지만, 가장 힘들었던 로직이 ‘플레이어를 만들기‘이었기에 생략하였습니다. 후에 기회가 된다면 다른 문제와 해결과정도 소개하고자 합니다.
• 이번 12월 프리온보딩 챌린지 열심히 참여해서, 비즈니스 로직을 보다 매끄럽게 짤 수 있는 주니어 개발자가 되어보겠습니다!