구리

지난 글에서는 JavaScript 엔진의 기본적인 동작 원리(소스코드가 컴파일되는 과정)에 대해 알아보았습니다. 이번 글에서는 JavaScript 엔진이 컴파일된 코드를 어떤 기준으로 순서를 정해 실행하는지에 대해 알아보겠습니다. 참고로 프로세스와 스레드 관련 정리 글을 읽으시면 이해에 더 도움이 될 수 있습니다. 목차 사전 지식 실행 컨텍스트 자바스크립트 엔진 구조 콜백 함수 본문 컴파일과 실행 능률적으로 일하기 (web API, Callback Queue, event loop) Browser Web APIs Callback Queue Task Queue MicroTask Queue Render Queue Event Loop 결론 Event Loop 동작과정 Queue 우선 순위 실행 컨텍스트 코드를 ..

이번 글은 JavaScript 엔진(구글 V8 엔진 기준)이 코드를 어떻게 실행하는지에 대해 알아보는 글입니다. 자바스크립트 엔진의 동작 원리를 크게 2단계로 나눠 (2) 소스 코드가 컴파일되기까지의 과정의 주제를 현재 글에서 다루며 (2) 컴파일 후 실행되는 과정은 다음 글에서 다룰 예정입니다. 사전 지식 브라우저 동작 원리 JavaScript 동작 원리 JITC AJITC 본문 V8엔진 동작원리 비최적화 컴파일러 결론 브라우저 동작원리 브라우저는 서버로부터 전달 받은 HTML 파일을 파싱하다 script 태그를 만나면 네트워크 레이어를 통해 JavaScript 파일을 로드 후 JavaScript 엔진에게 제어권을 넘겨 파싱과 실행 단계를 진행하게 됩니다. (브라우저의 동작원리에 대해 자세히 알고 싶다..

어떤 키워드 (사과 요리)를 검색했을 때, 관련 사이트 목록뿐만 아니라 다양한 컨텐츠 형식(레시피)을 볼 수 있습니다. 이는 페이지에 구조화된 데이터를 포함하기 때문에 가능하며 사용자에게 더욱 효과적인 검색결과를 제공해 웹사이트와 더 많은 상호작용을 하도록 유도할 수 있습니다. 이때 구조화된 데이터를 만들기 위한 방법 중 하나로 사용되는 것이 JSON-LD입니다. JSON 탄생 배경 JSON-LD를 알아보기 전, 먼저 JSON의 탄생 배경에 대해 알아보겠습니다. JSON은 XML의 대안으로 더 쉽게 데이터를 교환하고 저장하기 위해 고안되었습니다. XML(Extensible Markup Language)은 HTML과 비슷한 문자 기반의 마크업 언어로 무언가를 실행하는 언어가 아닌 데이터를 표현하는 '형식'..

웹 성능 지표를 개선하는 방법에 대해 공부하며 정리한 글입니다. 웹 성능 최적화를 위해서 다양한 방법들을 사용합니다. 이때 웹 성능은 어떻게 측정될까요? 웹페이지의 퍼포먼스를 지속적으로 개선하기 위해선 측정할 수 있는, 수치화된 지표가 필요합니다. Web Vitals이라는 지표는 구글에서 제안하는, 더 나은 웹페이지 개발을 위한 가이드라인으로 아래 3가지 핵심 지표들을 포함하고 있습니다. LCP (Largest Contentful Paint) FID (Firsr Input Delay), TBT (Total Blocking Time) CLS (Cumulative Layout Shift) LCP (Largest Contentful Paint) LCP는 페이지 내용이 화면에 얼마나 빨리 나오는지를 측정하기 위..

브라우저 구성 요소 사용자 인터페이스 (User Interface) 요청 페이지를 보여주는 창을 제외한 나머지 부분 (주소 표시줄, 이전, 다음 버튼, 북마크 메뉴 등) 브라우저 엔진 (Browser Engine) UI와 렌더링 엔진을 연결하는 역할 사용자가 UI 주소 표시줄에 URI 입력시, URI를 전달받은 브라우저 엔진이 자료 저장소에서 해당 URI에 알맞은 자료를 찾음 자료가 있을 경우 → 해당 자료를 렌더링 엔진에게 전달 자료가 없을 경우 → URI 값만 렌더링 엔진에게 전달 렌더링 엔진 (Rendering Engine) 브라우저 엔진으로부터 전달받은 URI를 네트워크 레이어에 전달해 데이터(HTML, CSS, JS)를 받음 HTML, CSS를 파싱하고 JS 파일은 JS 해석기에게 전달해 파싱된..