Frontend Archive
오프라인

스터디 1회차

이 회차에 나눈 글 4개입니다.

아티클 목록

Sentry 도입후에도 console을 찍고 있는 당신에게 (ft. 그대들의 Sentry는 안녕하신가요?)

Sentry 도입후에도 console을 찍고 있는 당신에게 (ft. 그대들의 Sentry는 안녕하신가요?)

요즘 한창 핫한 라이브러리가 있다!바로 Pretext로 AI를 중심으로 돌아가는 이 세상 속에서 순수한 JS 라이브러리가 이렇게 언급이 많이 된다는 게 신기하기도 하고 도대체 무슨 라이브러리이고 어떤 것들을 할 수 있는지 알아보고자 한다. 1. Pretext는 무엇인가?Pretext는 한마디로 "DOM 없이 텍스트 레이아웃을 계산하는 순수 자바스크립트 함수" 라고 할 수 있다.기존에는 요소의 높이를 측정하기 위해서는 요소가 화면에 그려진 후에 offsetHeight, clientHeight, getBoundingClientRect() 함수들을 이용해서 값을 가져올 수 있었다.즉, 정확한 요소의 주도권이 DOM에게 있는 상황이었고, 우린 그걸 매번 DOM에게 요청하곤 했다.여기까진 그래서? 지금까지 잘 요..

메인스레드 쉬는 시간 압수하기

메인스레드 쉬는 시간 압수하기

브라우저의 메인 스레드는 언제나 바쁘다현대 웹 애플리케이션, 특히 복잡한 UI와 수많은 서드파티 스크립트(GTM, Ads, Maps 등)를 품은 페이지에서 메인 스레드 블로킹은 필연적입니다. 메인 스레드가 막히면 TBT(Total Blocking Time)가 치솟고, 사용자의 첫 입력 지연(FID)이 악화됩니다. 초기 렌더링에 당장 필요 없는 작업들을 어떻게 영리하게 뒤로 미룰 것인가?그 해답으로 적용했던 requestIdleCallback에 대해서 정리하고자 합니다. requestIdleCallback은 어떻게 동작하는가?우리가 매일 사용하는 웹 브라우저는 겉보기에 단순해 보이지만, 사용자에게 끊김 없는 화면을 보여주기 위해 1초에 60번(60Hz 기준) 엄청난 속도로 화면을 다시 그립니다. 이 한 ..