App에서 Player를 떼어내다.
전에 만들었던 Music Player를 다른 개발자에게 보여줬다. 클라이언트 쪽을 보자고 했다. 보여줬더니 App에서 Player 기능이 같이 있어서 정확히 App이 어떤 역할을 하는지 구분이 가지 않는다고 했다.
핵심은 기능이 하나의 기능을 가지고 있어야지 여러개를 가지고 있으면 안된다는거~!
이 기능을 어떻게 정의 하느냐에 따라서 달라지는 거 같다. App에 header, footer, main을 한 군데 모아 놓는다. 근데 거기에 Player 기능까지 있어서 App의 역할이 모호해졌다.
App과 분리 시켰다. 어떻게 했냐면 먼저 Player가 왜 생겼는지부터 접근 해야한다. 왜 생겼냐면 페이지가 이동해도 음악이 나오게 하는게 목적이었다. App이 component을 한 곳에서 관리하니깐 Player를 만들면 딱 좋겠다 싶었다. 다시 생각해 보니깐 App에서 관리할 필요가 없었다. main component에서 관리하게 하면 페이지가 바뀌어도 음악이 나온다. 새로운 파일 Manager 파일을 만들고 player 기능을 옮겼다. App이 아주 깔끔해 졌다. 오늘 수정했던걸 기억하고, 또 기능별로 분리하는 방법에 대해 생각해야겠다.
api 폴더를 만들고 각 api를 분개 해줬다.
api 파일 하나에 albums, albumsDetail 데이터 가져오는 function을 한 곳에 적었다.
api 폴더를 만들고 albums, albumsDetail 파일을 하나씩 만들었다. 만들고 보니 하나의 폴더 안에 다른 종류의 데이터를 가져오는 파일을 생성하니 깔끔해 졌다. 무엇보다 쉽게 파일을 찾을 수 있다는 이점이 생겼다.
오디오 플레이어에 stop 기능 추가.
플레이어 기능이 pause, play 기능이 있다. 다른 개발자 분께 보여드리니 stop 기능이 없어서 아쉽다고 했다.
음악 플레이 시간을 이용해서 stop 기능을 구현했다. 메소드를 통해서 최근 시간을 알 수 있다. currentTime을 0으로 바꾸면 처음으로 돌아가서 stop 기능이 된다. 구현하다 보니 일시정지 버튼과 멈춤 버튼의 css 동작이 똑같았다. 똑같은 동작을 하게 되면 사용자가 헷갈리거다. 뭐가 멈춤이고 뭐가 일시정지 일때 다른지......
currentTime을 state에 추가했다. state에 있는 currentTime이 "0"이면 멈춤버튼이 사라지고 "0" 보다 크면 일시정지 버튼과 멈춤버튼이 함께 보이게 만들었다.
이렇게 하고나니 음악플레이어에 시간을 표시하고, 진행정도도 보여주고, 음량도 조절할 수 있게 해보고 싶다. 이걸 추후에 추가 해볼거다.
