- 자기소개

안녕하세요. 올해 2학기에 복학 예정인 휴학생입니다. 웹개발은 노마드 코더 무료 강의인 바닐라 JS로 크롬 앱 만들기로 처음 입문했습니다. 그 이후로 웹개발에 흥미가 생겨서 조금씩 공부하고 있는 중입니다.

사실 작년인가? 지난번 열렸던 콘테스트 소식을 보고 너무나 참여하고 싶었는데, 그때는 웹개발에 대한 지식이 거의 아무것도 없어서 신청조차 하지 않았습니다... 그래서 이번 콘테스트에 신청하고 순조롭게(?) 진행할 수 있을 정도로 개발 실력을 올린 것에 대해 매우 기쁩니다.

이번 목표는 필수 기능을 모두 구현하고, 약간의 추가 기능을 넣어서 제출까지 완료하는 것입니다!

- 구현한 기능 소개

• 데이터베이스에 있는 노래 정보들을 불러와 조회 수 순으로 차트에 나열합니다.

• 차트에 있는 노래 중 하나를 선택하여 그 노래의 앨범 이미지를 클릭하면 뮤직 플레이어에 그 노래가 들어가게 됩니다.

• 플레이 버튼을 누르면 노래가 재생됩니다. 또한, 진행 바, 볼륨 바를 드래그하면 노래의 재생 중인 위치를 변경하거나 볼륨을 조절할 수 있습니다!

• 조회수는 재생 버튼을 눌렀을 때 올라가게 해놨습니다.

<나머지 기능은 아직 개발 중입니다!>

- 구현 모습 스크린샷 & 깃허브 링크

[현재까지 구현된 깃허브 링크]

[재생 전 상태]

[재생 후 볼륨 변경한 상태]

- 고민

• 제일 큰 고민은 모바일 환경을 고려할지 말지.... 입니다. 일단 제일 후순위로 미뤄두고 시간이 남는다면 억지로 반응형으로 만들어야겠습니다.

• 다음으로 큰 고민은 디자인..... 클론코딩만 해봤지 직접 생각해서 만들어 본 적은 없어서 어떻게 해야 이쁘게 디자인 할 수 있을지 모르겠습니다.. 디자인도 일단 기능을 다 개발한 후 생각해봐야겠습니다.

- 공유하고 싶은 팁

유튜브로 영상을 불러왔을 때, 유튜브 자체 UI로 재생/정지, 재생 위치 조절을 하지 않고 직접 만든 버튼으로 동작하게 하고 싶으시면 Youtube Iframe API 를 사용하시면 됩니다!