본문 바로가기
728x90

프론트엔드 취업3

Reflow와 Repaint가 실행되는 시점 Reflow와 Repaint가 실행되는 시점 Reflow DOM 엘리먼트 추가, 제거 또는 변경 CSS 스타일 추가, 제거 또는 변경 CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있습니다. 엘리먼트의 길이를 변경하면, DOM 트리에 있는 다른 노드에 영향을 줄 수 있습니다. CSS3 애니메이션과 트랜지션. 애니메이션의 모든 프레임에서 리플로우가 발생합니다. offsetWidth 와 offsetHeight 의 사용. offsetWidth 와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거되어 수치가 계산됩니다. 유저 행동. 유저 인터랙션으로 발생하는 hover 효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환등을 활성화하.. 2022. 7. 30.
마이크로태스크 큐, 태스크 큐 마이크로태스크 큐, 태스크 큐 2개의 큐 모두 콜백함수가 들어간다는 점에서 동일하지만 어떤 함수를 실행하느냐에 따라 어디로 들어가는지가 달라집니다. 또한 명칭은 큐 (Queue) 이지만 자료구조의 큐와는 다릅니다. 엄밀히 말하자면 우선순위 큐 (Priority Queue) 라고 할 수 있는데, 이벤트 루프가 2개의 큐에서 태스크를 꺼내는 조건이 “제일 오래된 태스크” 이기 때문입니다. (동작방식) 콜백함수를 태스크 큐에 넣는 함수들 setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI 렌더링 콜백함수를 마이크로태스크 큐에 넣는 함수들 process.nextTick, Promise, Object.observe, MutationObser.. 2022. 7. 30.
var, let, const의 차이점 var, let, const의 차이점 var는 변수 재선언, 재할당 모두 가능합니다. let은 변수 재선언 불가능, 재할당은 가능합니다. const는 변수 재선언, 재할당 모두 불가능합니다. var는 function-scoped이고, let, const는 block-scoped입니다. var의 재선언, 재할당이 가능하기 때문에 생긴 문제점 // 이미 만들어진 변수이름으로 재선언했는데 아무런 문제가 발생하지 않습니다. var a = 'test' var a = 'test2' // hoisting으로 인해 ReferenceError에러가 나지 않습니다. c = 'test' var c es2015에 추가된 let, const는? // let let a = 'test' let a = 'test2' // Uncau.. 2022. 5. 10.