입력창이 로딩되는 동안에도 타이핑할 수 있을까요? claude.ai는 React가 준비되기 전에 입력창부터 띄워 이 기다림을 줄였습니다. 캐시 때문에 화면 갱신을 놓친 React-Redux와 업데이트 전에 살펴볼 도구 소식도 담았습니다.

이번 이슈 한눈에#

• React 없이 먼저 받는 입력, 캐시에 막힌 화면 업데이트
• MSW 3.0, SvelteKit 3, Remix 3에서 바뀌는 설정
• 취소 버튼을 눌렀는데도 계속되는 HTTP 재시도
• CSS로 간격 감지하기, 브라우저의 외부 연결 제한

React가 준비되기 전에 입력창부터 띄우기#

사이트가 로딩 중이어도 입력부터 할 수 있다면 기다림이 덜 답답하겠죠. claude.ai는 HTML에 입력창을 먼저 넣고, React가 준비되면 실제 입력창으로 바꿉니다.

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

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

원문 읽기

React-Redux 캐시가 화면 업데이트를 놓친 이유#

React-Redux 9.4 알파는 상태가 바뀔 때 관련된 계산만 다시 실행해 화면 갱신 비용을 줄이려 했습니다. 그런데 계산 결과를 재사용하는 캐시와 맞물리면서 일부 컴포넌트가 업데이트를 받지 못했습니다.

어떤 상태를 읽었는지 기록해야 하는데, 캐시가 계산을 생략하면서 기록도 빠진 겁니다. alpha.1은 계산마다 새로운 추적 객체를 만들어 상태를 읽는 과정이 실행되도록 고쳤습니다.

• 기존 Provider와 useSelector는 그대로입니다. 새 기능 useSignalSelector는 선택해서 쓰는 초기 알파입니다.
• 업데이트가 빠져 빨라 보였던 벤치마크도 수정했습니다. 제대로 갱신하도록 고친 뒤 일부 조건에서는 기존 방식보다 느렸습니다.
• 새 기능은 상태를 불변으로 갱신하는 방식이 전제입니다. 기존 객체를 직접 고치면 변경을 놓칠 수 있습니다.

원문 읽기

MSW 3.0: 가짜 API 응답을 만드는 방식이 바뀌었다#

테스트할 때 실제 서버를 부르는 대신 원하는 API 응답을 돌려주는 도구가 MSW입니다. 3.0에서는 Node.js의 요청을 네트워크 연결 단계에서 가로채도록 바꿨습니다. 지원하는 Node.js 버전도 올라갑니다.

• 패키지는 ESM 전용으로 바뀌었습니다. Node.js 18·20 지원은 끝나고 22·24·26을 지원합니다.
• 기존 setupServer와 setupWorker는 계속 사용할 수 있습니다.
• 새 API defineNetwork는 요청을 받는 부분과 처리하는 부분을 나눕니다. 브라우저의 네트워크 기록인 HAR 파일 등을 연결할 수도 있지만, 아직 실험 단계입니다.

원문 읽기

취소를 눌렀는데 요청이 한 번 더 나간다면#

실패한 요청이 재시도를 기다리던 중 사용자가 취소를 눌렀습니다. 대기 타이머도 멈출까요? 11개 HTTP 라이브러리를 비교한 테스트에서는 6개가 즉시 종료되지 않았고, 그중 5개는 취소 뒤에도 추가 요청을 시도했습니다.

• 100ms의 재시도 대기 중 20ms 시점에 취소한 결과입니다. 요청의 취소 신호(AbortSignal)를 넘겨도 대기까지 함께 멈추는지는 달랐습니다.
• 고정한 패키지 버전을 대상으로 한 테스트입니다. 작성자가 검사한 취소 조건이 각 라이브러리의 문서상 보장보다 엄격할 수 있습니다.

원문 읽기

Vite에서 Oxc React Compiler 켜기#

React 코드를 컴파일하면서 최적화를 적용하는 Oxc React Compiler를 Vite에서 켜는 설정이 소개됐습니다. @vitejs/plugin-react 6.1.0 이상과 oxc-transform-react를 설치하고 react({ compiler: true })로 켭니다.

원문 읽기

React 앱의 기능을 AI가 호출할 도구로 등록하기#

webmcp-react는 앱의 기능을 AI가 호출할 수 있는 도구로 등록하는 React 훅 라이브러리입니다. 컴포넌트가 화면에 붙을 때 등록하고, 제거될 때 함께 해제하므로 도구의 수명을 컴포넌트와 맞출 수 있습니다.

• WebMCP는 아직 제안 단계의 웹 API입니다. 브라우저가 지원하지 않으면 polyfill로 기능을 보충합니다. 웹페이지에 직접 접근하지 못하는 MCP 클라이언트는 Bridge 확장으로 연결합니다.
• 에이전트가 호출을 취소할 때 실행 중인 함수에도 취소 신호를 전달하는 기능은 Chrome 153 이상에서 동작합니다. 이전 브라우저의 대체 신호는 취소되지 않습니다.

원문 읽기

선 그래프에 막대 하나 얹고 싶을 때#

TanStack Charts 1.0은 선·점·막대를 직접 조합해 차트를 만듭니다. 선 그래프 위에 막대나 강조할 점을 더하고, 필요하면 그리는 방식이나 데이터를 축 값으로 바꾸는 규칙도 직접 확장할 수 있습니다.

원문 읽기

장식이 본문에 너무 가까워지면 CSS로 숨기기#

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

• anchor positioning, scroll-driven animations, style query가 필요합니다. 지원하는 브라우저에서만 장식 효과를 더하는 용도로 소개한 기법입니다.

원문 읽기

이 페이지에서 연결할 수 있는 주소만 허용하기#

Chrome 152는 페이지가 정해 둔 주소로만 네트워크에 연결하도록 제한하는 Connection-Allowlist 헤더를 지원합니다. 신뢰하지 않는 외부 코드를 실행할 때, 그 코드가 아무 주소로 데이터를 보내지 못하도록 연결 범위를 정하는 기능입니다.

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

원문 읽기

SvelteKit 3: 설정 파일과 기본 import 경로가 바뀐다#

설정은 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입니다. 기존 프로젝트는 이 조건부터 확인해야 합니다.

원문 읽기

Remix 3: UI용 import 경로도 함께 옮기기#

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

• 기본 UI 요소와 애니메이션은 별도 @remix-run/ui 패키지로 분리됐습니다. 이 패키지는 아직 불안정한 0.x 버전이며 독립적으로 버전을 관리합니다.
• 기존에 스타일이 적용돼 있던 UI 컴포넌트와 스타일 mixin은 제거됐습니다.

원문 읽기

화면을 그리지 않고 페이지를 읽는 Lightpanda 1.0#

자동화용 브라우저 Lightpanda는 HTML과 JavaScript를 실행하지만 화면을 그리지는 않습니다. 웹페이지의 데이터를 읽는 작업에 쓰며, 레이아웃 검사나 실제 페이지의 스크린샷을 얻는 용도로는 사용할 수 없습니다.

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

원문 읽기