JavaScript

외국형님이 진행하는 30개의 무료챌린지를 우연히 발견해서 듣고있다. 하루에 2개씩 해보려고 하고, 이과정에서 몰랐던것을 알면 작은것이라도 일기에 적으려고 한다.

QuerySelectorAll , getElementBy ~

나는 엘리먼트를 여러개를 받아서 forEach를 이용해 addEvnet를 해주려고 생각중이었다.
같은 클래스의 엘리먼트들을 받아오기위해 getElementByClassName을 했고, 받아와서 forEach를 했는데 안됬다. => 알고보니 obj였던것 그래서

Object.keys(elements)로 foreach를 돌렸는데 addEvent리스너가 안됬다.

무슨차이인지 알아봤다.
https://bobbohee.github.io/2021-02-12/getelementbyid-versus-queryselector
https://stackoverflow.com/questions/14377590/queryselector-and-queryselectorall-vs-getelementsbyclassname-and-getelementbyid

QuerySelector VS getElementById

우선 둘다 Element를 반환하는건 동일하지만 성능에서 차이가있는것같다.
결론만 말하자면 엘리먼트를 찾는과정이 getElementById가 DOM규모가 클수록 더 빠르다는것.
하지만 QuerySelector는 다양한 셀렉터를 이용할수있기에 장점이 있고, 가독성부분에서 후자보다 뛰어나다는것. 이정도로 정리한다

QuerySelector = 후자에비해 느림 but 가독성우수 + 다양한 셀렉터를 이용하는 장점
getElementById = DOM규모가 클수록 전자에비해 빠름

QuerySelectorAll VS getElementByClassName

내가 직면한 문제. 찾아보니 둘의 리턴타입이 달랐다
전자는 NodeList 후자는 HTMLCollection인데 HTMLCollection은 외국형님 말로는 NodeList만큼 배열과 유사하지 않고, forEach()를 지원하지 않으며 성능문제는 위와 같음

getElementByClassName을 하고 배열이라고 생각한 나는 forEach를 쓰려했다
=> 둘다아닌데 둘다해버렸네;

QuerySelectorAll = type:NodeList
getElementByClassName = type:HTMLCollection(forEach지원 x)

Audio

dino 프로젝트시 경험한건데 play중인 audio element가 있으면 재생이 끝날때까지 다른 audio의 play가 안된다 그래서 나는 audio를 stop하고 다시 play하는 느낌으로 로직을 짰었는데..
외국형님은 강제로 오디오시간을 rewind(되감기)해서 0으로 만들고 그냥 play만 하는식으로 로직을 짜셨다. 나는 왜이리 못하는걸까

function audioPlay(){
	const audio = //get audio element
	audio.currentTime = 0 //오디오시간을 0으로 rewind => play가 또 가능해짐
	audio.play()
}

다양한 Event

Transitionend event

말이 장황해질거같은데..

엘리먼트의 트랜지션이걸린 css요소가 트랜지션이끝나면 발생하는 evnet
각 트랜지션이 끝날때마다 해당 css요소가 담겨와서 console로 볼수있다.

function removePlayingClass(e){
  if(e.propertyName !== 'transform') return;
  //propertyName에 해당 css요소의 이름이 담겨옴
  this.classList.remove('playing')
  //transform의 트랜지션이 끝나면 'playing' 이라는 class를 지우는 로직
}

자잘한 것들

setInterval(function,ms) => ms마다 function을 실행해주는 함수
element.style.(key) = value => 해당 엘리먼트의 스타일 바꾸기
transition-timing-fun => linear ease-in-out ….> cubic-bezier(곡선 타이밍의 커스텀같은느낌)