기초부터 완성까지 프론트엔드 - day4

Posted Nov 1, 2023 Updated Dec 24, 2023

By hyemin 9 min read

Day 4

오늘 읽은 범위

7장 BOM과 DOM
8장 브라우저 렌더링 과정

책에서 기억하고 싶은 내용을 써보세요.

문서 객체 모델(Document Object Model; DOM)

일종의 인터페이스로 해당 요소를 나타내는 노드, 노드의 속성을 나타내는 프로퍼티와 이를 조작할 수 있는 여러 메서드를 담아 구조화한 객체로 표현

노드 인터페이스

전체 문서의 요소들에 대한 객체 형태의 기본 데이터 타입
NodeType, nodeName, nodeValue, 자식 노드, 형제 노드에 대한 관계 등 여러 정보를 가짐

Node

EventTarget을 상속받은 추상 클래스
Dom 노드의 관계를 나타내는 기능들이 포함
parentNode: 부모 노드를 반환
childNode: 요소의 자식 노드를 반환
firstChild: 자식 노드 중 첫번째 자식 반환
lastChild: 자식 노드 중 마지막 자식 반환
nextSibling: 부모의 childNodes 목록 중 자신 다음에 있는 노드 반환
previousSibling: 부모의 childNodes 목록 중 자신 이전에 있는 노드 반환

Node 명령어

createElement(): tagName에 맞는 요소 노드 생성
appendChild(), insertBefore(): 노드를 이동하거나 새로운 노드를 추가
append(): 요소 내부의 마지막으로 이동
prepend(): 요소 내부의 가장 앞으로 이동
before(): 요소 앞으로 이동
after(): 요소 뒤로 이동
removeChild(): DOM 트리 내 노드를 제거할 때 사용
remove(): DOM 트리 내 노드를 제거할 때 사용
insertAdjacentHTML(): XML또는 HTML로 해석될 수 있는 문자열을 파싱한 뒤 적절한 노드를 생성해 특정 위치에 삽입
getElementById(): 요소의 id 속성을 이용해 요소를 찾을 때 사용
querySelector(): 선택자와 일치하는 첫 번째 요소를 반환
querySelectorAll(): 선택자와 일치하는 모든 요소를 NodeList 형태로 반환
preventDefault(): 이벤트를 취소할 수 있는 경우 이벤트를 취소할 때 사용
stopPropagation(): 이벤트가 전파되는 것을 막음, 기본 동작을 중단하지는 못함

append 와 appendChild

append	appendChild
Node 객체뿐만 아니라 문자열을 인자로 넘길 수 있음	문자열을 인자로 넘겨줄 경우 에러가 발생함
여러 노드를 한 번에 추가할 수 있음	여러 번 호출해야 함

버블링 (bubbling)

DOM요소에 이벤트가 발생할 경우 부모요소로 올라가며 차례대로 이벤트가 전파되는 흐름

  
<form>
  <div><p></p></div>
</form>

P 클릭 → div 클릭 → form 클릭

캡처링 (Capturing)

DOM 요서에 이벤트가 발생할 경우 가장 상위의 부모요소부터 자식요소로 내려가며 이벤트가 전파되는 흐름

  
<form>
  <div><p></p></div>
</form>

form 클릭 → div 클릭 → P 클릭

브라우저 객체 모델 (Broswer Object Model; BOM)

window 객체

브라우저 환경에서의 자바 스크립트 전역 객체
브라우저 창을 의미

History 객체

현재 브라우저의 세션 기록을 갖고 있음
window.history 명령어를 통해 history 객체에 접근할 수 있음
forward(): 세션 기록 내에서 뒤로 이동
back(): 세션 기록 내에서 뒤로 이동

go(): 현재 위치를 기준으로 offset에 해당하는 숫자를 넣어 이동

  
history.go(1); // forward와 동일
history.go(-1); // back()과 동일
history.go(-2); // 뒤로 2페이지 이동
history.go(0); // 현재 페이지 새로고침

pushState(): 브라우저의 세션 기록에 상태 추가
replaceState(): 현재 세션 기록을 인자로 넘어온 상태로 대체

location 객체

현재 페이지의 URL, 프로토콜, hostname 등 위치에 관련된 정보를 포함
window.location, document.location을 사용하여 location 객체에 접근
href: 온전한 URL
protocol: URL 프로토콜 (https:)
host: URL 호스트 (test.com:443)
hostname: URL 도메인 (test.com)
port: 포트번호 (443)
pathname: \/ 뒤 URL 경로를 나타내는 문자열 (/tutorial)
search: \? 뒤 URL 쿼리스트링 (?value=443)
hast: # 뒤 URL 프래그먼트 식별자 (#waht-are-we)

assign	replace	reload
해당하는 URL로 이동	해당하는 URL로 이동	현재 URL 리소스를 다시 불러옴
history 스택에 추가	현재 페이지에 대한 history 스택이 초기화됨	-

localStorage

여러 탭과 창에서 공유
컴퓨터를 종료하거나 브라우저를 종료하더라도 지속

SessionStorage

한 탭에서 페이지의 세션이 유지되는 동안 origin별로 스토리지 관리
다른 세션이나 창이 종료될 경우 데이터에 접근할 수 없음

브라우저 렌더링 과정

서버에 필요한 리소스 요청 → 렌더 트리 생성 → Layout → 페인팅 → 합성

렌더 트리 생성

CSSOM 트리와 DOM 트리가 결합되어 생성

<html> <body>를 처리하며 렌더 트리 루트를 구성
DOM 트리를 순회하며 최상위 노드<html>부터 보여지지 않는 노드 <link><script><meta> 를 생략함
display:none처럼 CSS로 숨겨지는 노드도 트리에서 생략
float position 같은 속성을 사용했을 경우 실제 그려지는 위치로 렌더 객체가 이동
화면에 나타나는 노드에 CSSOM 규칙을 찾아 일치하는 스타일을 적용

Layout

각 요소의 상대적인 위치, 크기를 찾는 과정

부모 노드가 자식 노드의 너비를 결정
자식 렌더링 객체를 배치 (x, y 값을 지정)
자식 렌더링 객체의 높이를 더해 부모 렌더 객체 높이를 계산
레이아웃 중인 렌더 객체의 더티 플래그 제거

※ 더티: 다시 배치할 필요가 있는 변경 요소, 추가된 노드, 자식 노드

Painting

렌더 트리를 순회하며 레이어를 만들고 레이어의 배경, 테두리, 텍스트, 그려지는 순서 등 그려지는 과정을 기록

합성

각 레이어를 분리해 래스터화한 뒤 브라우저에서 페이지의 크기, 뷰포트에 맞게 합성해 화면으로 나타냄

CRP가 중요한 이유

브라우저가 어떻게 화면을 렌더링하는지 알 수 있을 뿐만 아니라 성능에도 큰 영향을 미치는 과정
페이지 초기 로딩 성능 문제나 버벅거림 문제를 해결할 떄 CRP 어느 단계에서 문제가 발생하는지 파악할 수 있어야 함

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

브라우저 렌더링 과정에 대해서는 알고 있었는데, 이 과정이 초기 로딩 성능 문제나 버벅거림 문제를 해결할 수 있는 사실에 대해서는 처음 알게 되었다. 기존에 제작했던 프로젝트 중에 많이 첫 로드 시 많이 버벅거리는 프로젝트가 있는데 확인해봐야겠다.

책리뷰, 기초부터 완성까지 프론트엔드

This post is licensed under CC BY 4.0 by the author.