[TIL] 2023.2.1

벌써 한달이 지나고 2월이다!

이제 네트워크를 끝내고 프론트엔드 면접준비를 시작했다!

2월이 지나면 공채, 데브매칭 등 바빠지니까 지금 더 마음을 잡고 열심히 공부하자!!

 

호이스팅(hoisting)이란?

• 호이스팅이란 “끌어올린다”라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상을 말합니다. 여기서 “선언(Declaration)”은 끌어올려지고 “할당(Assignment)”은 끌어올려지지 않습니다.
• 모범답안
  실행 컨텍스트 생성 시 렉시컬 스코프 내의 선언이 끌어올려 지는 게 호이스팅입니다.
• 정답할당 구문은 런타임 과정에서 이뤄진다.
  • 함수와 변수 선언문 중에서는 함수 선언문이 먼저다!

func();
var func = function(){ console.log('변수 호이스팅') }
function func() {
  console.log('함수 호이스팅');
}

// 함수 호이스팅

Reflow와 Repaint가 실행되는 시점

Reflow

Reflow는 렌더 트리를 재생성하는 과정이다.(레이아웃 변경) 

• DOM 엘리먼트 추가,제거 또는 변경
• CSS 스타일 추가, 제거 또는 변경
• CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있다.
• CSS3 애니메이션과 트랜지션, 애니메이션의 모든 프레임에서 리플로우 발생
• offsetWidth와 offsetHeight 의 사용
• 유저 행동, 인터랙션으로 발생하는 hover 효과, 필드에 텍스트 입력 등 

Repaint

Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리는 과정

• 가시성이 변경되는 순간 (opacity, background-color, visibility, outline 등)
• Reflow가 실행된 순간 뒤에 실행

---

[baekjoon] 12869 뮤탈리스크 (Javascript)