SoundCloud Copy하며 Vue 익히기 #01

Vue Music Player :D

:DALI
:DALI
Oct 9, 2018 · 10 min read

안녕하세요 달리입니다:ㅇ

이 글은 제목 그대로 SoundCloud 페이지를 따라해보며 Vue Js를 익혀보고

그 과정을 정리해보면 재밌지 않을까 해서 시작을 한 글입니다. 음 네..네

Vue /Front-end 완전 초보자 이기 때문에 많은 피드백 관심 부탁드립니다.

그러면 Vue로 작업 처음 하시는 분들에게 도움이 되시길 바라며 시작해보겠습니다.

1. Set up by Vue@cli

Vue도 React CRA 와같은 project환경 세팅을 도와주는 Vue@cli가 있어서 편하게 빌드세팅을 할 수 있었습니다.

현재 Version은 3.0 이네요

npm install -g @vue/clivue create vue-musicPlayer(projectName)

default Mode를 선택했습니다.

설치하고 프로젝트 폴더로 이동하여

npm run serve  // 개발 locallhost 를 돌리며 작업할 때 명령어 입니다.

1.2 SASS

React에서는 이번에 CRA v.2 부터 지원되는 sass도

vue에서는 이미 먼저 css전처리기들을 따로 설정없이 필요 모듈만 설치해주면 지원이 가능했었습니다 :D

npm install -D sass-loader node-sass

2. Component Design

SoundCloud Copy Cite로 우선 핵심 적인 부분인 Player를 디자인 해보려 합니다

오늘 작업해볼 부분은 Footer 에 Player부분입니다 :D

Header (Home,Collection)Nav SearchForm, Avatar, Dropdown…

MainSection MainMenuTab, MusicListView, MusicListItem,

Side는 험 큰 그림으로 나누기도 매우 복잡해 보이네요 ;ㅁ;

(추후에 … 나눠보져) 자 그러면 핵심일 것 같은 Footer Player를

우선 작업해보려 합니다.

Footer/Footerd Player

Footer안에 Player에는 ButtonList 
-Play Pause Btn , nextBtn, PrevBtn, Shuffle, continuous button
- Timer
- ProgressBar
- Music ThumbnailBox

어떻게 컴포넌트들을 나누고 조합할지가 늘 고민인 것 같습니다 T.T

한 곳에 크게 크게 작성을 하고 다른데서도 쓰일 것 같은데가 생길 때 Component로 분리하는 작업을 하는 것이 좋지 않나 싶네요

2.1 CheckList 작성

다음으로 생각나는데로 체크리스트를 작성해보았습니다.

1.ButtonList 는 -Play Pause Btn , nextBtn, PrevBtn, Shuffle, continuous button으로 이루어져 있다.

button Image교체는 기능 우선 적으로 한 후에 수정해보도록 하겠습니다 우선 Text로 동작 위주로 진행을 하였습니다.

2.1 Play Button을 누르면 Pause Pause Button을 누르면 PlayButton으로 바뀐다.

2.2 PlayButton을 누르면 음악이 재생된다.

재생 Flow 작성2.2.1 음악이 재생되면 PlayEvent발생
2.2.2 MusicLib객체 현재 음악 Play
2.2.3 Music객체Play->TimerStart -> Timer
2.2.4 ProgressBar width Update
2.2.5 시간이 다 됬을지 다음으로 자동 재생

2.3 PauseBtn을 누르면 음악이 일시정지 된다.

Pause2.3.1 음악 객체에게 알려서 일시정지를 시키고 음악시간과 ProgressBar진행을 일시정지 시킨다.

2.4 NextBtn을 누르면 다음 곡이 재생 Flow에 따라 시작된다.

2.5 PrevBtn을 누르면 이전곡이 재생 Flow에 따라 시작된다.

2.2 CheckList 실행

Vue template 문법

Vue tempalte문법은 각 tag별로 영역을 담당하고 있어서 직관적 이였습니다

저 처럼 React를 해보신 분이면 이렇게 대응시키면 더 이해하기 쉬운 것 같습니다.

data는 state처럼 component가 유동적으로 다루는 data를 나타내고 그 조작은 methods를 통해서 하게 됩니다.

methods내에서는 this.property를 통해서 data에 바로 접근가능하게 해주는데 이런 점도 Vue의 문법이 주는 편의성이 많다는 생각이 들었습니다 (반면에 React는 this.state 로 접근을 해주어야 하고 … immutable과 속성값을 바꿀 때는 setState methods를 활용해서 상태변화를 해주어야 하는데 … 조금 번거롭긴 합니다 ;;;;)

style은 lang으로 scss ,sass등을 선택할 수도 있고

style tag는 말 그대로 component style을 다루고

  • lang으로 scss ,sass등을 선택할 수도 있고
  • scoped속성을 통해서 해당 컴포넌트 scoped만 줄 수 있게 처리도 해줄 수 가 있습니다:D
1.template(html) html 2.script (data조작) data를 메소드나 computed를 통해서 조작하여 vue에 뿌려줍니다 3.style 말 그대로 style다루는 영역template -> jsx 
script-> method, state
style-> css, sass

1.ButtonList 는 -Play Pause Btn , nextBtn, PrevBtn, Shuffle, continuous button으로 이루어져 있다. [O] html markup

2. 1. Play Button을 누르면 Pause Pause Button을 누르면 PlayButton으로 바뀐다. [O]

이벤트 핸들링

간단하게 PlayButton이 클릭되면 Pasue Button Text로 바뀌는 부분을 작업해보겠습니다.

기본적으로 바닐라에서 하는 방법과 유사합니다.

  1. Dom에 이벤트리스너를 달아서 리슨하고 Vue에서는 @click 이런식으로 리스너를 달아줍니다 :D
<li>        
<button @click="handlePlayPauseButtonClick"> {{this.playPauseButtonText}}
</button>
</li>

2. handlerName(handlePrevButtonClick)을 methods나 Computed에 Methods 네임을 적어줍니다.

바닐라 el.addEventListener(‘click’, handler)React onClick={handler}Vue @click=”handler”

문법만 약간 다르지 비슷한 것 같지유

개인적으로는 프레임워크 (리액트는 라이브러리라고 하긴 하지만 …)들과

바닐라 의 가장큰 차이는

컴포넌트 안에서

DOM조작을 따로 할 필요가 없는 점과 그 조작에 따른 변화도 필요한 상태관리를 data나 state를 통해서 안에서 처리하기 때문에 너무 편하게 View-Model 변화를 이끌어낼 수 있다고 생각합니다.

이래서 현재 프론트엔드 개발은 FrameWork 위주의 개발이지 않나 생각합니다.

Mustache template문법

{{this.playPauseText}}

data의 Property는 this로 바로 접근 가능합니다 :D

template안에서 script data를 {{Mustache}}문법을 통해서 읽어 올 수 있습니다.

<li>        
<button @click="handlePlayPauseButtonClick"> {{this.playPauseButtonText}}
</button>
</li>

결과 클릭 했을 때 pause로 바뀌는 것을 확인 할 수 있습니다 :D

이제 음악이 실제로 실행되는 부분을 연결시키기 위해서 가상

Mock음악 Core객체를 만들고 window 전역에 바인딩 하도록 하겠습니다 :D

2.2 PlayButton을 누르면 음악이 재생된다.

Mock음악 객체 만들기

가상 음원 객체 library를 만들어 줍니다.

실제 Player객체 역할을 해줄 객체이지요

html5에 audioEl를 Vue Component 위에 추가 시켜줌으로서

play, pause, currentTime등 실제 api와 유사하게 동작 시킬 수 있어서 audioEl를 mock MusicPlayer 객체로 이용하려 합니다 :D

이 객체는 전역에서 접근 가능하게 app.js에서 window에 property에 추가를 하엿습니다

const musicLibrary = new MusicLibrary('#mockAudio');window.musicLibrary = musicLibrary;

상대적으로 쉬운 next / Prev 버튼 메소드들도 작성해보록 하겠습니다

idx설정 setting Play순으로 실행이 되도록 설정을 해놓고 button이 클릭되면 이 메소드들이 실행되도록 설정을 해놨습니다 :D

핵심 플레이 기능을 구현해봤네요

Methods & Event Handler

위의 그림과 같이 Methods에서 playPauseText 를 조작해서 재생버튼을 바꾸어 주었습니다. 간단하게 이벤트가 발생했을 때 메소드를 통해서 data를 조작해주고 그 결과 값을 template에 출력해주었습니다

이제 음악 객체와 Player 이벤트들을 아래와 같이 연결 시켜주기만 하면

2.2 PlayBtn을 누르면 음악이 재생된다.[O]

2.3 PauseBtn을 누르면 음악이 일시정지 된다. [O]

2.3 PauseBtn을 누르면 음악이 일시정지 된다. [O]

2.4 NextBtn을 누르면 다음 곡이 재생 Flow에 따라 시작된다. [O]

2.5 PrevBtn을 누르면 이전곡이 재생 Flow에 따라 시작된다. [O]

내용에 비해 글이 너무 장황해졌네요.

그리고 음악 소리랑 PlayPause Text만 바뀌니까 많이 심심하네요

다음 편에서는 현재 Play되는 음악에 따라 Cover Image와 Text들이 바뀌는 부분과 ListRendering을 다뤄보도록 하겠습니다 :D

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade