NodeList와 Array의 차이점
JavaScript챌린지 01 02 포스팅에서 querySelector는 nodelist를 반환하고 getElement~는 HTMLCollection을 반환하는 차이가 있다고 배웠고. 그 둘의 차이를 작게 적어놨다.
NodeList는 어째서 forEach를 쓸수있는걸까?
prototype을 보면 forEach등 배열을 만지는 메소드가 있는걸 볼수있다.
어? 근데 map,filter등은 안보이네..? => 못쓴다는소리!
그럼 흔한 Array의 모습은 어떨까?
띠용! 이제 왜 NodeList는 map을 못쓰는지 알게되었다(NodeList의 proto의 메소드는 한정적이다!)
그럼 NodeList에서 map filter등을 쓰려면 array로 convert해줘야 한다는건데 대표적인 2가지 방법이있다.
Array.from(NodeList) && [...NodeList]
const nodeListToArray = Array.from(NodeList)
const nodeListToArray = [...NodeList]제목그대로 인데. 편의상으로는 후자가 더 좋을순 있겠지만 개인적인 의견으로는(경력도 없는게 뭔 의견이겠냐싶겠지만..)
전자인 Array.from(NodeList)가 좀더 의미를 담은 코드같아서 본인같으면 전자로 많이 쓸거같다. (cleancode에서 의미를 담은 코드가 좋다고했으니까)
CSS :root
https://velog.io/@selswlg/CSS-root
참조하자면 :root는 가상클래스 이고 항상 html을 가리킨다고 한다.
하지만 html보다 :root 가상클래스의 스타일 적용 우선순위가 더 높다는것.
즉 내 이해라면 style상으론 최상위에 위치한다고 봐도되며 여기에 변수를 넣어줘서 global로 스타일을 관리할수 있는것 같다 (유지보수가 용이!)
:root{
--foo:value;
--bar:value; //사용법 (--)
}
div{
padding:var(--foo); //사용법
}오케이. 좋은걸 알았다 근데 저 가상클래스의 변수를 javascript로 조작하려면 어떻게 해야할까??
document.documentElement.style.setProperty(property,newValue)일단 방법은 이러하고 뜯어보자면
https://ko.javascript.info/dom-navigation
document를 제외한 DOM트리 맨 꼭대기에 있는 문서Node는 document.documentElement이며 html태그에 해당한다고 한다.
document.documentElement.style은 결국 html의 style을 찝는거고 :root는 html을 가리킨다고 했다 => 느낌이왔다.
내 이해로는 html의 스타일을 찝는거고 :root는 항상 html을 가리키며 스타일상으로는 우선순위가 위에있기때문에 :root의 스타일을 찝는것과 다름이 없다고 판단했다. (아니면 뭐..)
기타 자투리들
input태그의 속성과 응용
<input name="value" data-foo="value2" />
//
function eventHandler(){
this.name //'value'
this.dataset.foo //'value2'
}위에 :root의 style과 응용하자면
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
//
document.documentElement.style.setProperty(`--${this.name}`,`${this.value}${this.dataset.sizing}`)
//newValue는 새로운 스타일값을 넣는데 px단위를 넣어줘야하니까 아예 data- 속성을 이용해 단위값을 넣어주고 꺼내서 쓰는느낌.input range의 event 짬뽕
change + mousemove 이벤트
mousemove 이벤트는 해당 엘리먼트 위에서 마우스의 움직임이 있을때 발생한다 그래서 input range와 같은 가변value를 console을 찍을대는 적절하나. range내에서 값을 클릭해서 확! 얻을때는 약간의 버벅임이있다. 그래서 change 이벤트와 섞어서 쓰면 원하는대로 부드럽게 잘 됬다.
배움은 역시 끝이없구만
