아래 한 가지 주제에 대해서 각자 조사해서 답변을 제출해 주세요.
var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요.
브라우저가 어떻게 동작하는지 설명해 주세요.
- var, let, const 비교:
중복 선언 허용:
var:
중복 선언이 허용됩니다.
같은 변수를 여러 번 선언해도 오류가 발생하지 않습니다.
let, const:
중복 선언이 허용되지 않습니다.
같은 변수를 여러 번 선언하면 문법 오류가 발생합니다.
스코프:
var:
함수 스코프를 가집니다. 함수 내에서 선언한 변수는 함수 전체에서 접근 가능합니다.
let, const:
블록 스코프를 가집니다. 블록({}) 내에서 선언한 변수는 블록 내에서만 접근 가능합니다.
호이스팅:
var:
호이스팅이 발생합니다. 선언부가 끌어올려져 변수가 선언되기 전에도 참조할 수 있습니다.
let, const:
호이스팅이 발생하지만, 선언 전에 변수에 접근하면 ReferenceError가 발생합니다.
2. 브라우저 동작:
브라우저가 동작하는 방식은 크게 아래와 같습니다:
HTML 파싱: 브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model)을 생성합니다.
CSS 파싱: CSS 파일 또는 스타일 태그의 내용을 파싱하여 CSSOM(CSS Object Model)을 생성합니다.
렌더 트리 구축: DOM과 CSSOM을 결합하여 렌더 트리(Render Tree)를 생성합니다.
레이아웃: 렌더 트리를 기반으로 각 요소의 레이아웃을 계산합니다.
페인트: 각 요소의 스타일에 따라 화면에 페인트 작업을 수행하여 실제 화면에 그립니다.
자바스크립트 실행: HTML 파싱 중
이벤트 처리: 사용자의 상호 작용(클릭, 스크롤 등)에 대한 이벤트를 감지하고 처리합니다.
리플로우와 리페인트: 화면이 변경되면 브라우저는 레이아웃을 다시 계산하고, 변경된 부분만 다시 페인트하여 업데이트합니다.
이러한 과정을 통해 브라우저는 사용자에게 웹 페이지를 제공하게 됩니다.
