GitHub Copilot 앱은 파일 2,200개, 변경 100만 줄이 넘는 PR을 화면 주변의 코드와 댓글만 렌더링해서 처리해요.

어려운 쪽은 댓글이에요. 코드 줄은 높이를 미리 계산할 수 있지만, 댓글은 줄바꿈이나 이미지에 따라 높이가 달라집니다. 화면 근처의 댓글 높이를 측정하고, 예상과 다르면 읽던 줄이 같은 위치에 남도록 스크롤을 보정해요.

GitHub는 styled-components에서 CSS Modules로 옮겨, 실행 중 스타일을 만들고 수집하던 비용을 줄였어요. 스타일을 CSS 파일로 보내니 CSS 전송량은 늘지만 서버와 브라우저에서 하던 일이 줄어듭니다.

Primer 컴포넌트를 전환한 뒤 측정한 페이지 SSR 시간은 55% 줄었어요.

• 컴포넌트별 feature flag로 새 스타일을 켜고, visual regression test로 화면이 같게 나오는지 확인하며 순차 적용했어요.

React-Redux 9.4 alpha.0의 useSignalSelector는 selector가 읽은 상태 경로를 추적해요. dispatch 때 그 경로가 바뀌었는지 확인하고, 관련 selector만 다시 실행하는 방식입니다.

사용하려면 Provider를 SignalProvider로 바꿔야 해요. 그 안에서 일부 컴포넌트의 useSelector만 먼저 교체할 수 있습니다.

• 초기 alpha 버전이며, 기존 Provider·useSelector도 계속 사용할 수 있어요. 상태는 불변으로 갱신해야 합니다.

import { useSignalSelector } from 'react-redux'
 
function TodoText({ id }) {
  const text = useSignalSelector((state) => state.todos.byId[id].text)
  return <span>{text}</span>
}

Vite+ 1.0 stable 버전은 Vite, Vitest, Oxlint·Oxfmt 등 개발 도구를 하나의 vite.config.ts와 vp 명령으로 묶어요. 도구별 버전 조합을 따로 맞추는 대신 함께 검증된 묶음으로 업데이트합니다.

vp를 설치했다면 검사와 테스트를 아래처럼 실행할 수 있어요.

• 기존 프로젝트를 옮기는 vp migrate는 파일을 바꾸기 전에 변경 계획을 보여줘요. 규모가 큰 프로젝트는 추가 작업이 필요할 수 있습니다.

vp check
vp test

Preact 11은 hydration 중 비동기 경계 안에 DOM node가 없거나 여러 개여도 처리해요. ref는 함수 컴포넌트에 일반 prop처럼 전달할 수 있어서, preact/compat의 forwardRef로 감쌀 필요가 없어졌습니다.

• 훅 인자는 Object.is로 비교합니다. NaN을 state나 useEffect·useMemo의 dependency로 써도 같은 값으로 인식해요.
• 배포 형식은 ESM으로 바뀌었어요. 기존 CommonJS·UMD 사용 방식은 migration guide를 확인해야 합니다. TypeScript는 5.1 이상이 필요해요.

원문 읽기 · migration guide

Chrome 152의 Connection-Allowlist는 페이지와 worker가 연결할 수 있는 주소를 제한하는 HTTP 응답 헤더예요. 허용 목록에 없는 목적지로 연결하려 하면 브라우저가 차단합니다.

아래는 API 서버와 응답을 보낸 사이트의 origin을 허용하는 설정입니다. response-origin이 응답을 보낸 사이트를 뜻해요.

• redirect와 WebRTC는 기본적으로 차단돼요. 필요한 경우 각각 허용하는 옵션을 지정해야 합니다.
• 차단 없이 영향을 확인하려면 Connection-Allowlist-Report-Only를 씁니다. 위반 보고서를 받으려면 Reporting-Endpoints 설정도 필요해요.

Connection-Allowlist: ("https://api.example.com/*" response-origin)