01. JavaScript Drum Kit

Learning Point

• html dataset tag에 대해 학습한다.
• queryselector를 이용하여 특정 class의 tag를 찾는 법을 학습한다.
• transitionend event에 대해 학습한다.

HTML Part

<div data-key="65" class="key">
    <kbd>A</kbd>
    <span class="sound">clap</span>
</div>

<!-- data-key="65"는 data-key라는 attribute를 임의로 추가한 것으로 생각하면 됨 -->

<audio data-key="65" src="clap.wav"></audio>
<!-- data-something으로 정의해서 사용 가능(user-defined)-->

CSS Part

.keys{
flex : 1;                    /* flex-grow : 1과 같은 의미. 즉 다 같은 크기로 늘린다. */

min-height: 100vh;           /* 100vh는 브라우저의 높이를 다 사용하겠다는 것. 
                                즉, 브라우저의 크기에 상관없이 class keys가 height를 다 사용
                                하게 해서 안쓰면 align-item : center해도 parent의 size 
                                때문에 제일 위로 붙음 */

transition: all 0.07s ease; /* 순서대로 property, duration, timing , (delay)으로 
                               모든 속성, 시전 시간, 천천히 적용을 의미 */

transform: scale(1.1);      /* 크기 1.1배 */

text-transform: uppercase;  /* 대문자로 변환 */

}

div {
    transition: <property> <duration> <timing-function> <delay>;
		/* 이렇게 단축 문법 사용 */
}

Javascript Part

function playAudio(event) {
  const key = event.key;
  const audio = document.querySelector(`audio[data-key="${key}"]`);
  const kbd = document.querySelector(`div[data-key=${key}]`);

  if (!audio) return;

  audio.currentTime = 0;
  audio.play();
  kbd.classList.add("playing");
}

function removeTransition(event) {
  if (event.propertyName !== "transform") return;
  const kbd = event.target;
  kbd.classList.remove("playing");
}

const key = document.querySelector(".keys");

key.addEventListener("transitionend", removeTransition);
window.addEventListener("keydown", playAudio);

정리

addEventListener

• EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정

Transition

• CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공
• 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 만들 수 있음
• 문법은 transition: property duration timing-function delay 이런식으로 씀(CSS code 부분 참조)
• transitionend event는 CSS transition이 끝났을때 발생. 이를 통해 javascript에서 eventhandler를 달아 끝났을때 상태를 제어할 수 있음.
  
  

Event.propertyName

• event.propertyName을 받아와서 특정 event에만 동작하게끔 코드를 만들 수 있다.

data-* attribute

HTMLElement.dataset 읽기 전용 속성은 요소의 사용자 지정 데이터 특성(data-*)에 대한 읽기와 쓰기 접근 방법을 HTML과 DOM 양측에 제공합니다.

html에서 data-* 란 class를 여러개 정의할 수 있다. javascript에서 queryseletor로 tag를 가져온 후, dataset으로 접근할 수 있다.

const exmaple = document.querySelector('.example');
if(exmple.dataset.age === 13)
  //... to do

출처 : https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/dataset

정답 코드와의 차이점

• 정답 코드에서는 keys.forEach문을 사용해서 모든 key에 대해 event를 달아 주었다.
  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
  eventListener가 많아지면 성능에 악영향을 끼칠 것 같아, 이벤트 위임을 통해 그냥 keys에만 달아서 event.target의 'playing' class를 제거하는 방식으로 진행했다.

• event.keykode 대신 event.key를 받아와서 사용했다.