01. JavaScript Drum Kit

프로젝트 소개

• 이 상태의 초기화면에서, 키보드 입력 값을 받아, 미리 준비된 대응하는 audio 파일을 재생 및 해당 버튼 CSS transform 효과주기

코드 작성 순서

1. 윈도우 객체의 keyCode 값을 받아서, play 함수 실행하는 addEventListener 추가
2. play 함수는 (1) 키코드와 동일한 오디오를 play 하는 것과 (2) 상응하는 div의 css를 변형시키기 위해 classname을 추가하는 부분으로 구성
3. play 함수 실행종료(transitionend) 후에는, classname 제거하여, css 초기화 (모든 .key 객체에 이벤트 리스너 붙여놓고, this로 받아 실행한 대상에 대해서만 classname 제거)

배운 것들

data-* 속성 (HTML)

: data- 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줌.
: data-라는 속성으로 코드의 구분이 명확해지며 getAttribute()메소드가 아닌 dataset 속성을 통해 읽기, 쓰기가 가능
: queryselector로 접근하는 경우 [data-name = "asdf"]식으로 가능

출처: https://coding-restaurant.tistory.com/231

background (CSS)

: 아래와 같은 속성들을 한꺼번에 정의 할 수 있음
: background에 대한 속성은 거의 이 한 가지로 정리하는게 코드를 줄일 수 있을 듯
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size : 'contain', 'cover', 'auto' 등

• 사용예시

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");

align-item (CSS)

: flex-box에서 cross-axis 방향을 정렬 방법
: stretch, center, start, end

transition (CSS)

: 아래 속성에 대하여 한번에 정의 가능한 속성
: 여러 property에 대해 정의할 경우, ','로 구분하여 연속 기재
transition-delay
transition-duration
transition-property
transition-timing-function

ClassList

:element의 클래스 목록에 접근하여 변환
:.add로 class를 추가, 혹은 .remove로 제거 가능
https://kimtaekju-study.tistory.com/85

이벤트 객체 ('e')**

: 이벤트가 발생되면 이벤트에 매개변수로 넘긴 콜백함수가 호출되는데, 이때 매개변수로 event 객체를 넘겨줌
: 이 event 객체의 프로퍼티에는 이벤트 발생 시 얻을 수 있는 정보가 들어 있으며 이벤트 모델의 전파 과정을 컨트롤할 수 있는 메서드와 브라우저의 기본 동작이 발생하지 않도록 하는 메서드가 포함
https://webclub.tistory.com/490

Array.forEach

: 끝을 지정해주는 다른 반복문과 달리, 인자로 들어온 itrable-item의 내부 인덱스 끝까지 알아서 순환을 해주는 반복문
https://dydals5678.tistory.com/66

template literal ('${}')

: 문자열(string) 내에 표현식을 기재 가능 (보간-interpolation 기능)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

최종 코드

function playsound(e) {
 const audio = document.querySelector(`audio[data-key = "${e.keyCode}"]`);
 const key = document.querySelector(`.key[data-key = "${e.keyCode}"]`);
 
 if (!audio) return;
 audio.play();
 audio.currentTime = 0;
 // console.dir(audio);

 key.classList.add('playing');
}

function removeClass(e) {
 // console.log(this);
 this.classList.remove('playing');
 
}

window.addEventListener("keydown", playsound);
const keys = document.querySelectorAll(".key");
keys.forEach(key => {key.addEventListener('transitionend', removeClass)});

느낀 점

• DOM을 이용하여 Javascript로 HTML과 CSS를 동적으로 제어하는 원리는 공통적인 것 같음
  (제어 대상 및 제어 대상과 연결되어 있는 대상 특정 -> 제어 대상에 연결되어 있는 대상에 이벤트 리스너 붙임 -> 이벤트 리스너가 특정 사용자 동작이나 변화를 인식 -> 연결되어 있는 callback 함수 실행을 통해 제어 대상을 제어)

• 왜 DOM 구조를 정확히 이해하는 것이 중요한지 알 것 같음

• DOM 구조를 정확히 이해해야만, 대상 특정과 제어 함수 작성에 시행착오를 크게 줄일 수 있음