이슈 #1 — GitHub가 렌더링 비용을 줄인 방법
100만 줄짜리 PR의 가상화와 CSS Modules 전환 이야기. React-Redux 9.4 알파, Vite+ 1.0, Preact 11 소식도 골랐습니다.
GitHub가 큰 PR을 화면에 그리는 방법과 CSS Modules로 옮긴 과정을 공개했습니다. 두 글을 먼저 소개하고, React-Redux의 새 selector와 개발 도구·브라우저 소식을 이어서 담았습니다.
100만 줄의 PR을 화면에 그리려면
PR 하나에 파일 2,200개와 변경 100만 줄이 들어오면 어떻게 화면에 그려야 할까요? GitHub는 코드 줄과 리뷰 댓글을 나눠서 다뤘습니다. 코드 줄은 높이를 미리 알 수 있지만 댓글은 렌더링해봐야 높이가 나오기 때문이죠.
댓글은 화면 근처에서 크기를 측정합니다. 그 결과로 높이가 달라지면 사용자가 보고 있던 위치에 맞춰 스크롤을 보정합니다. 글에서는 가상화 중에 생긴 빈 공간과 스크롤 튐을 추적한 과정도 설명합니다.
CSS를 더 보내고 렌더링 비용을 줄인 GitHub
GitHub가 styled-components에서 CSS Modules로 옮겼습니다. 컴포넌트가 많아질수록 런타임에서 스타일을 계산하고 수집하는 비용도 커졌는데요. Primer를 전환한 뒤에는 서버 렌더링 시간이 55% 줄었다고 합니다. 기존의 동적인 sx 스타일을 새 구조로 옮긴 과정도 함께 설명합니다.
React-Redux가 selector의 의존성을 추적합니다
Redux의 상태가 바뀌면 구독 중인 selector는 결과가 달라졌는지 다시 확인합니다. React-Redux 9.4 알파의 useSignalSelector는 selector가 읽은 상태 경로를 추적해서, 해당 경로가 바뀌었을 때만 다시 실행합니다.
기존 useSelector와 같은 형태라 일부 컴포넌트부터 바꿀 수 있습니다. 아직 초기 알파이고, 구독이 많은 화면의 dispatch 비용을 줄이기 위한 구현입니다.
Vite+ 1.0, 개발 도구를 하나의 설정으로
Vite+ 1.0이 Vite, Vitest, 린터와 포매터를 하나의 설정과 vp 명령으로 묶었습니다. 도구들을 따로 업데이트하며 버전 조합을 맞추는 대신 함께 검증된 버전을 사용합니다. 기존 프로젝트를 옮기는 vp migrate는 설정을 바꾸기 전에 변경 계획을 보여줍니다.
Preact 11에서 달라진 hydration과 ref
Preact 11은 hydration을 새로 구현하고 ref를 자동으로 전달합니다. 훅의 인자는 Object.is로 비교합니다. Preact X에서 크기·성능과 호환성을 유지해온 뒤의 주요 버전 변경이며, 발표 글에 기존 프로젝트를 옮길 때의 마이그레이션 가이드도 연결되어 있습니다.
페이지가 통신할 수 있는 서버를 제한하는 헤더
Chrome 152의 Connection-Allowlist는 문서와 worker가 연결할 수 있는 주소를 서버 응답 헤더로 제한합니다. 외부 스크립트나 생성된 코드가 들어오는 화면의 통신 범위를 브라우저에서 제한할 수 있습니다.
이 헤더를 적용하면 리다이렉트와 WebRTC도 기본적으로 막힙니다. 기존 통신을 깨뜨릴 수 있으므로 처음에는 Report-Only 모드에서 어떤 요청이 차단될지 확인하는 편이 좋겠습니다.