[JavaScript30] 코린이의 DAY1 도전

알아두어야 할 사항

https://www.boostcourse.org/cs124/joinLectures/52258 

자바스크립트의 시작

여기 강의 대충 다 듣고 바로 도전해봄

 

결론 : 개어려웠다... 6시간 소요했네요. 그럴만도한게 모르는 개념이 너무너무 많았기 때문. 위의 강의는 정말정말 더하기 빼기 같은 기본만 알려준답니다 

 

우선 결과물. 아빠가 좋아하는 르세라핌ㅋ

키보드를 누르면 드럼 소리와 함께 트랜지션이 나온다.

새로 알게 된 개념 위주로 리뷰를 하고자 한다.

혹시 이걸보고 공부를 하려는 사람은 내가 삽질했던 과정을 생략하고 바로 본 포스팅에 있는 키워드 위주로 먼저 예습을 하고, 실습에 들어가면 편할 듯 하다 !

 

JS30 의 강의는 전부 30분 이내인데, 코드가 좀 어려워서 이해하는데 오래걸렸다. 그냥 맨 첨에 파일에 있는 코드를 어느정도 이해한 뒤에 강의 보는 것을 추천. 우선은 그렇다.

 

HTML 코드 부분은 이해가 되었고, JS 코드 부분은 이해가 거의 안되었다.

<script>
  function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  }

  function playSound(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
    if (!audio) return;

    key.classList.add('playing');
    audio.currentTime = 0;
    audio.play();
  }

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

최종 코드는 다음과 같다.

 

먼저 알아야할 개념은 다음과 같다.

1. Const
2. 배열
3. querySelector
4. addEventListner
5. callBack함수(Listner 함수)
6. forEach()메소드
7. DOMTokenList
8. Window 객체
9. Array.from

^^

 

하나하나 간단히 정리해보겠다.

 

1. Const

• 상수 : 이건 맨 처음에 선언할 때 꼭 초기값 선언을 해줘야 한다. 변하지 않는 값 ㅇㅇ

2. 배열

걍 이거. 요소 여러개 넣은 것

const list = ["사과","딸기"];
//접근해보자
console.log(list[0]);

요런식?

 

 

3. querySelector 

자바스크립트로 html을 제어해보자

이 분 강의 많이 도움이 됨. 그니까 쿼리셀렉터는 자바스크립트가 이 document에 접근할 때, class의 키값등으로 접근할 수 있게 도와주는 메소드라고 생각하면 될듯

 

4. 이벤트리스너 ( 콜백 함수 ) 

• addEventListener

keys.forEach(key => key.addEventListener('transitionend', removeTransition));

이게 진짜 이해가 안되더라고 ...

 

맨 첨에 내가 동적으로 구현하고 싶었던 것은 sound를 추가하고 , 트랜지션을 넣는 건데, 이게 key별로 가능해야한다.

그래서 keys 라는 리스트 안을 foreach() 메소드로 요소를 하나하나 순회하고, 거기에 있는 key라는 각각의 요소에 저 함수를 호출시키는 것이다. 

 

• addEventListner : 프로퍼티에 이벤트를 추가하는 것 
• 콜백함수 : 이벤트가 실행되고 난 뒤 연이어서 실행되는 함수이다. 함수 호출하는 것 ( removeTransition이라는 함수는 맨위에 최종코드에 있다.

태그.addEventListener('이벤트이름',리스너함수 or 콜백 함수)

와 근데 나는 이벤트 이름 내가 막정하는 건 줄 알았는데 정해져 있더라고..예를 들면 input이면 키보드에 써서 넣는 이벤트. 이런식

 

6. Array.prototype.forEach()

forEach()  메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

keys.forEach(key => key.addEventListener('transitionend', removeTransition));

1. key는 keys의 인덱스다.
2. 이 인덱스마다, ⇒ transitioned 이벤트가 끝나자마자 뒤에 있는 함수를 실행시킨다.

끝ㅋ

 

7. DOMTokenList 유사 배열 객체

공백으로 구분된 문자열로 표현된 데이터를 정렬하여 토큰 집합으로 만들어 집합을 조작하기 위한 메소드를 제공하는 유사배열 인터페이스이다.

..?뭔소린가 싶져 

유사 배열 객체는 배열과 관련된 메소드를 같이 상속받아서 배열처럼 동작한다 (ex. forEach).

그러니까.. 여기 코드에서 아까 keys 라는 리스트 라고 말했는데, 사실 얘는 리스트 처럼 보이지만 배열인 척하는 놈임. 

그래서 얘네는 배열이랑 똑같이 쓰여지기가.. 어려운 것같음. 비슷한 것 같기도 하고 ?

 

그래서 이런 처리를 해주더라고.

8. Array.from

• Array.from은 유사 배열 객체를 배열로 바꾸는데 자주 사용된다고 함. 코드에 보면 이게 있다. 근데 이거 안해도 실행되는 듯 ㅇㅇ

Array.from을 통한 배열의 초기화

개념은 이정도를 공부하면 된다.

 

다시 최종코드를 보자.

<script>
  function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  } //트랜지션을 지우는 함수 생성 , 여기서 classList가 DOMTokenList,유사배열객체이다.

  function playSound(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
    if (!audio) return; //소리내는 함수 생성, 나중에 함수로 따로 빼줬다

    key.classList.add('playing');
    audio.currentTime = 0; /audio메소드가 많더라...어려웡
    audio.play();
  }

  const keys = Array.from(document.querySelectorAll('.key')); //Array.from으로 리스트화
  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
  window.addEventListener('keydown', playSound);
</script>

어렵다..ㅠ그래도 많이 배웠던 DAY1이었음...