프로젝트 소개
redux와 firebase database를 연습하고자 진행한 프로젝트다.
스스로 느끼기에 redux 사용이 익숙하지 않았고 redux로 API를 다뤄본적이 없어서 이번 프로젝트를 통해 경험해 보고자 했다.
컨셉
평소에 노래방을 즐겨가는데 막상 가면 무슨 곡을 부를지 생각이 안나서 노래 고르는것만 한참 걸린다. 평소에 그때그때 생각나는 노래 목록을 추가해놨다가 노래방에선 목록을 확인하던가 랜덤으로 곡을 고를수 있으면 편할 것 같았다.
UI/UX 디자인
디자인 프로토타입을 따로 만들진 않고 개발하면서 즉흥적으로 디자인했다.
button태그나 곡 정보를 보여주는 card 형태의 UI요소들은 별도의 컴포넌트로 만들어서 재사용했다. 폰트나 요소의 사이즈같은 경우는 화면 크기에따라서 반응형으로 보여진다. 노래방은 조명이 어둡기 때문에 소중한 눈👀을 보호하기 위해서 일부러 다크모드 테마로 만들었다.
디자인보단 기능 학습에 중심을 둔 프로젝트이기 때문에 style은 최대한 간편하게 구현하기 위해 tailwind라이브러리를 사용했다.
Feature
프로젝트 구조
📦src
│ App.js
│ index.css
│ index.js
├─📂api
│ firebase.js
├─📂components
│ │ Header.jsx
│ │ NewSong.jsx
│ │ SongCard.jsx
│ └─📂ui
│ Button.jsx
├─📂pages
│ Home.jsx
│ List.jsx
│ NotFound.jsx
│ Pick.jsx
└─📂store
store.js라우팅
<App> / 👉 <Home> /list 👉 <List> /pick 👉 <Pick> /잘못된경로 👉 <NotFound>
메뉴를 보여주는 Home페이지, 곡 리스트를 보여주고 추가, 삭제할 수 있는 List페이지, 랜덤으로 곡을 뽑을 수 있는 Pick 페이지, 잘못된 경로에 접근하면 나타나는 NotFound 페이지, 총 네가지 페이지로 구성했다.
리스트 불러오기
메인페이지에 접속하면 데이터베이스로부터 곡 리스트를 받아오고, 받아온 데이터를 redux store에 저장한다.
데이터베이스와 컴포넌트 실시간 동기화를 위해 firebase realtime database의 onValue API를 사용했다. onValue는 데이터베이스가 업데이트되면 자동으로 호출되는데, 호출될때마다 redux store도 최신 데이터로 업데이트해서 실시간으로 동기화 되도록 만들었다.
곡 추가, 삭제
새로운 곡을 추가하고 삭제할 수 있다. 각 작업은 데이터베이스에 반영되는데 이 때 데이터베이스가 업데이트되면서 onValue 메소드가 호출되어 리스트를 새로 불러오게 된다.
새로운 곡을 추가할때는 input에 입력한 곡 정보 외에도 id나 date값이 추가로 필요하다. 이런 데이터 가공 작업은 firebase.js에서 해서 컴포넌트는 최대한 독립적으로 존재할 수 있도록 노력했다.
랜덤 뽑기
랜덤으로 뽑을 곡의 갯수를 입력하면 해당 갯수만큼 랜덤으로 곡을 뽑아서 보여준다.
구현 과정을 보면 먼저 입력한 갯수만큼 index번호를 뽑고, 곡 리스트에서 index에 해당하는 곡 정보들을 가져온다. index번호를 뽑을 때는 번호가 중복되지 않도록 Set을 사용한다.
랜덤으로 뽑을 곡의 최대 갯수는 전체 곡의 갯수를 넘어갈 수 없다.
정보
