본문 바로가기

딥 다이브62

[모던 JS Deep Dive] 39장 - DOM 39.0 DOM - DOM: HTML 문서의 계층적인 구조와 정보를 표현, 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 39.1 노드 - HTML 요소와 노드 객체 - 트리 자료구조 - 노드들의 계층 구조 - 비선형 자료구조 - DOM(Document Object Model): 노드 객체들로 구성된 트리 자료구조 - 노드 객체의 타입 (총 12개 종류) - 문서 노드 - DOM 트리 최상위에 존재하는 루트 노드, document 객체 가리킴 - 모든 JS 코드는 전역 객체 window의 document 프로퍼티에 바인딩 되어 있는 하나의 document 객체 공유 - HTML 문서당 document 객체는 유일 - DOM 트리 노드 진입 위한 엔트리 포인트 역할 - 요소 .. 2022. 1. 25.
[JS 스터디 1기] - 열 번째 미팅 2022.01.23.일 온라인으로 JS 스터디 열 번째 미팅을 했습니다. 브라우저 렌더링과 HTTP에 대해서 살펴봤습니다. 브라우저가 서버에게 요청한 HTML 문서를 받아와서 그 HTML 문서를 어떻게 parsing 하고 렌더링 엔진의 DOM과 CSSOM 트리가 만들어지는지 알아보고 JS 엔진의 파싱 과정도 정리했습니다. 기술 면접에서 가끔 나오는 리플로우와 리페인트의 개념을 간단히 보면서 HTTP/1.1 과 2.0의 차이도 정리했습니다. HTTP/1.1은 단방향이면서 동시에 여러 요청과 응답을 받지 못하는 반면에 HTTP/2.0은 병렬적으로 여러 리소스를 동시에 요청하고 응답받을 수 있습니다. HTTP 관련된 부분은 네트워크 분야라 책에 내용이 많이 있지 않아서 개별적으로 추가 학습이 필요합니다. 다음.. 2022. 1. 23.
[JS 스터디 1기] - 아홉 번째 미팅 2022.01.22.토 온라인으로 JS 스터디 아홉 번째 미팅을 했습니다. 오늘은 딥 다이브 교재 위주로 스터디를 진행했습니다. Number, Math, Date 표준 빌트인 객체에 대해서 간단히 알아보고 이어서 정규 표현식, String, Symbol에 대해서 정리했습니다. Symbol.iterator 개념을 이용하여 이터러블, 스프레드, 디스트럭처링 할당을 빠르게 훑고 마지막으로 Set과 Map이라는 자료구조에 대해 학습했습니다. 사실 이전까지 학습했던 실행 컨텍스트나 클로저에 비하면 상대적으로 어렵지 않은 단원입니다. 프로토타입이나 클래스 개념에 비해 상대적으로 분량도 적어서 빠르게 정리했습니다. 다음주에 스터디가 종료되므로 가능하면 다음주까지 최대한 전 범위 끝까지 다루려고 합니다. 마지막까지 최.. 2022. 1. 22.
[모던 JS Deep Dive] 38장 - 브라우저의 렌더링 과정 38.0 브라우저의 렌더링 과정 - 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 parsing(해석)하여 브라우저에 rendering? - parsing(구문 분석); 텍스트 문서의 문자열을 토큰으로 분해 (어휘 분석) 이후 구문 트리를 생성하는 과정 - rendering; HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 - 브라우저의 렌더링 과정 (Critical Rendering Path) - 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 서버로 요청하고, 응답 받음 - 렌더링 엔진은 서버로부터 응답된 HTML, CSS 파싱하여 DOM과 CSSOM 생성, 결합 -> 렌더 트리 생성 - JS 엔진은 서버로부.. 2022. 1. 21.
반응형

티스토리툴바