30일 Javascript 따라해보기 (1) 드럼킷 - 메모

첫시간이니 좀 상세하게.

JavaScript 30

오, 이곳 JS30이라는 곳은 🙂 30개의 예제를 통해서, 프레임워크 없이, 라이브러리 없이, 바닐라로만 사랑스럽게 따라해 볼 수 있는 강좌를 주는 사이트이다. 쉽다. 쉬워! 
무료니까, 이메일로 코스 등록하고, 스타트파일 받아서 영상 보면서 따라하면 됨.
순서없이 재밌어 보이는 것 대로 할 예정. 그래도 일단은 드럼은 해보려고 함.
아참... 영어다. 등록후엔 오른쪽위에 my account 들어가서 wesbos.com 에 코스진행하면 된다.
들어가면 스타터파일이랑, 슬랙빼고 ㅠㅠ 코스 들으면 된다.

자바스크립트 드럼 킷

최종목표 : 키보드를 누르면 소리내고, 키를 누른 효과를 내는 드럼을 만들자.

과정 : 첫 시간이니 좀 상세하게 적어야지.

git clone 해서 로컬저장소에 개발에 필요한 자료들을 받자. 드럼킷이니 소리가 나야한다.

일단 아저씨가 말하는걸 들어보면 키보드로 드럼을 만드는건데, 키보드 이벤트가 필요할 것이다. css랑 html은 준비를 해 줄 것 같고 폴더나 한번 열어봐야징.

아저씨가 말하기를 🙂 데이터 키에다가 키를 누르면 클래스에다 플래잉을 걸면 CSS로 눌려진 효과를 뽱하고 낸다.

일단, 키코드랑 클래스랑 소리만 맞으면 되겠네.

keycode.info 에서 키보드와 아스키 키코드에 대한 정보를 획득하는 샘플을 보여준다. 어 일단, index-Finished 는 해답이니까 제껴놓고😓

Index-start 화면을 열어보고.... 손델게 좀 있어보인다. 

3분 54초 부터 같이 생각하면서 스크립트 좀 짜보자고 이야기를 한다.

스크립트에 키다운 이벤트를 핸들러로 전역에 등록하고 이벤트 핸들러 리쓰너로 들어올 function을 정의한다. e는 이벤트의 약자

4:39초까지. 그리고 테스트해봄 ... 한글인 경우 한글들어온다 ㅠㅠㅠ 그래도 키코드는 같다.

function(e) {
  console.log(e.keyCode);
}

각각 키에 대한 오디오를 받아야 하니, 데이터key랑 연결을 해주고, 쿼리셀렉터를 통해 해당 오디오의 주소와 data-key와 바인딩을 시킨다.

data- 부분은 원하는 데이터를 html에 저장할 때 적당하다. 백틱을 이용해서 셀랙터의 해당 오디오 엘리먼트를 로드하고

src 부분에 있는 주소를 추출해서 실행하는 구조.

오디오가 없으면 빠르게 얼리리턴 해버리고, 🙂 소리도 기존 소리가 끝나고 재생되는걸 처리하기 위해
이벤트 들어오자 마자 소리도 빠릿하게 실행하도록 변경

키이벤트 효과처리 .key class 친구들을 선택해서 key로 만들고, 요거 효과내기위해 위해서 CSS도 살짝 수정하고, 이벤트 리스너로 클래스 추가.

키 누른후 전체 다 키를 축소하기위해 모든 키를 선택해 전역에 keys로 복수형이지 🥺 쿼리셀렉트all🔥로 가져온다.

(제이쿼리 비교도 해주네)

일단은 전체 선택한 키를 애로우 펑션으로 짧게 이벤트 리스너를 추가해서 트랜지션 엔드를 받고, 삭제시 호출할 removeTransition을 달아놓고

뒤에 removeTransition을 만들어줬다. 테스트 15:10초.

변환이 일어나는 프로퍼티 네임이 transform으로 바뀐걸 볼 수 있다.
변환이 되는 과정에 계속 누르면 이건 건들면 안되니 예외처리 먼저 해주고 (얼리리턴)

keys에 트랜지션이 들어오는경우 e에 대한것도 출력해본다. 속도조정도 낮추고 뭔일이 일어나나 살펴보자.

키 한번 눌렀을 뿐인데, 6개의 각종 트렌지션 이벤트가 들어온다. 여기에 프로퍼티 네임들을 좀 확인 해보자.

transform 친구가 눈에 띈다. 이친구 빼고 다 거르자.

이 만들어준 펑션의 this는 어디에 걸려있는지 뭐가 나오는지 콘솔로그로 체크해보자., 엘리먼트에 현재 실행되었다는 걸 볼 수 있다.
그럼???🧐

17:30초 해당 이벤트 엘리먼트의 플래잉을 해제하는 것. 속도도 다시 빠르게 줄도록 한다.

함수를 하나로 묶어주는 코드정리까지하고, 이벤트들을 하단으로 배치하고 끝.

ㅡ끄읏~