[Weekly Paper] 4. Javscript 변수 & 브라우저 동작 원리

Javscript 변수

• var
  • var 키워드로 선언한 변수는 중복 선언 가능 → 변수명이 같은 변수를 중복해 선언해도 에러 발생 X
  • javascript의 특징으로 모든 선언문은 호이스팅 되기 때문
    • 호이스팅 : 모든 선언문이 해당 scope의 선두로 옮겨진 것처럼 동작하는 특성. 자바스크립트는 모든 선언문(var, let, const, function, class)이 선언되기 이전에 참조 가능
  • 함수 레벨 스코프를 가진다
    • 함수 레벨 스코프 : 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수
  • 문제점
    • 함수 레벨 스코프
      • 전역 변수 남발
      • for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있다
    • var 키워드 생략 허용
      • 의도하지 않은 변수의 전역화
    • 중복 선언 허용
      • 의도하지 않은 변수값 변경
    • 변수 호이스팅
      • 변수를 선언하기 전에 참조가 가능. 변수가 먼저 선언되서 undefined로 초기화되며 선언 전에 참조할 땐 undefined로 초기화되서 나타난다.
• let
  • 블록 레벨 스코프
    • 블록 레벨 스코프 : 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다
  • 업데이트는 가능, 재선언은 불가능
  • 동일한 변수가 다른 범위 내에서 정의된다면, 에러는 더 이상 발생
  • var와 마찬가지로 let 선언은 맨 위로 끌어올려지지만 var와 다르게 초기화 되지 않는다. 선언 이전에 let 변수를 사용하려고 시도하면 Reference Error(참조 오류)가 발생한다.
• const
  • 상수 선언
  • 블록 레벨 스코프
  • 업데이트, 재선언 불가능
  • 선언하는 당시에 초기화 되어야 한다
  • let과 마찬가지로 const 선언도 맨 위로 끌어올려지지만 초기화되지는 않는다.

	var	let	const
종류	변수 선언	변수 선언	상수 선언
중복 선언 여부	O	X	X
호이스팅 여부	O	X	X
스코프	함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프
재선언	O	O	X

---

브라우저 동작 원리

• 브라우저
  • Chrome, Safari, Firefox, internet explorer
  • MDN에서는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이라고 정의
  • 유저가 선택한 자원을 서버로부터 받아와서 유저에게 보여준다 → 자원은 페이지 외 이미지, 비디오 등의 컨텐츠들도 포함
• 브라우저 렌더링 동작 과정
  1. HTML 파일과 CSS파일을 파싱해서 각각 트리를 만든다(parsing)
     • 가장 먼저 받아온 HTML 파일을 해석
     • HTML파일을 해석하여 DOM Tree를 구성하는 단계
     • 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행
  2. 두 트리를 결합하여 렌더링 트리를 만든다(style)
     • parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성
     • Render Tree는 실제로 화면에 그려질 Tree
     • 예를 들면 Render Tree를 구성할때 visibility: hidden은 요소가 공간을 차지하고, 보이지만 않기 때문에 Render Tree에 포함이 되지만, display: none 의 경우 Render Tree에서 제외
  3. 렌더링 트리에서 각 노드의 위치와 크기를 계산한다(레이아웃)
     • Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산
     • 루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영
     • 만약 크기 값을 %로 지정하였다면 레이아웃 단계에서 %값을 계산해서 픽셀 단위로 변환
  4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다(paint)
     • 레이아웃 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환. 이 때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리
     • 스타일이 복잡할수록 paint 시간도 늘어난다
  5. 레이어를 합성하여 실제 화면에 나타낸다(composite)
     • paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.