멜론 클론코딩 최종 제출 <LEMON>

최종 결과물 배포 URL : https://lemon-player.fly.dev/

깃허브 : https://github.com/hwangJN/lemon_player

드디어 3주 간의 챌린지가 끝이 났네요!

MongoDB, Pug, 배포 등 모든 것이 처음이고 낯설었던 저에게는 매우 짧은 시간이었습니다..😭

처음으로 서버도 만들어보고.. 데이터베이스도 만져보고.. 온갖 문제에 부딪힐 때마다 이것저것 공부해보고 해결해서 배포까지 결국에 끝냈다는 성취감이 컸고 저에게 정말 좋은 경험이 된 것 같습니다 ㅎㅎ

본격적으로 저의 멜론 클론코딩 프로젝트 <LEMON>를 소개하겠습니다!

1. 메인화면

우선 메인 화면은 좌측 고정 메뉴, 뮤직 플레이어, 최신 앨범, 메인 차트(Top 8), 뮤직비디오, 전체 차트로 이루어져 있습니다.

좌측 고정 메뉴에서 차트, 앨범, 뮤직비디오를 클릭하면 메인 페이지에서 스크롤이 스무스하게 이동하는 정도로 구현했습니다.

(처음에는 각 페이지 라우터를 만들고자 했었지만 아무래도 뮤직 플레이어이기 때문에 메인 페이지를 거의 벗어나지 않는 선에서 구현했습니다.. )

차트는 과제 2 내용과 같이 Play 가 높은 순서대로 정렬되게 했습니다. (메인 화면에서 노래 클릭(재생)시에만 play 수가 업데이트 되고 개인 플레이 리스트에서 재생할 땐 업데이트 되지 않습니다)

뮤직비디오는 클릭 시 modal 형태로 나타나도록 간단하게 구현했습니다

2. 뮤직 플레이어 + 플레이 리스트

메인 화면에서 노래를 클릭하면 플레이어에서 해당 곡이 자동으로 재생되고, 플레이 리스트에 노래가 올라가게 구현했습니다.

뮤직 플레이어에서는 볼륨과 play&pause, prograss bar를 자유롭게 조절할 수 있고, 로그인 한 유저에 한해 노래를 찜 할 수 있는 하트 아이콘도 넣었습니다

노래를 재생하면 자동으로 플레이 리스트에 노래가 올라가므로(중복 담기 가능) 재생하는 순간 플레이리스트가 노출 되게끔 구현했고 필요에 따라 좌측 메뉴에서 접근할 수 있습니다.

리스트 안에 담겨있던 곡 삭제 또한 가능합니다. 현재 재생 중인 곡이 삭제되면 자동으로 다음 노래가 재생됩니다. 강제로 다음 곡, 이전 곡을 재생할 수 있고, 현재 재생되고 있는 노래가 끝나면 자동으로 다음 노래가 재생됩니다. (음악 app의 전체 반복 기능과 비슷한 느낌입니다!!)

위 gif 에서 보시다시피 로그인을 하지 않은 사용자도 노래 재생이 가능하며

일시적인(?) 플레이 리스트도 이용할 수 있게 구현해 두었습니다. (당연히 새로고침 하면 사라집니다)

유저의 개인 플레이 리스트를 저장하기 위해 로그인/회원가입 기능도 이어서 구현했습니다.

3. 회원가입 / 로그인 / 마이페이지

로그인 페이지에서 로그인 혹은 회원가입을 진행할 수 있습니다.

회원가입 시에 아이디 중복 여부 정도만 체크했고 유저 비밀번호는 bcrypt 라이브러리를 통해 암호화하여 DB에 저장되게 구현했습니다

회원가입을 마치면 자동으로 로그인 되며 마이페이지 공간에서 프로필 사진 & 닉네임을 변경(Multer 사용)할 수 있습니다.

또한 유저가 찜한 노래도 목록으로 나타나게 했습니다

그리고 위에서 언급했다시피 로그인한 유저는 개인 플레이 리스트가 유지 됩니다

—

챌린지 후기(?)

처음 블루프린트를 받자마자 이게 뭐지? 할 정도로 저에게는 너무 낯설고 말 그대로 real 챌린지 였어요. 이해하는 과정에서 포기 위기가 여러 번 왔었지만 어찌저찌 노력해서 여기까지 와버렸습니다🙂 마지막까지 반응형도 최대한 해보고…(여전히 마음에 들지 않아요ㅜ.ㅜ) fly.io도 하루종일 말썽이고 정말 끝까지 순탄하지 않았던것 같아요. 여러가지 부가기능(노래 검색 기능 등) 도 계획했었는데 도저히 시간이 나지 않더라구요.. 초보 주제에 욕심이 과했나 봅니다😭코드 정리와 문제점 해결 등 아직 많은 것들이 제 숙제로 남아있긴 하지만 그래도 결과물이 어떻든 제가 뭘 모르고 있었는지 알 수 있게 해준 소중하고 뜻 깊은 경험이었어요.

좋은 경험 만들어주신 노마드코더 정말 감사합니다~!!!