01 - JavaScript Drum Kit - FINISHED

개요

 

- 실습의 시작점이 되는 index-START.html, style.css 를 따라 타이핑하고, 이해해보았음

- 이제 동영상 강의를 보며 따라해보고, 정리하자.

 

동작

 

index-FINISHED.html 파일을 크롬 브라우저에서 열어서 완성된 동작을 확인해보자.

- F12 를 누르면 크롬의 DevTools 가 열린다.

 

1) A S D F G H J K L 키가 화면에 보인다. - 스타일은 sytle.css 에 정의되어 있는 .key 이다.   2) 그런데 클릭을 해주면 - 스타일이 playing 이 되고 - 소리가 한 번 울려주는 것이다.   - 오른쪽의 큰 빨간 네모가 키 영역들이다. - 키를 누르면 class 부분이 key 에서 잠시 playing 이 되었다가 다시 key 로 돌아오는 게 보일것이다.

 

JavaScript

 

이제 준비된 재료들로 드럼이 동작하게 해보자.

 

	키를 누르면 알아채는 리스너를 하나 만들어보자.   1) keydown 을 가지하는 리스너이고, 받은 event 를 바로 콘솔에 뿌리게  하였다. 2) 아래 콘솔로그처럼 a, s, d, f 를 눌렀을때 받은 이벤트 정보가 나온다.
	이벤트 e 는 많은 값을 가지고 있고, 키 코드만 보려면 e.keyCode 만 뿌려주면 된다.
	우리는 audio 태그의 data-key attribute 에 우리가 반응할 a, s, d, f, g, h, j, k, l 의 keyCode 값을 넣어두었다.   그럼 key-down event 가 들어왔을때 누른 key 의 keyCode 가 audio 태그의 keyCode 에 있는지 알아보자. (왼쪽의 코드이다.)   Console 에는 keyCode 가 있을 경우에는 해당 audio 태그가 들어있고, 없을 경우에는 null 이 출력된다.   코드를 조금만 더 들어다보자. document - 링크: https://goo.gl/Gu5JBF - 브라우저가 불러온 웹페이지 객체 자체를 의미한다. document.querySelector() - css Selector 로 선택할 수 있게 해주며 - Selector 로는 id, class, 태그명[속성명=속성값] 등등을 쓸 수 있다. → 여기서는 태그명[속성명=속성값] 을 사용한 것이다.
	1) 매칭되는 keyCode 가 없으면 바로  리턴해버리고, 2) 매칭이 되면 audio.play(); 만 실행해도 소리가 나는 것을 확인할 수 있다.   - 그런데, 같은 키를 연달아 누르면 바로 소리가 나지 않는다.
	audio.currentTime = 0 만 먹여주면 된다. 이미 play 중인 오디오 파일도 현재 play 되는 시간을 0 second 로 되돌려 주는것이다.
	지금까지는 특정 키를 눌렀을때 그에 해당하는 소리가 나게 했다. 이번에는 덩달아 키의 모양에 변화를 줘보자. .key → .playing 으로 바꿔주는 것이다.         .key 에서 data-key 의 값과 e.keyCode 가 매칭되는 녀석을 찾고, 그 key 에 playing 이라는 class 를 추가해주면 되는 것이다. → .key 의 transition: all .07s ease; 가 먹히며 변경되는 것이다.   그런데 .key → .playing 으로 스타일이 transition 하며 변경하는 것 까지는 좋은데 원래대로 돌아오지 않는다.   key.classList.add() 로 스타일을 추가해주는 것은 마치 포토샵의 레이어를 올린 느낌이다. 이렇게 추가해준 스타일 "레이어"를 classList.Remove() 로 날려버려야 하는 것이다.
	원래대로 돌아오게 하려면, Transition 이 끝나는 걸 확인하고, 그때 되돌리면 될것 같다.   1) 우선 모든 .key class 를 사용하는 녀석들을 모두 찾아서 2) 그 놈들 모두에게 addEventListener() 를 해주는데 3) 'transitionend' 일 경우에 removeTransition() 콜백 함수를 실행하게 하는 것이다. 4) removeTransition() 함수는 일단 event 를 console 에 뿌려주게 했다.               그랬더니 한번 클릭에 난리가 나버렸다. 무려 6개의 transitionend event 가 발생.   propertyName 이 - border-left-color - border-right-color - border-top-color - transform - box-shadow - border-bottom-color   인 녀석들 모두 transitionend 가 일어난 것이다. 이중에 transform 만 감시하면 될 것 같다.
	e.propertyName 이 'transform' 인 경우에만 'playing' class 를 remove 해주니 문제 해결! 구현 완료.   console.log(this); 를 해보니 역시 .key 를 사용하는 div 태그였다.
	정말 최종. 콜백 익명함수를 playSound() 함수로 따로 뺐다. Wes Bro 가 선호하는 방식. 이게 알아보기 쉽기는 하다.

 

 

마무리하며

 

이번에는 하나씩 따라하며 동영상의 단계를 모두 정리하였지만,

다음에는 이렇게까지 할 필요는 없지 싶다.

많이 배우고 나름 즐거웠다.