2021.08.28 TIL(뮤직플레이어 앱 만들기)

Web 기반 뮤직플레이어 간단 앱 만들기

인프런에서 '파이널 코딩 테스트'를 듣고 있는데, 거기서 나온 문제 중 하나다. 구현해야될 핵심 기능은 다음과 같다.

• API로 부터 Top5의 음악 정보를 전달 받아야 한다.
• Top5를 득표 순으로 나열
• 10초 빨리 감기, 10초 되감기 기능이 있는 플레이어 뷰
• 검색 기능

내가 완성한 뮤직 플레이어는 다음과 같다. React.js 이용해서 구현했다. 불러올 데이터 양도 적고, 관리할 상태도 많지 않아 redux는 사용하지 않았다.

 

강의 들으면서 수정한 내용

folder structure

index.js에 이런 식으로 넣으면,

export {default as removeMusic} from './removeMusic';
export {default as addMusic} from './addMusic';
// const export와 같다.

다음과 같이 깔끔하게 처리가 가능해진다.

import {removeMusic, addMusic} from 'index.js'

이랬던 과거를...

import Header from './components/Header';
import Main from './components/MainList';
import Tab from './components/Tab';
import Playlist from './components/Playlist';
import Search from './components/Search';
import Splash from './components/Splash';

다음과 같이 적용해본다.

import { Header, Splash, MainList, Playlist, Search } from './components';

 

 

App structure

AS - IS

• App
  • Main
    • PlayView
  • Playlist
  • Search
    • PlayView

음악의 재생과 정지와 같은 모든 음악에 대한 컨트롤은 PlayView자체에서 컨트롤했다. PlayView에서 화면이 나오면 음악도 자동으로 정지되게 구현했다. 그러나 내가 사용하는 음악 앱을 생각해보니, 그 플레이 조정 화면에서 나왔다고 하여 음악 재생이 멈추지는 않았다. 따라서 구조를 조정할 필요가 있다고 느꼈다.

 

 

 

TO - BE

• App
  • Main
  • Playlist
  • Search
  • PlayView

이처럼 Main과 Search에 종속되었던 PlayView를 App 밑으로 꺼내놓았다. 따라서 재생해야될 음악에 대한 정보의 흐름도 변경되어야 했다. 기존에는 Main에서 재생할 음악을 클릭하면 바로 PlayView에 넘겨주었는데, 변경된 구조에선 Main -> App -> PlayView로 데이터가 올라갔다 내려가야 했다.

대단히 복잡한 구조의 앱이 아니고, 관리해야될 상태도 많지 않기 때문에 상태관리를 하는 Redux나 Apollo를 쓰지는 않을 것이다. 데이터를 올려보냈다가 다시 각각 필요한 컴포넌트로 내려보내는 데이터 구조를 유지하기로 했다.

 

 

완성작

계속 수정해야될 내용이 남았지만 => git repository는 이곳으로