오늘 한 일:

• React: music-player
  • Horizontal slider 리팩토링
  • dummy 뮤직 코어 생성
  • Play and Pause 기능 추가

내일 할 일:

• prestoMusic: VueJS를 이용해 웹 스킨 제작
  • 컨트롤러
  • 동적 앨범 뷰
  • chrome slider component 스타일 변경
  • 레이아웃: 서치바 이동, 메뉴 리스트 변경(플레이리스트, 앨범, 아티스트, 장르)
  • 앨범 선택 시 레이아웃 및 애니메이션

React

music-player

dummy 뮤직 코어 생성

기능

• Play: 현재 시점을 기준으로 지속적으로 millisecond를 리턴한다
  • bind된 함수를 지속적으로 호출하여 millisecond를 넘겨주도록 한다
• Pause: millisecond 리턴을 중지한다
• End: 재생의 끝을 알림
  • 동시에 pause를 해야함
• Set: currentTime을 재설정함

설계

class DummyCore {
    constuctor(music) {
        this.music = music
        this.currentTime = 0;
        this.intervalID = null;
        this.onReturnCurrentTime = null;
        // {runningTime: 200000}
    }
    play() {
        this.intervalID = setInterval(() => {
            this.currentTime += 1000;
            if(this.currentTime > this.runnigTime){
                this.currentTIme = this.runningTime
                this.pause();
            }
            else this.onReturnCurrentTime(this.currentTime);
        }, 1000);
    }
    pause() {
        clearInterval(this.id);
    }
    set(time) {
        this.currentTime = time;
    }
}

dummy 뮤직 코어와 연결

promise 사용해서 setState 비동기 메소드의 순서를 정함

componentDidUpdate(prevProps[, prevState[, snapshot]]): 부모 컴포넌트에서 자식 컴포넌트를 리렌더링 할 시 자식 컴포넌트에서 사용해야 업데이트 된다

Play and Pause 기능 추가