RESEARCH LAB · SEOUL · 2026

SLOW.DEEP,SHARE.

Slides and long-form research notes by yceffort — deep dives into the frontend stack, presented one slide at a time.

25 slides

All slides

Offline →

#web-performance#bundler

외부 SDK를 다시 조립하기: 줄여야 할 코드, 지켜야 할 브라우저 동작

상수 하나에서 시작한 외부 SDK 재구성. 초기화 경로의 import를 끊고 엔트리와 배포 구조를 바꿔 웹 전송용 번들의 gzip 크기를 69% 줄였습니다. 엔트리 분리로 빠진 자동 이벤트와 페이지 이탈 전송, history 패치가 숨긴 테스트 실패를 통해 지켜야 할 브라우저 동작까지 살펴봅니다.

2026-09-1547 slides

#react#data-fetching#async

useQuery는 왜 스스로 suspend하지 못할까

처음 마운트되는 중에 suspend된 컴포넌트는 아무것도 남기지 못한다. 이 사실 하나로 useSuspenseQuery의 렌더 중 요청부터 experimental_prefetchInRender의 도입과 제거까지 실험으로 따라간다.

2026-10-1029 slides

#web-performance#animation

로티 딥다이브 1부: 병목을 찾는 법

로티 애니메이션이 늦게 뜨는 화면에서 배포 번들과 응답 헤더, 에셋 내부를 직접 뜯어 병목을 특정하는 과정. 추측 대신 측정으로 시작하는 성능 조사

2026-09-1782 slides

#web-performance#animation#browser

로티 딥다이브 2부: 렌더러 안에서

dotlottie-web의 인스턴스 생애와 프레임 루프, freezeOnOffscreen의 3중 방어를 번들 코드로 읽는다. 우리가 직접 만든 최적화가 왜 중복이었는지, 기본값을 덮어써서 오히려 비용을 올린 곳은 어디인지

2026-09-1763 slides

#caching#networking#web-performance

CDN과 HTTP 캐시 2: 전략과 문제 해결

HTML·JS·이미지·폰트·API의 캐시 정책을 정하고, 배포 순서와 DevTools로 캐시 문제를 진단하는 실무 강의

2026-09-1159 slides

#caching#networking#web-performance

CDN과 HTTP 캐시 1: 원리와 규칙

CDN의 동작과 HTTP 캐시 규칙을 익히고, 우리 서비스의 응답 헤더로 저장·신선도·재검증을 해석하는 강의

2026-09-1155 slides