멜론 클론 중간공유

자기소개

안녕하세요! 매일 노마드 강의를 들으며 ‘인간 니콜라스 클론’이 되고자 하는 꿈을 가진 취준생 푸린이라고 합니다. 저는 노마드에서 코코아톡 클론 코딩으로 코딩을 처음 접했고 그 후로 코딩은 주로 노마드에서만 공부를 해왔습니다. 어느덧 캐럿마켓 강의를 듣고 있네요!

구현한 기능 소개

• 모바일 화면

반응형 디자인을 쉽게 하려면 화면 구성이 간단한 모바일 화면부터 디자인하는 것이 낫다고 판단하여 모바일 화면을 먼저 만들었습니다.

• 인기곡 차트 가져오기

last.fm의 API를 활용하여 인기곡 차트를 가져온 뒤 데이터 베이스에에 각각의 곡 정보가 저장되도록 했습니다. 곡의 정보를 서버에도 저장하고 클라이언트 사이드의 data-set에도 trackTitle, artist, youtubeVideoId, albumCoverImage를 넣어 다음에 정보를 가져다 쓰기 쉽게 했습니다.

• 뮤직 플레이어

iframe API를 사용하여 음악만 재생되도록 했습니다.

• 클라이언트 사이드 플레이리스트 큐 구현

아직 유저 관련 DB를 구축해두지 않아서 각 유저 개인의 플레이리스트는 구현을 못 했습니다. 그래서 Array를 하나 만들고 클라이언트 사이드에서의 큐만 만들어두었습니다.

로그인하지 않고 플레이리스트를 만들 수 있고 리스트의 다음 곡 재생도 가능합니다.

깃허브 링크

https://github.com/jieuncodes/cherry-music

고민

• progress bar의 handle이 progress bar 보다 빠릅니다.

두 엘리먼트의 시간 흐름이 달라서 그런 것 같습니다. 해결해야 합니다.

• 코드를 마구잡이로 빠르게 쓰느라 다소 정리가 안 되어있습니다.

항상 클린 코드 해야 유지보수가 쉬운데...허허.

• 상태 관리를 더 잘 하고 싶어서 리액트로 하고 싶습니다. 프로젝트를 무사히 마친다면 다시 리액트로 해보고 싶습니다.

공유하고 싶은 팁

• youtube data API보다 last.fm API를 사용하기가 더 간단해서 곡에 대한 정보는 last.fm을 활용하고 youtube iframe API를 활용하여 음악을 재생하도록 하는 것이 편합니다.

• 곡의 element에 data-set으로 필요한 정보를 넣어두면 클라이언트 사이드에서 서버사이드의 정보를 쉽게 꺼내 쓸 수 있습니다.