웹프로그래밍 4주차

웹 UI 컴포넌트

• 컴포넌트: 웹, 모바일 화면에서 기능을 구성하는 최소한의 단위
• UI 컴포넌트 사용시 장점
  • 사용자 관점: 다른 웹 사이트에서 쓰던 UI와 비슷한 UI를 제공하여 사용자들이 별도의 학습 없이도 사이트를 쉽게 사용할 수 있다.
  • 제작자 관점: 기존에 사용했던 소스코드, 디자인을 재활용하여 생산성을 높이고, 비슷한 기능을 하는 용어를 정의할 수 있음

브라우저 렌더링

• 웹 브라우저가 HTML, CSS 파일을 로딩하여 브라우저 화면에 그래픽 요소로 표현하는 과정
• 실제로 각 픽셀 자리에 어떤 내용 (색상) 정보가 들어가야 하는지 계산하는 과정
• Parsing -> Style -> Layout -> Paint -> Composite 5단계로 구성

Parsing: Object Model 구축

• HTML 문서를 바탕으로 Document Object Model(DOM)으로, CSS 내용을 가지고 CSS Object Model (CSSOM) 구축하는 과정

• 구축된 DOM 트리

  • 계층 구조로 이루어진 마크업 문서를 트리 형식으로 변환하고, 각 노드 내용을 부여함
  • 각 노드에는 어떤 태그인지, 각 태그에 부여된 어트리뷰트, 하위 노드에 대한 정보를 가짐

• 구축된 CSSOM 트리

  • DOM 트리 안에는 각 노드에 포함된 내용을 가지고 있고, CSSOM에는 각 노드에 적용될 스타일 정보를 포함함.

Style: Rendering Tree 구축

• DOM Tree + CSSOM Tree = Rendering Tree
• 실제 브라우저 화면에 보여지는 노드들만 포함시킴
  • 화면에 보이지 않는 요소는 렌더링 성능에 영향을 주지 않음

Layout: 각 노드들의 화면에 배치될 위치를 CPU를 이용해 계산

• 브라우저 화면 크기(viewport), 폰트 크기에 따른 크기 요소들까지 전부 계산
• Layout Tree 구축

Reflow: 브라우저의 Layout 정보가 변경되어 재계산하는 동작

• viewport 변경(브라우저 크기 변경)
• 폰트 크기 변경
• 스크롤(일부분)
• 화면 확대/축소
• 스크립트에 의한 크기 정보 변경
• 새로운 DOM 노드 추가

Paint: Layout에서 계산해놓은 각 위치를 가지고, 실제로 그려야 하는 Layer를 쌓아서 그리는 정보(Paint Record)를 구축한다

• Paint Record: 레이아웃 트리를 가지고 그림을 그려야 하는 순서와 해당 순서에서 그릴 내용에 대해 순서대로 가지고 있는 레코드
• 브라우저 렌더링 과정은 모두 초당 60프레임이 매번 일어나야 함.
  • 1프레임 당 약 14~16ms 안에 모든 내용들이 처리되어야 함
  • 만약 16ms 초과해서 렌더링 되면 사람이 체감하는 버벅임 발생

Composite: 브라우저가 알고있는 모든 layout, paint 정보를 활용해서 모니터 화면에 픽셀단위에 표현하는 작업. rasterizing 이라고도 함.

• 모니터 화면이 옮겨지면, 경우에 따라 추가로 그림
• 경우에 따라서 GPU를 활용하여 최적화 함
  • 가장 짧게 걸리는 작업 중 하나

reflow vs repaint

• reflow: Render Tree나 Layout Tree 정보가 변경되어 화면 전체의 레이아웃 구성요소를 다시 계산하는 과정
• repaint: 이미 계산한 layout영역과 Paint Record안에서 화면에 그릴 요소들을 일부분 수정하는 과정
  • transform
  • filter
  • 등의 요소를 변경/ 초가할 때 repaint가 일어남

Javascript 실습

$0: 브라우저 Inspector로 선택한 태그

• $0.style: 선택한 태그의 스타일을 직접 지정
• 중요: 자바스크립트를 활용해 태그를 변경하는 것은 영구적인 변경이 아님

window 하위에서 기본으로 지원하는 함수

• alert: 알림 메시지
• confirm: 확인/취소 함수

document에서 기본으로 지원하는 기능

• append: 태그를 추가함
• removeChild: 태그 아래에 노드를 삭제함
• document.getElementsByTagName('태그이름')
  • 태그명을 기준으로 모든 태그를 가져옴
• document.getElementById
  • 태그 id를 기준으로 하나의 태그를 가져옴
• document.getElementsByClassName
  • 태그에 부여된 class를 기준으로 모든 태그를 가져옴
• document.querySelector
  • CSS 선택자를 활용하여 하나의 태그를 선택
• document.querySelectorAll
  • CSS 선택자를 활용하여 모든 태그를 선택