IMG_3940 (1).jpeg

BYOM

Bring Your Own Music(BYOM) 는 친구가 만든 🎉파티🎉이다. 클럽에 갔을 때 DJ가 트는 노래에 만족하지 못해서 실제로 파티에 오는 사람들이 직접 노래를 신청할 수 있으면 좋을 것 같아 만들었다고 한다. 첫 파티에서 예상 외로 많은 사람들이 함께 했고 좋은 기회로 다른 축제에 DJ로 초청되었다.
첫번째 을지로에서 열린 파티에서 DJ 앞에 노래 제목과 가수 이름을 쓸 수 있는 노트를 두고 신청곡을 받았다. 하지만 다음번에 열게 될 파티는 좀 더 큰 규모로 진행될 예정이라 노트 하나로 신청곡을 받고 DJ들이 일일이 확인하는 건 무리라는 생각이 들었다.

그.래.서!

  1. Listener들은 실시간으로 가수, 노래 제목을 신청할 수 있다.

  2. Listener들은 다른 사람이 신청한 곡들을 플레이리스트로 볼 수 있다.

  3. Listener들은 현재 재생되고 있는 곡을 플레이리스트에서 확인 할 수 있다.

  4. DJ는 사용자들의 신청곡들을 확인할 수 있다.

  5. DJ는 현재 재생하고 있는 음악을 사용자에게 알려줄 수 있다.

    이런 기능이 있는 웹 어플리케이션을 만들고자 한다.

    사실 이걸 웹으로 만들어보자! 는 내 의견이였기 때문에 아직 구체적인 디자인도 없는 상태이고 어떤 걸 써야하는지도 정확히 잘 모르겠는 상태이다. 🤯 실시간으로 화면 reload없이 신청한 노래들이 화면에 보여져야한다. 주위 분들에게 물어보고 나도 검색해본 결과 지금 상황으로는 socket.io를 쓸 것 같긴한데 아직 정확히 셋이 어떤 차이가 있고 어떤게 이 상황에 맞는지 잘 모르겠다.

  • firebase
  • socket.io
  • pusher

5/5일에 다음 파티가 열린다고 하니 4월 30일까지로 개발 기간을 잡고 진행해보려고 한다.

사용할 라이브러리, 프레임워크

FrontEnd

  • ReactJS
  • CSS
  • Socket.io-client

BackEnd

  • NodeJS
  • Express framework
  • MongoDB
  • Socket.io

기능 및 페이지

해당 웹을 사용하는 User들은 크게 두 타입이다.

  • Listener : 파티에 와서 듣고 싶은 노래를 신청하는 사람
  • DJ : 신청곡들을 확인하고 원하는 노래를 선택하는 DJ

/About, /Projects, / 페이지로 크게 나누었고 BYOM 관련 정보, Project 화면 보다 실제로 음악을 신청하는 form과 신청 목록 list를 보여주는 것이 더욱 중요한 것 같아서 이를 제일 먼저 개발할 예정이다.
IMG_4655 (1) (1).jpeg
대충 손으로 그려본 UI이다. 안녕 곧 멋진 HTML로 만나자! 🙋🏻‍♀️

  • Nickname을 적고 들어가면 신청한 Playlist가 보이고 아래 혹은 위에 가수, 노래 제목을 적을 수 있는 form이 있다.

UX 고민들

  • 플레이리스트를 보고 있을때 새롭게 신청한 음악이 화면에 추가될 때 어떻게 방해하지 않고 보여 줄 수 있을까.
  • 마찬가지로 DJ가 계속 추가되는 음악들을 보면서 어디까지 확인했는지 표시해주면 좋을 것 같음. 굳이 다시 찾아야하는 번거로움 줄이기
  • 음악을 제한없이 계속 신청할 수 있나? 아니면 한번 보내고 특정 시간 동안 막고 그 다음 또 보낼 수 있게 하는게 좋을까 ?
  • Nickname을 적고 들어간 후 그 다음 About, Project 페이지를 중간에 방문해도 계속 Nickname을 유지하고 싶음
  • MusicInput :Artist 적은 후 자동으로 Title로 커서 이동 가능한가

개발 프로세스 및 계획 기간

04.12~14

  • 일단 데이터가 있다는 가정하에 componentDidMount에서 data를 가져오는 것 부터 먼저 하기
  • 그 다음에 어디서 emit하고 on할지 정하기
  • socket으로 music 보내기, 받기 기능 구현

04.15~19

  • DJ 화면 만들기
    • 제목이나 가수 이름을 수정이나 삭제할 수 있도록 어떻게 권한을 줄 수 있을까 ?

19~21

  • 1차로 배포 해보기

21 이후

추가적인 UX들 기능 구현

BYOM 개발 참고글

참고 튜토리얼

React Router 개념

참고 : [React.JS] 강좌: 리액트 프로젝트에서의 라우터, React-router v3 사용하기

React-router를 사용하는 프로젝트에서는 어떤 경로로 들어오던 똑같은 html 파일과 자바스크립트 파일을 제공한다. js 파일에 web application에서 사용 할 모든 컴포넌트들이 담겨있고, 각각의 URL에 따라 지정된 컴포넌트를 렌더링 해준다. 그리고 페이지가 한번 로드된 다음, 다른 페이지로 이동 될 때 마다 페이지를 처음부터 로딩하지 않고 기존에 불러왔었던 자바스크립트 파일을 이용하여 페이지에서 기존 컴포넌트를 언마운트 시키고 다른 컴포넌트를 마운트한다.

React Router 참고 예제!!