JS / Day 2
2일차 공부노트
(1) 실전 coordinating cursor
※vsc에 노란색으로 글씨나오는건 함수처럼 ()쓰고 파란색(속성?)이면 =을 쓴다
이걸 자꾸 잘못써서 안되는 경우가 생김...
일단 HTML구조를 어떻게 짤지 몇개를 만들어야하는지 보고
요소를 다 만들고나면 변수에 필요한 아이들 할당을 해준다
그리고 addEventListener로 동작을 시키는데
변수로 어떤걸 한번에 지정을 하고 그 변수이름을 계속 사용
(2) 실전 scroll to something
이부분은 scrollIntoView로 쉽게 해결하였는데
아쉬운점은 그냥 뭔지만 알고 사용하지말고 mdn 에서 옵션들을 보면서
rabbit.scrollIntoView({ behavior: "smooth", block: "center" });
이렇게 부드럽게 스크롤하고, 스크롤시 중간으로 배치되게하는 이런것들
능동적으로 추가하면서 연습했으면 좋겠다.
(3) DOM 요소
html tag가 자바스크립트 node 로 변환
노드는 모든 이벤트가 발생가능
= everything is event target!!
(4) 성능 보장 렌더링 순서
주소창에 주소를 입력하면
request/ response -> loading -> scripting ->rendering -> layout -> painting
이 순서로 일어나는데
DOM CSSDOM RenderTree -> Layout Paint Composition
counstruction operation
이렇게 나눠볼수가 있는데 dom에서 최대한 요소를 작게 만들어야
렌더링 속도가 올라간다
layout과 paint는 layout은 구성을 짜고 paint는 포토샵에서 레이어를 만들듯
그림을 그리고 composition은 입력한대로에 맞춰 꾸민다고 생각을해보면
내가 position을 left를 주면 그냥 옆으로 이동하는거기때문에 큰 차이가 없는데
이 left로 인해서 다른 요소들의 이동이 발생하면 layout에 변화가 일어나게되고
그럼 처음부터 다시 시작해야하기때문에 성능이 나빠질수밖에없다
(5) 레이어 구성
개발자도구 more tools에서 layers를 보면 확인 가능하고
will-change속성을 css에 추가하면 layer변경된걸 볼수있음
(6) 실습했던거 성능 개선하기
csstrigers사이트에서 top, left 이런 속성들이 layout까지 건들고
transform은 composition만 건들기때문에 transform을 사용해서
좌표찾아 007 코드를 개선해보는 예제
vertical.style.transform = `translateX(${x}px)`;
이렇게 바꿔줄수있는데
target처럼 가운데에 오게하려면
변수로 target.getBoundingClientRect를 받아와서
또 변수로 받아온 rect를 가로로 나누고
다른 변수로 세로로 나누어서
target.style.transform = `translate(${x - targetHalfWidth}px,
${y - targetHalfHeight}px)`;
이렇게 사용가능
성능이 개선이 되었는지 안되었는지는 개발자도구에서 performance 에서
녹화해서 움직이는거 분석을 해보면 나온다
(7) DOM 조작하기
querySelector 이거 .안쓰면 그냥 태그네임도되고
클래스는 .쓰고 아이드는 #쓰고 이렇게 하는거였음
[]이렇게해서 속성도 쓸수있고 유연하게 사용가능
다른 getElementById 이런거는 계속 수정할일이생기면 계속 바꿔야하기땜에
querySelector를 쓰는것이 좋다 대신 맨위에있는 하나만 선택되니까
querySelectorAll을 적절히 사용 - all은 배열을 리턴!!
위치를 잡을 변수를 querySelector를 하고
createElement로 새로운 변수에 태그를 그려넣고
setAttribute 로 속성을 추가할수있다
textContent로 내용을 그려놓고
append or appendChild로 위치잡은 변수에 박아준다
지우고싶다면 removeChild
많은 동작을 해야한다면 이렇게 createElement 로 하는게 좋지만
한번 업데이트 한 다음 다시 변경할 일이 없으면
innerHTML로 한번에 그리면 된다
section.innerHTML하면 이 섹션안에있는 요소들을 새로 정의한다고 보면된다
새로운걸 넣을수있다고만 생각하지말고 있던것도 없앨수있고 바꿀수있다고 생각하기
(8) 실전 list app
정적으로 ui를 완벽구현을 하고나서 동적으로 바꾸면된다
fontawesome에서 아이콘데려와서쓰기
js파일에 굉장히 잘 설명해놓았으니 다시 재복습!
(9) 개발자도구에서 source 에서 디버깅
(10) 이벤트 버블링
이벤트가 상위요소로 전파되는걸 버블링이라고 하는데
내가 h1 안에 a를 클릭했을때 어떤 이벤트를 일어나게 했는데
h1까지 이벤트가 일어나진다
이걸 event.stopPropagation으로 막으면 굉장히 위험하니
if(event.target !== event.currentTarget){
return;
} 이렇게 막는다 - 이게 버블링시 다르게 나타나기 때문
a를 눌렀는데 h1이 이벤트가 일어나도 h1의 event.Target 은 a라고 나오기때문
※브라우저에서 일어나는 모든것들이 이벤트고 노드가 이벤트타겟이며 노드는 모든것이 노드이니
모든것이 이벤트가 일어날수있다
(11) 브라우저 취소
기본적으로 브라우저에서 당연하게 기본으로 하는것들
뭐 인풋의 체크박스를 클릭하면 박스가 체크표시가 되는것
그런것들을 내가 취소하고싶으면
event.preventDefault(); 이렇게 할수있다
근데 이게 스크롤 wheel 처럼 passive 한건 취소가 안된다
만약 꼭 해야되면 옵션값에 passive: false라고 하면 되는데 기본적으로
preventDefault를 안쓰는게 좋기때문에 알고만 있기
(12) 이벤트 위임
자식요소에 일일이 이벤트리스너를 달지말고
부모요소에 이벤트리스너를 추가하고 if로 자식요소를 지정해서 자식요소에
이벤트를 위임하기