React-Redux 9.4 alpha에서 일부 컴포넌트의 업데이트가 누락됐어요. 변경과 관련된 selector만 다시 실행하려 했는데, Reselect 캐시가 계산을 건너뛰면서 selector가 읽은 상태 경로를 기록하지 못한 겁니다.

alpha.1은 평가마다 새로운 루트 Proxy를 만듭니다. 상태를 읽는 과정을 거치게 해서 추적 기록이 빠지지 않도록 고쳤어요.

• 기존 Provider와 useSelector는 그대로예요. 새 useSignalSelector는 선택해서 쓰는 초기 alpha 버전입니다.
• 업데이트 누락으로 빨라 보였던 benchmark도 수정했어요. 수정 후 일부 조건에서는 기존 useSelector보다 느렸습니다.
• 상태는 불변으로 갱신해야 해요. 기존 객체를 직접 수정하면 변경을 놓칠 수 있습니다.

claude.ai는 React가 초기화되기 전에 HTML의 정적 입력창에서 타이핑을 받아요. React가 준비되면 실제 입력창으로 바꿉니다.

입력창이 바뀌는 순간에도 계속 타이핑하는 테스트를 돌려서, 입력한 글자가 빠지지 않는지 확인했어요. 먼저 띄울 입력창은 실제 React 컴포넌트에서 생성합니다. 14개 화면 크기에서 두 입력창의 위치 차이가 1px 이내인지도 확인했습니다.

이 작업을 포함한 여러 성능 개선 뒤, 페이지를 새로 열어 입력할 수 있을 때까지 걸린 시간은 p75 기준 3.1초에서 0.55초로 줄었어요. 측정한 페이지 로딩 중 75%가 0.55초 안에 입력할 수 있었다는 뜻입니다.

HTTP 요청에 AbortSignal을 넘겨도 retry를 기다리는 타이머까지 바로 멈추는지는 라이브러리마다 달랐어요. 11개 HTTP 라이브러리를 비교한 테스트에서 6개가 즉시 종료되지 않았고, 그중 5개는 취소 뒤에도 추가 요청을 시도했습니다.

• 100ms의 재시도 대기 중 20ms 시점에 취소한 결과예요. 요청과 대기 타이머가 함께 취소되는지를 본 겁니다.
• 고정한 패키지 버전으로 테스트했어요. 작성자가 검사한 취소 조건이 각 라이브러리의 문서상 보장보다 엄격할 수 있습니다.

MSW 3.0은 Node.js 18·20 지원을 끝내고 22·24·26을 지원해요. 패키지도 ESM 전용으로 바뀌었습니다.

Node.js의 요청을 가로채는 위치는 네트워크 연결 단계로 옮겼어요.

• 기존 setupServer와 setupWorker는 계속 쓸 수 있어요.
• 새 API defineNetwork는 요청을 받는 부분과 처리하는 부분을 나눠요. 브라우저의 네트워크 기록인 HAR 파일 등을 연결하는 기능도 있지만, 아직 실험 단계입니다.

Vite에서 Oxc React Compiler를 켜려면 @vitejs/plugin-react 6.1.0 이상과 oxc-transform-react가 필요해요. 설정은 아래처럼 compiler: true를 넣으면 됩니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
  plugins: [react({ compiler: true })],
});

webmcp-react는 앱의 기능을 AI가 호출할 도구로 등록하는 React 훅 라이브러리예요. 컴포넌트가 mount될 때 등록하고 unmount될 때 해제합니다.

• WebMCP는 아직 제안 단계의 웹 API예요. 지원하지 않는 브라우저에서는 polyfill을 쓰고, 웹페이지에 직접 접근하지 못하는 MCP 클라이언트는 Bridge 확장으로 연결합니다.
• 에이전트가 호출을 취소했을 때 실행 중인 함수에도 취소 신호를 전달하려면 Chrome 153 이상이 필요해요. 이전 브라우저의 대체 신호는 취소되지 않습니다.

TanStack Charts 1.0은 선·점·막대 같은 그래프 요소(mark)를 조합해서 차트를 만들어요. 선 그래프 위에 막대나 강조할 점을 얹는 식입니다. 좌표 변환 규칙(scale)이나 그리는 방식(renderer)도 필요에 맞게 확장할 수 있어요.

움직이는 장식이 글 가까이 붙으면 숨기고 싶을 때 쓰는 CSS 기법이에요. 두 요소 사이의 간격을 재는 영역에 너비 20px짜리 가상 요소를 넣고, 간격이 좁아져 가상 요소가 넘치면 장식을 숨깁니다.

anchor positioning, scroll-driven animations, style query가 모두 필요해요. 지원하는 브라우저에서만 장식 효과를 더하는 용도로 쓴 예제입니다.

Chrome 152의 Connection-Allowlist 헤더로 페이지가 연결할 주소를 정할 수 있어요. 신뢰하지 않는 외부 코드를 실행할 때, 그 코드가 아무 주소로 데이터를 보내지 못하게 제한합니다.

• 외부 코드는 별도 출처나 sandbox로 격리한 iframe에서 실행해야 해요. 같은 출처에 두면 제한을 우회할 수 있습니다.
• 리다이렉트와 WebRTC는 기본 차단이에요. 필요하면 각각 허용해야 합니다. Connection-Allowlist-Report-Only 헤더를 쓰면 실제 차단 전에 위반 보고만 받아볼 수 있어요.

SvelteKit 3에서는 설정을 svelte.config.js에서 Vite 설정으로 옮겨요. 프로젝트의 공용 코드를 가져올 때 쓰던 $lib도 #lib로 바뀝니다.

아래 sv migrate 명령이 자동으로 옮길 수 있는 부분을 수정하고, 나머지 작업은 TODO로 남겨요.

• 최소 버전은 Node 22.17, TypeScript 6, Svelte 5.57.1, Vite 8.0.12, Svelte용 Vite 플러그인 7입니다.

npx sv migrate sveltekit-3 --tasks all --confirm

Remix 3의 첫 stable 버전이 나왔어요. 기존 remix/ui에서 가져오던 주요 기능은 remix/component로 옮겨야 합니다. JSX 설정과 개발 중 화면 갱신(HMR)에 쓰는 경로도 함께 바뀌었어요.

• UI primitives와 애니메이션은 별도 @remix-run/ui 패키지로 나눴어요. 이 패키지는 아직 unstable 단계의 0.x 버전이고 독립적으로 버전을 관리합니다.
• 기존에 스타일이 적용돼 있던 UI 컴포넌트와 style mixin은 제거됐어요.

- import { createRoot, css, on } from 'remix/ui'
+ import { createRoot, css, on } from 'remix/component'

Lightpanda는 DOM과 JavaScript를 처리하는 자동화용 브라우저예요. 그래픽 렌더링은 하지 않아서 웹페이지의 데이터를 읽는 작업에 쓰고, 레이아웃 검사나 실제 페이지의 스크린샷을 얻는 데는 쓸 수 없습니다.

1.0부터 페이지 안의 cross-origin fetch에도 CORS를 적용해요. 페이지를 여는 작업은 그대로지만, 다른 출처의 응답을 읽으려면 서버가 허용해야 합니다.