전체 글 (19) 썸네일형 리스트형 Event Loop와 Task Queue의 동작 시각화 setTimeout의 실행 순서에 대해 이해하기가 쉽지 않았습니다. 또, Event Loop의 구조 전체를 시각적으로 파악하고 싶었지만, 자료를 찾기 쉽지 않았습니다. 저와 같이 Event Loop가 머릿속에 그려지지 않는 분들에게 이 글이 조금이라도 도움이 되었으면 합니다. Event LoopJavaScript는 초기에 한 번에 하나의 작업만 처리하도록 설계되었습니다. 하지만 시간이 지나고, 여러 가지 작업을 동시에 처리할 일들이 생기기 시작했습니다. 이벤트루프는 이런 비동기 처리를 지원합니다. 간단히 말하면, Task Queue에 있는 작업을 Call Stack으로 이동시키는 역할을 합니다. 그리고 좀 더 상세하게는 다음과 같습니다.Task Queue에 작업이 있으면, Call Stack이 비었는지 .. Core Web Vitals Web Vitals 웹에서 훌륭한 사용자 경험을 제공하기 위해, 필수적인 성능 지표에 대해 지침을 제공하는 Google의 개발 도구입니다. 그 간, Google은 성능 측정을 위해 다양한 도구를 제공해 왔습니다. 이런 다양한 도구와 지표를 버거워하는 사람들을 위해, 사이트에서 가장 중요한 지표인 Core Web Vitals에 초점을 맞추어 지원합니다. Core Web Vitals 아래 세 가지 지표는 사용자 경험에 영향을 미치는 가장 핵심적인 지표입니다. LCP(Largest Contentful Paint): 로딩 성능 지표입니다. 페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 최대 콘텐츠(이미지, 텍스트 블록 등)의 렌더링 시간을 측정합니다. HTML 요소들은 단계별로 로드되며, 각.. Failed to load module script - ViteJS Typescript 문제 발견 Vite + Vanilla JS를 이용해서 간단한 웹을 개발했습니다. 하지만, github pages로 배포하는 과정(참고 문서)에서 아래 이미지와 같은 이슈가 발생했습니다. 에러 내용을 확인해 보니, 브라우저가 index.html에 있는 script 태그를 읽지 못했습니다. 그래서 main.js에 작성되어 있던 js 로직과 import 된 css를 읽지 못했고, style과 사용자 인터렉션이 하나도 없는 깡통 html만 렌더링 되었습니다. ...body tags 원인 파악과 해결 초기에는 github page가 레포지토리 이름으로 렌더링 되도록 설정했습니다. 이후 정상적으로 배포되는 걸 확인한 후, url이 github.io로 끝나도록(https://{username}.github.io) 변.. 이전 1 2 3 4 5 6 7 다음
