개발자 99% 커뮤니티에서 수다 떨어요!
최종 배포 URL : https://romantik.fly.dev/
안녕하세요! 독일에서 피아노 공부를 했지만 석사 졸업 후 개발자가 되기 위한 아우스빌둥(이원식 직업교육)을 하다가..! 최근에 이직에 성공해 곧 duales Studium(dual study)를 시작하는 Hyeon입니다. 프론트엔드 개발자를 목표로 공부중입니다! 사실 몇 개월 전에 코태기가 와서 코딩을 때려치려했다가 멜론 챌린지를 시작하게 되었는데... 사실 백엔드를 다뤄본적이 없다보니 초반에는 너무 맨땅에 헤딩하는 기분이라 거의 포기할 뻔 했습니다 😭 그랬는데 이렇게 끝까지 왔네요! 그동안 멜론클론 코딩 컨테스트를 하며 코태기도 극복했고 새로운 직장에서 자리도 받고 ㅎㅎ 행복한 나날을 보내는 중입니다! ☺️
검색기능
저번에 중간제출 때 올렸던 차트 기능 이외에 위 스크린샷에서 보이는 것 처럼, 검색기능을 구현하였습니다. 일반 검색도 가능하고 저렇게 카테고리별로도 자동검색이 가능하게 만들었습니다.
위 스크린샷은 카테고리별 검색을 했을 때 나오는 결과입니다.
일반 검색을 하면 검색 결과가 리스트로만 나오지만 카테고리를 눌렀을 경우에는 이렇게 해당 작곡가나 해당 시대의 설명을 같이 볼 수 있게끔 하였습니다.
라이브러리
라이브러리에서는 유저가 만든 라이브러리를 볼 수 있습니다. 좋아요를 누른 건 좋아요 라이브러리에 따로 들어가있고 각각 라이브러리에는 유저가 담은 곡들을 볼 수 있습니다.
라이브러리 커버는 유투브 뮤직에서 영감을 받아 네 칸 나열을 해보았습니다. 사실 개수별로 칸 나누는 걸 다르게 하고 싶었지만 시간이 부족하여 그것까지 구현하진 못하였습니다 ㅜㅜ
그래도 소소하게나마 라이브러리 편집 시 마치 아이폰같은 부들부들 애니메이션을 추가해보기도 하였습니다! ㅎㅎ
플레이어
플레이어에서는
반복재생(한곡반복, 플레이리스트반복) 및 랜덤재생,
다음곡/이전곡 재생,
재생/일시정지,
현재 플레이리스트 보기/삭제,
라이브러리에 들어갈 플레이리스트 추가 및 플레이리스트에 곡 추가,
좋아요 누르기,
음량조절
을 할 수 있습니다.
유저가 좋아요를 눌렀던 곡을 재생 시 좋아요 버튼이 활성화 되게 하였고
로그인을 안 하고 음악을 들을 시 1분까지만 들을 수 있게끔 하였습니다!
다른 메뉴로 이동 시 플레이어가 새로고침 되어 노래를 이어 들을 수 없는 부분이 정말 거슬렸는데요, fetch로 main 태그 부분만 새로고침되도록 하여 끊임없이 음악을 감상할 수 있도록 만들었습니다.
홈화면
홈에서는 먼저 사용자가 들었던 곡의 히스토리를 불러와 가장 상단에 시간 역순으로 나열하였습니다.
그다음은 접속 시간대(아침, 낮, 저녁) 에 맞는 곡들이 자동 추천되도록 하였습니다.
그 밑으로는 조회순별로 나열되는 차트가 있고 유저들이 만들어 놓은 플레이리스트를 볼 수 있는 구역도 있습니다.
부랴부랴 제출하느라 정신이 없네요 흑흑
코태기였던 저에게 다시 코딩을 공부할 수 있는 용기와 희망을 심어준 컨테스트였습니다!!!
mongoDB, node js 전부 처음 다뤄보는 것이었고 그렇게 시작한만큼 중간에 힘들고 지치고 짜증나는🤯 순간들도 많았지만 그래도 하나하나 해결해가면서 성취감과 즐거움을 느낄 수 있었습니다.
혹시 저처럼 제로베이스에서 컨테스트 참가 망설이시는 분들이 있다면
그냥! 지금! 당장!! 도전하라!!!고 말씀 드리고 싶습니다.
3주동안 정말 재밌었습니다!
다음에 또 재미있는 컨테스트 때 보아요!