브라우저, Node.js의 이벤트 루프와 차이
브라우저 VS Node.js의 이벤트 루프 차이 브라우저 이벤트 루프(Event Loop)란브라우저의 이벤트 루프에 대해서는 지난글에 다뤘으니, 링크만 걸어두겠다.[챗지피티와 공부를 해보자] 이벤트 루프와 비동기 처리 + 가비지 컬렉션과의 연관 Q. 브라우저 이벤트 루프 관련해서만 요약해줘A. 해당 블로그 글에서는 자바스크립트의 이벤트 루프와 비동기 처리, 그리고 가비지 컬렉션 간의 관계를 다루고 있다. 주요 내용을 요약하면 다음과 같다.이벤트 루프(Event Loop)자바스크립트는 싱글 스레드 기반으로 한 번에 하나의 작업만 실행할 수 있다.하지만 비동기 작업(예: HTTP 요청, setTimeout)을 처리하기 위해 이벤트 루프 메커니즘을 사용한다.이벤트 루프는 콜 스택(Call Stack)..
02. 홈페이지가 사용자에게 웹 사이트를 보여주는 과정을 간략히 설명해주세요. (브라우저 렌더링 포함)
사용자 동작을 나열하며 간략히 공부해보자. >>> 사용자 동작 시작 1. https://okayoon.tistory.com/ 를 검색한다. 2. DNS(Domain Name System)에서 주소를 검색, 해당 ip 주소를 찾아서 사용자가 입력한 URL과 함께 전달한다. - 이때 캐싱된 DNS 기록이 있는지 먼저 확인한다. 3. 전달받은 ip 주소를 이용하여 웹 브라우저는 웹 서버에게 해당 웹 사이트의 리소스를 요청하고 해상 웹 서버는 리소스를 전달한다. >>>> 전달받은 리소스를 통해 브라우저 렌더링 과정 시작 4. DOM Tree 구축을 위해 HTML을 파싱한다. - DOM Tree는 문서 객체 모델로 모든 요소, 속성, 텍스트 등 (문서노드, 요소노드, 속성노드, 텍스트노드)을 트리 구조로 표현한 ..
01. 브라우저 구조에 대해 간략히 설명해주세요.
브라우저 구조에 대해 간략히 공부해보자. 1. User Interface (사용자 인터페이스) 사용자가 접근할 수 있는 모든 영역을 말한다. 즉, 페이지를 보여주는 창(사이트)을 제외한 나머지 모든 부분을 말한다. ex: 주소표시줄, 이전이나 다음 혹은 새로고침 버튼등. 2. Browser Engine (브라우저 엔진) User Interface와 Rendering Engine 두 사이의 동작을 제어한다. (연결 부분이 된다.) 자료 저장소(Data Storage)를 참조하고 있어서 로컬에 데이터 저장 및 읽기 등의 작업을 할 수 있다. 3. Rendering Engine (렌더링 엔진) 웹 서버로 부터 받은 자원을 브라우저 상에 표시하기 위한 작업을 한다. 즉, *HTML과 CSS을 파싱하는 동작을 한..
[아티클 프로젝트 041] Javascript DOM(Document Object Model)과 BOM(Browser Object Model)
Javascript DOM(Document Object Model)과 BOM(Browser Object Model) 일단 DOM(Document Object Model)과 BOM(Browser Object Model)을 알기 전에 Window 객체를 알아야합니다. Window Object 모든 브라우저로부터 지원을 받으며 브라우저 전체를 담당하는 객체이자 최상위 객체입니다. Window 객체에는 DOM, BOM 그리고 Javascript Core가 있습니다. 문서 객체 모델(DOM, Document Object Model) 객체 지향의 모델로서 구조화된 문서를 표현하는 방식입니다. 프로그래밍언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 동적으로 문서의 내용, 구조, 스타일을 변경할 수 있습니다. ..