[JavaScript30] Day1: JavaScript Drum Kit

 

배운 점

1. return문의 활용

if (!audio) return;

return문을 사용하여 지정된 키 외의 다른 키는 무시되도록 하였다. 이를 통해 굳이 아무 요소도 담기지 않은 null값의 audio 변수를 갖고 코드를 더이상 진행하지 않도록 했고, 에러도 방지했다.

 

2. currentTime 프로퍼티

audio.currentTime = 0;

눌린 키보드 키에 연결된 드럼 소리는 잘 나왔으나, 키를 연속으로 누를 때 해당하는 소리는 연속으로 나오지 않는 문제가 있다. 그 이유는 연결된 드럼 소리 오디오 파일이 끝까지 재생되어야만 다시 소리가 나올 수 있었기 때문이다.

 

이 문제를 해결하기 위해 currentTime 프로퍼티를 사용해주었다. currentTime은 HTML의 미디어 요소(비디오나 오디오 같은)가 가지고 있는 프로퍼티인데, play() 메소드가 호출된 후에 재생이 시작되는 미디어 내의 위치를 설정해주는 역할을 한다. 그래서 currentTime의 값을 변경하면 미디어를 새로운 시간으로 찾을 수 있다.

 

3. transitionend 이벤트

키보드 키가 눌리면 해당하는 html요소가 번쩍하는 핑크 테두리와 함께 살짝 커지는 효과(.playing)가 나와야 한다. 하지만 효과가 나타난 이후 사라지지 않는 문제가 있었다.

 

이 문제는 transitionend라는 이벤트를 사용해 해결되었다. 이것은 CSS transition이 실행이 완료되면 실행된다. 만약 transition 속성이 제거되거나 display가 none으로 설정된 경우처럼 transition이 완료되기도 전에 transition이 제거된 경우에는 이벤트가 생성되지 않는다.

function removeTransition(e) {
  console.log('Transition ended:', e.propertyName);
  if (e.propertyName !== 'transform') return;
  e.target.classList.remove('playing');
}

const keys = Array.from(document.querySelectorAll('.item'));
keys.forEach((key) => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);

 

클릭했을 때의 효과는 모든 키들에 적용되는 부분이기 때문에 모든 키들을 담고 있는 keys를 불러와 forEach 메소드를 사용해 각각에 transitionend 이벤트 리스너를 등록해주었다. removeTransition이라는 이벤트 핸들러를 만들어 transitionend 이벤트 때 실행되도록 했다.

 

개선해야 될 부분

1. UI를 구현할 때 나는 거의 <div> 태그만 사용하고, <span>, <kbd> 등의 태그는 사용할 생각을 하지 못했다. 강사님의 코드를 보니 제가 무분별하게 div 태그를 사용했다고 느껴졌다. 정의된 태그를 사용한다는 것은 약속된 태그를 쓴다는 것이기 때문에 다른 사용자(개발자)가 보기에도 이해하기 쉬울 것이다. 따라서 상황에 맞는 적절한 태그의 사용이 중요하다고 생각했다.

 

2. 구현해야 될 부분을 인지하자마자 충분한 고민없이 개발을 시작했던 것 같다. 그러다보니 개발을 하던 도중 머리 속에 혼란이 와서 코드가 중간에 꼬였었다. 이러한 상황을 방지하기 위해서 플로우차트 등을 이용하여 나의 생각을 정리한 후에 개발을 시작해야겠다고 느꼈다.

 

3. 글자 크기와 같은 경우에도 나는 px을 사용하였는데, 완성을 하고 나니 최근 본 생활코딩님의 강의에서 글자는 무조건 rem!!이라고 하셨던 것이 생각이 났다. 이 이유를 다시 찾아보니 반응형 작업을 위해서 rem의 사용이 필요하다고 한다. 이 부분은 아직 와닿지 않아 조금 더 공부해야 될 부분인 것 같다.

 

 

 

 

Day 1이라서 무심코 봤다가 큰 코 다쳤다. 하지만 차근차근 구현해보고 기록해 나가는 과정이 매우 즐거웠던 것 같다.

 

 

 

 

참고 | keycode 변환 사이트

https://www.toptal.com/developers/keycode