refactoring web audio_player

오디오 플레이어 리팩토링기

- [email protected]

웹 기반 오디오 플레이어 .

HTML5 Audio 를 이용한 플레이어 .

웹 오디오를 만들 때 주의점 ?

웹이라서 Refresh 금지

다른 특이점 없나요 ?

그런 오디오 플레이어의개선 , 검토를

의뢰 받다 !

문제상황을 설명 듣다 .

설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명

주로 재생 중 , 다음곡 넘어가기를 여러 번 실행하면 동작이 멈춘 듯 보이다가 실행 ..,

재생 중 일시정지를 한 후 , 다시 재생을 하다가 곡 목록에서 다른 곡을 선택하여 실행하 면

바로 플레이가 되지 않고 … 한번에 여러 곡을 넘어가려고 위 화살표 버튼을 여러 번 클릭하면 , 동작이 되지 않고 멈춰 있음 ..

한참을 기다리면 , 몇번 째인지 넘어갔던 곡이 실행됨 .

동작 멈춤 현상이 간혹 재현되며 , 멈춤 현상 중 곡목록 닫기를 하거나 다른 액션 버튼이 동작하지 않음

.., PC 에서보다 모바일에서 발생 빈도가 높은 상황임 .

어느 순간부터 곡이 재생목록에 추가되지 않는다 .

설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명 설명

그냥 , " 될 때가 있고 , 안 될 때가 있다 "

개발환경을 공유 받다 .

동일한 개발서버 동일한 디렉토리에 파일을 FTP 로 올리면서 테스트 한다 .

누가 제 파일을 덮어 쓰면 어떻게 하나요 ?

" 작업하는 파일이 달라서 그럴 일은 없어요 ."

1. 기반시스템 소스코드관리시스템┃빌드시스템┃버그관리시스템┃

테스트관리시스템과 테스트 자동화툴┃프로젝트관리시스템┃요구사항관리시스템

2. 조직 프로젝트 구성원의 역할 ┃조직체계

3. 개발방법론과 프로세스 소프트웨어 개발방법론┃소프트웨어 개발 프로세스

4. 사람 인재 확보┃문서 작성 기술

5. 문화 동료 리뷰┃연구┃공유┃품질 우선┃규칙 준수┃

장기적인 관점으로 보기

• Blocked UI

• Heavy requests

• Cookie

• Polling

• Global control flags.

Blocked UI

// 회원정보function MemberInfo() {

return sendRequest("/getmemberinfo");}

Blocked UI

//ajax 리턴값받기 ( 동기 : GET)function sendRequest(url){

var oj = createHttpRequest();oj.open("GET",url,false);...oj.send();return oj.responseText;

}

Blocked UI

• “ 응답을 바로 리턴을 받는다”는 의미는 ?

Blocked UI

• “ 응답을 바로 리턴을 받는다”는 의미는 ?– 응답을 받기까지 UI 가 다른 작업을 할 수 없다 .

Blocked UI


• 문제는 ?

Blocked UI


• 문제는 ?– 웹 브라우저가 멈춘다 .

Heavy requests

• 한 곡 재생에 필요한 기본요청 6 개 • 모두 순차적으로 실행

Heavy requests

Cookie

• 쿠키는 사용자 별 정보를 힘들이지 않고 관리하기에 좋다

Cookie

• 쿠키는 사용자 별 정보를 힘들이지 않고 관리하기에 좋다

• 그렇지만 , 모든 HTTP 요청에 붙어 다닌다

Polling

• 주기가 짧을 수록 거의 실시간으로 서버와 정보를 동기화 할 수 있다 .

Polling


• 그렇지만 , 주기가 짧으면 부하가 생긴다 .

Polling


• 그렇지만 , 주기가 짧으면 부하가 생긴다 .• 음악사이트는 다른 서비스 보다 사이트에

상주하는 시간이 길다 .

기술에 대한 잘못된 이해와 활용은 심 각한 문제다 .


그렇지만 , 문제 진단만 되면 , 서핑과 시간으로 해결 될 수 있다 .

리펙토링

리펙토링

• " 코드가 작성된 후 에 디자인을 개선하는 작업 .“

리펙토링


• 왜 잘 동작하는 코드를 고쳐 ?

리펙토링


• 왜 잘 동작하는 코드를 고쳐 ?• 돌기만 하면 되잖아요 !

리펙토링

• 코드가 작성된 후 에 디자인을 개선하는 작업 .

• “ 왜 잘 동작하는 코드를 고쳐 ?”• “ 돌기만 하면 되잖아요 !”• “ 일단 대충 이렇게 하시죠”

소프트웨 개발에서는 , 디자인을 한 다음 코딩을 한다 .

좋은 디자인이 먼저다 .

그러나 ,

시간이 지나면 코드는 수정되고 ,

그러나 ,

시간이 지나면 코드는 수정되고 , 본래의 모습은 형채도 없이 사라진다 .

그러나 ,

시간이 지나면 코드는 수정되고 , 본래의 모습은 형채도 없이 사라진다 .

코드는 엔지니어링에서 해킹으로 변질된다

좋은 디자인은

지속적으로 좋은 디자인을 찾는습관부터다

HTML5 Audio Element

•http://www.w3.org/wiki/HTML/Elements/audio

http://www.w3.org/wiki/HTML/Elements/audio

http://www.w3.org/wiki/HTML/Elements/audio

<audio id="myAudio"></audio> <script>function aud_play_pause() {

var myAudio = document.getElementById("myAudio");

if (myAudio.paused) {myAudio.play();

} else {myAudio.pause();

}}</script>

쉽다 .

<audio id='Player' ...></audio><button .. onclick="Play()" > 재생 </button>

function Play() {…Player.play();...

}

실제코드 1

Player = document.getElementById('Player');...Player.addEventListener("playing", OnPlaying , true);...function OnPlaying() {

// 재생로그 ( 시작 )if (StartPlayLogFlag == false) {

PlayerLog("S", SongIDS[PlayIndex], 1, PlayLogInfo);

StartPlayLogFlag = true;}

}

실제코드 2

var SongIDS = new Array(); // 곡아이디 (배열 )var SongInfos = new Array(); // 곡정보 (배열 )var PlayIndex = -1; // 플레이순서var PlaySongID = ""; // 플레이곡var LoopFlag = false; //전체반복여부var OneLoopFlag = false; // 한곡반복여부var ShuffleFlag = false; //셔플여부var PauseFlag = false; // 일시중지여부var LibrarySongFlag = false; //좋아요여부var MemberStreamingFlag = false; // 회원스트리밍이용권여부...var PlayerLoginLayerFlag = false; // 로그인레이어표시여부var PlayerBuyItemLayerFlag = false; // 구매레이어표시여부var StartPlayLogFlag = false; // 시작로그여부var MiddlePlayLogFlag = false; // 중간로그여부var EndPlayLogFlag = false; //종료로그여부var PlayLogInfo = ""; // 로그정보var ChannelCode = ""; //채널코드var MaxCount = 200; //최대수

실제코드 3

function SongPlay(songID) { // 곡재생...

조건문의 많은 코드 조건문의 많은 코드 조건문의 많은 코드 조건문의 많은 코드 조건문의 많은 코드 조건문의 많은 코드

조건문의 많은 코드 조건문의 많은 코드 조건문의 많은 코드 조건문의 많은 코드 조건문의 많은 코드 조건문의 많은 코드...}

실제코드 4

다들 이렇게 코딩하지 않음 ?

뭐가 문제일까요 ?

<audio id='Player' ...></audio><button .. onclick="Play()" > 재생 </button>

function Play() {…Player.play();...

}

실제코드 1

Player = document.getElementById('Player');...Player.addEventListener("playing", OnPlaying , true);...function OnPlaying() {

// 재생로그 ( 시작 )if (StartPlayLogFlag == false) {

PlayerLog("S", SongIDS[PlayIndex], 1, PlayLogInfo);

StartPlayLogFlag = true;}

}

실제코드 2

var SongIDS = new Array(); // 곡아이디 (배열 )var SongInfos = new Array(); // 곡정보 (배열 )var PlayIndex = -1; // 플레이순서var PlaySongID = ""; // 플레이곡var LoopFlag = false; //전체반복여부var OneLoopFlag = false; // 한곡반복여부var ShuffleFlag = false; //셔플여부var PauseFlag = false; // 일시중지여부var LibrarySongFlag = false; //좋아요여부var MemberStreamingFlag = false; // 회원스트리밍이용권여부...var PlayerLoginLayerFlag = false; // 로그인레이어표시여부var PlayerBuyItemLayerFlag = false; // 구매레이어표시여부var StartPlayLogFlag = false; // 시작로그여부var MiddlePlayLogFlag = false; // 중간로그여부var EndPlayLogFlag = false; //종료로그여부var PlayLogInfo = ""; // 로그정보var ChannelCode = ""; //채널코드var MaxCount = 200; //최대수

실제코드 3

function SongPlay(songID) { // 곡재생...



실제코드 4


실제코드 5

" 컨트롤 변수의 조건에 따라 분기가 되고 , 객체 / 변수의 접근을 제약 할 수 없다 ."

정도를 공통점으로 꼽을 수 있다 .

왜 이렇게 되었을 까요 ?


• 익숙하지 않은 기술


• 익숙하지 않은 기술• 기획자에게 질문 할 수록 불어나는 요구사항


• 익숙하지 않은 기술• 기획자에게 질문 할 수록 불어나는 요구사항• 촉박한 일정


• 익숙하지 않은 기술• 기획자에게 질문 할 수록 불어나는 요구사항• 촉박한 일정• 어제도 야근


• 익숙하지 않은 기술• 기획자에게 질문 할 수록 불어나는 요구사항• 촉박한 일정• 어제도 야근• 나도 예전에 개발 좀 했다고 운떼는 PM/ 고참

잠시 , 조건문의 단순화에 대한 학구모드


• 객체지향에서 조건은 다형성으로 상당 부 처리가 될 수 있다 .



– 예를 들면 , Visitor 패턴

http://java.dzone.com/articles/design-patterns-visitor




• 그럼 문제 해결을 위해 객체지향적인 ? 코드로 바꿔야 하나 ?




• 그럼 문제 해결을 위해 객체지향적인 ? 코드로 바꿔야 하나 ?

• 자바스크립트는 Overloading 을 지원하지 않는다 .

조건문의 단순화를 위한 다른 몇가지 기법

조건문의 단순화를 위한 다른 몇가지 기법

•Decompose conditional

•Replace Nested Conditional With Guard Clauses

•Remove Control Flag

Decompose conditional

복잡한 조건문이 있는 경우

http://www.refactoring.com/

Replace Nested Conditional With Guard Clauses(1)

메소드가 정상적인 실행 경로를 불명확하게 하는 조건 동작을 가지고 있는 경우 .


Replace Nested Conditional With Guard Clauses(2)

메소드가 정상적인 실행 경로를 불명확하게 하는 조건 동작을 가지고 있는 경우 .


Remove Control Flag(1)

일련의 boolean 식에서 컨트롤 플래그 역활을 하는 변수가 있는 경우 , break 또는 return 을 사용


Remove Control Flag(2)

일련의 boolean 식에서 컨트롤 플래그 역활을 하는 변수가 있는 경우 , break 또는 return 을 사용


학습은 끝났는데 ,, 응용은 ?

학습은 학습일 뿐 ..

노가다로 하나씩 정리 해 보자 .

직접적인 접근 차단 .


• 자바스크립트에서 직접적인 접근 차단은 ?


• 자바스크립트에서 직접적인 접근 차단은 ?• function outer() { function inner()

{} }



{} }• inner 를 호출 하는 방법은 ?



{} }• inner 를 호출 하는 방법은 ?• new Audio() 는 뭔가요 ?



{} }• inner 를 호출 하는 방법은 ?• new Audio() 는 뭔가요 ?

– 일반적인 DOM Element 는 document 를 통해서 생성하는 것과 달리 직접 생성이 가능하다 .

잠시 모바일 환경에서 제약사항을 알아보자

iOS Safari 에서는 User action 이 없으면 음악을 자동 재생 할 수 없다 .

http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html




그럼 ,, 다른 모바일 OS 의 브라우저는

자동재생이 된나요 ?

아니 .

그러면 왜 iOS 만 언급을 ?

그러면 왜 iOS 만 언급을 ?

iOS 이외엔 browser Audio 를 잘 지원하지 않는다 .

정확히는 모바일류에서 iOS 이외에는HTML5 Audio 는 서비스에 쓸만하지 않

다 .

예를 들면 ,

안드로이드에서는 화면을 끄면 음악도 같이 꺼진다 .

홈버튼을 눌러 브라우저가 내려가는 순간 음악이 중지된다 .

물론 , 최신 버전 기준이다 .

그래서 예제에는 빠져있지만 ,

iOS 에서는 Audio 객체를 활성화시키는 다음과 같은 류의 코드가 필요하다 .

다시 Player 정리로 돌아와서 ,

이제 audio 객체에 직접 접근이 불가능 하다 .

뭐가 달라졌나 ?

앞에서 본 코드 1


• 오디오 상태 관리가 필요없다 .– 매번 Player.status() 를 통해 얻는다 .

• Audio 의 함수를 직접 호출 해서 발생되는 side effect 도 없다 .– 실제 Audio 객체가 의도하지 않은 곳에서

직접 호출되고 그 여파로 , 제어 플래그들의 값이 올바르지 않게 되고 있었다 .


• 여러 기능을 가진 Prev() 를 기억하는가 ?


• 여러 기능을 가진 Prev() 를 기억하는가 ? – 재생목록의 기능이 계속 추가되면서 걸레가 된 것이 분명 !


• 여러 기능을 가진 Prev() 를 기억하는가 ? – 재생목록의 기능이 계속 추가되면서 코드가 길어 진 것이 분명하다 .

• 재생목록은 크게 3 가지 기능을 가진다 .– 무작위재생과 순차재생 – 반복모드 – 재생목록의 변경에 따른 기타처리

셔플재생과 일반재생

• 단지 재생 순서 차이다 .


• 단지 재생 순서 차이다 .• Iterator 는 어떨까 ?

– hasNext()– next()


• 단지 재생 순서 차이다 .• Iterator 는 어떨까 ?

– hasNext()– next()

• OrderedIterator vs ShuffleIterator

또 뭐가 달라졌나 ?

PlayIndex, PlaySongID, LoopFlag, OneLoopFlag, ShuffleFlag, SongInfos, SongIDS..

등의 속성이나 컨트롤 플래그들이 사라지거나 숨겨졌다 .

그럼 , " 이전곡이 없습니다 ." 같은 UI 표현은 어떻게 하나요 ?

CSS 에 관련된 개발문제들• 웹의 장점 중 하나는 CSS를 통한 유연한 HTML Layout, 그러나 갈수록 복잡해지는 UI

• 더없이 높아진 고객 눈높이– UI 요건 변경이 자주 생김

• JavaScript 에서는 UI 변경을 위해 CSS 클래스만 추가 /삭제 하는 것이 추세

• 커스터마이징 하기가 힘든 ExtJS를 아세요 ?• 디자이너나 퍼블리셔와 개발자간 협업은

서로에게 영향이 적어야 한다

앞에서 본 코드 4function SongPlay(songID) { // 곡재생...



Pull Up Method

• 동일한 일을 하는 메소드를 여러 서브클래스에서 가지고 있다면 , 이 메소드를 수퍼클래스로 옮겨라 .

Pull Up Method


• “ 조건문 많은 코드”인데 갑자기 수퍼클래스는 무엇인가요 ?

Pull Up Method


• “ 조건문 많은 코드”인데 갑자기 수퍼클래스는 뭔가요 ?

• 모두 곡 재생에 대한 권한 처리 들이다 .– 이용권 , 19세 , 서비스 불가곡 , XXX 차감 ,

기타 .

Pull Up Method


• “ 조건문 많은 코드”인데 갑자기 수퍼클래스는 뭔가요 ?

• 모두 곡 재생에 대한 권한 처리 들이다 .– 이용권 , 19세 , 서비스 불가곡 , XXX차감 ,

기타 .• checkAutority(memberInfo, songInfo) 정도면

공통점이 된다

Task 는 이전 Task 의 결과에 따라 실행여부가 결정된다 .

결과가 false 이면 다음 task 를 실행하지 않는다 .

간단해 졌다 .


그렇지만 , 문제 진단만 되면 , 서핑과 시간으로 해결 될 수 있다 .

문제 진단 능력은 경력과 비례한다 .

코드의 디자인 능력은 노력에 비례한다 .

틈틈이 코드를 정리하는 습관을 지닙시다 .

감사합니다 .

여담• UI 를 조작하는 부분의 예시가 부족합니다 .

여담• UI 를 조작하는 부분의 예시가 부족합니다 .

– 저도 소위 , ‘ 날코딩’을 했던 터라 뺐습니다 .

여담• UI 를 조작하는 부분의 예시가 없네요 ?

– 저도 소위 , ‘ 날코딩’을 했던 터라 뺐습니다 .

여담UI 를 조작하는 부분의 예시가 없네요 ?

– 저도 소위 , ‘ 날코딩’을 했던 터라 뺐습니다 .• UI 날코딩은 대책이 없나요 ?


– 저도 날코딩을 했던 터라 뺐습니다 .• UI 날코딩은 대책이 없나요 ?

– 잘 구조화된 CSS– 템플릿 엔진 또는 프레임워크


– 저도 날코딩을 했던 터라 뺐습니다 ..• UI 날코딩은 대책이 없나요 ?


• 왜 사용 하지 않았나요 ?


– 저도 날코딩을 했던 터라 뺐습니다 .• UI 날코딩은 대책이 없나요 ?


• 왜 사용 하지 않았나요 ?– 187 request, – 1.7 MB transferred, – 5.8 s ( onload 3.08s, DOMContentLoaded 2.07s)– 이미 페이지 로딩이 너무 느려서 추가 라이브러리를

사용하기엔 다소 무리가 있었습니다 .

refactoring web audio_player

Documents