개발자 99% 커뮤니티에서 수다 떨어요!
멜론 클론코딩 컨테스트 구현 중간 공유
(1) 자기소개
안녕하세요, 저는 노마드코더와 함께 취업 준비를 하며, 개발 공부를 하고 있는 Jinskim이라고 합니다. 지난번 멜론 클론코딩 컨테스트에도 호기롭게 참가(?)했다가, 멘붕과 동기 상실을 핑계로(??) 완주를 하지 못하고, 다시 이렇게 돌아온 멜론 클론코딩 컨테스트 참여 기회가 생겨, 다시 도전해 보게 되었습니다.
(2) 구현한 기능 소개
유튜브 IFrame API를 이용해 플레이어를 구현하려 하였습니다.
유튜브 플레이어가 아닌 제가 정의한 버튼으로 다음과 같은 제어가 가능하도록 제작하려 했습니다.
재생 / 일시정지 / 정지
볼륨 조절 / 음소거
재생 구간 시간 조절
(추가 계획) 반복 재생 / 랜덤 재생
(3) 구현 모습 스크린샷 & 깃허브 링크
(4) 고민
사실 음악 스트리밍은 정말 자주 사용하는 서비스 중 하나라 참고할 만한 레퍼런스도 적지 않은 것 같은데, 어떻게 좀 더 보기 좋고 사용하기 용이하게 디자인 할 수 있는 지 생각해볼 수 있는 부분이 적지 않을 거 같습니다.
(보시다시피 아직 어떤 페이지도 스타일ㄹ...😫)플레이어의 주요 기능이라고 할 수 있는 '재생 목록' 에 관한 것도 계획을 하고 있었지만, 그 밖에 생각하지 못한 흐름도 많을 것이기에 그에 맞는 대처나 추가 구현은 어떻게 해야 할지 다시 정리해보아야 할 필요를 느끼게 되었습니다.
(5) 공유하고 싶은 팁
사실 제가 공유할 수 있는 팁은 없을 것 같고, 오히려 이 콘테스트에 참가하신 많은 분들의 게시글 속 팁이 매 기능을 구현하는 데 적지 않은 참고가 되고 있어, 너무 감사하게 생각하고 있습니다
(🥰🥰🥰)그럼에도 제가 중간중간 겪었던 고난(?) 중에 많은 시간을 투자했던 건...
"사용자(클라이언트) 부분에서 DB로부터 탐색한 데이터를 어떻게 넘겨줬었고, 그걸 다시 DB에서가 아닌 이미 가져온 데이터에서 가져올 수 있을까?"
라는 부분이었는데, (아마 배웠을 거 같은(?)) 'data 속성' 이라는 것을 활용해서 원하는 문제를 해결할 수 있었습니다.
https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes
(뭔가 더 좋은 방법이 있거나 아니면 복습하지 못한 부분도 있을 거 같아 메모해 놓고 제출 전에 다시 탐색해서 좀 더 개선할 수 있는 부분인 거 같기도 합니다...😅)