JS frameworks, React/Vue/Svelte, and runtime updates Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 1-2026bolt1 CRITICAL
article
Signals 대 쿼리 기반 컴파일러
TAG: 언어 이론
Marvin Hagemeister는 UI 반응성에 쓰이는 Signals와 rust-analyzer 등 현대 LSP에서 사용하는 쿼리 기반 컴파일러 아키텍처를 구조적으로 비교합니다. 두 시스템 모두 지연 평가와 캐시된 중간 결과라는 동일한 핵심 원칙을 공유하지만, 변경 전파 방식에서 결정적인 차이를 보입니다. Signals는 푸시-풀 메커니즘을 사용하여 소스 값이 변경되면 활성 구독을 따라 더티 표시를 전파하고, Effect가 새 값을 당겨와 화면을 동기화합니다. 반면 쿼리 기반 컴파일러는 외부 호출이 있을 때만 재실행되며, 정확성은 전역 리비전 카운터와 각 노드의 changed_at / verified_at 필드로 보장합니다. 단방향 의존성 추적은 메모리 사용량을 줄이는 대신 확장성을 확보하는데, 컴파일러 그래프는 10만 개 이상의 노드를 가질 수 있기 때문입니다. 저자는 두 아키텍처를 혼합한 방식이 Vite와 같은 증분 개발 서버에 적합할지 묻는 열린 질문으로 글을 마무리합니다.
React Native Rewind 뉴스레터(#25)는 React의 새로운 취약점 두 가지를 공개합니다. 고심각도 서비스 거부(Denial of Service)와 중간 심각도 코드 노출(Code Exposure)로, 이슈 #24에서 다룬 Critical Server Components CVE와는 별개의 것입니다. 기사의 주요 내용은 알파 단계인 React Navigation 8.0으로, 네이티브 하단 탭이 기본값으로 변경되어 JavaScript 기반 탭을 사용하려면 명시적으로 지정해야 합니다. 이 변경은 주로 iOS의 Liquid Glass 때문입니다. useNavigation, useRoute, useNavigationState 훅이 화면 이름을 기반으로 타입을 자동 추론하면서 TypeScript 타입 설정의 번거로움이 크게 줄었습니다. 새 pushParams API는 화면 전환이나 스택 초기화 없이 화면 props를 업데이트하고 히스토리에 추가하여 뒤로 가기 시 이전 파라미터를 복원합니다. NavigationContainer에는 앱 종료 후에도 네비게이터 상태를 복원할 수 있는 persistor 속성이 추가되었습니다.
Node.js 컨트리뷰터 Joyee Cheung은 자신이 부활시킨 require(esm) 기능이 실험적 플래그에서 안정(stable) 상태로 전환되기까지의 과정을 회고합니다. 2025년 말 기준으로 v20.19.0 이상과 v22.12.0 이상 모든 지원 LTS 릴리스 라인에서 사용 가능합니다. 핵심 기술적 제약은 require()가 동기적으로 유지되어야 하므로 탑 레벨 await를 사용하는 모듈은 이 방식으로 로드할 수 없다는 점입니다. 2024년 9월 상위 5,000개 npm 패키지 분석 결과, 단 ~0.02%만이 이 컨텍스트에서 탑 레벨 await가 반드시 필요했으며, ESM 전용 패키지의 ~20%가 즉시 혜택을 받을 수 있었습니다. 이 기능 없이는 CommonJS가 배포 형식의 최소공분모였으며, 패키지 작성자들은 듀얼 패키지(두 개의 별도 모듈 인스턴스 위험 포함)나 faux-ESM(ESM 소스를 dist/에 CommonJS로 트랜스파일) 방식을 택해야 했습니다. v20으로의 백포트는 오픈 리그레션을 피하기 위해 119개 커밋에서 33개로 범위를 축소해야 했습니다. 이제 EOL Node.js 버전을 더 이상 지원할 필요 없는 패키지 작성자는 CommonJS 배포를 완전히 제거하고 package.json의 exports 필드를 단순화할 수 있습니다.
2025년 12월 31일 출시된 Rspack 1.7은 Rspack 2.0 이전 1.x 시리즈의 마지막 마이너 릴리스입니다. 가장 주요한 개선 사항은 SWC Wasm 플러그인 호환성으로, 버전에 민감한 rkyv 직렬화를 자기 기술적(self-describing) cbor로 교체하고 AST 열거형 타입에 Unknown 변형을 추가하여 기존 플러그인이 향후 SWC 업그레이드를 거쳐도 대부분 정상 동작하게 됩니다. Rspack CLI에서는 동적으로 임포트되는 모듈에 대해 지연 컴파일이 기본으로 활성화되어 초기 모듈 그래프를 줄이고 개발 서버 시작 속도를 높입니다. 상수 인라이닝(optimization.inlineExports로 제어), TypeScript 열거형 인라이닝(collectTypeScriptInfo.exportedEnum), 타입 재내보내기 검사의 세 가지 실험적 기능이 안정(stable)으로 승격되어 기존 플래그가 deprecated되었습니다. Rsbuild 1.7은 런타임 오류 오버레이(dev.client.overlay.runtime 옵션으로 활성화)와 빌드별 에셋 크기 변화 보고(performance.printFileSize.diff)를 추가하고, Rslib 0.19는 ESM 라이브러리 출력을 안정화하고 프로그래밍 방식 빌드를 위한 JavaScript API를 도입합니다. 플러그인 작성자는 빌드 실패를 피하기 위해 swc_core@54 이상으로 업그레이드해야 합니다.
Dani Sandoval의 2026년 1월 Svelte 월간 업데이트는 2025년 12월에 배포된 생태계 변경 사항을 다룹니다. 개발자에게 가장 영향이 큰 변경 사항은 render의 hydratable 설정에 추가된 csp 옵션(svelte@5.46.0, PR #17338)으로, Content Security Policy에 호환되는 방식으로 <head>에 <script> 블록을 인라인으로 삽입합니다. CSP를 엄격하게 적용하는 배포 환경에서 기존에 걸림돌이 되던 문제를 해결합니다. Svelte CLI(sv@0.11.0)는 이제 Cloudflare Workers와 Pages용 SvelteKit 프로젝트를 수동 설정 없이 완전히 구성할 수 있습니다. Vercel 어댑터(adapter-vercel@6.2.0 / adapter-auto@7.0.0)는 Node 24 런타임을 지원하고, Svelte MCP 서버는 JavaScript API와 CLI 모두로 도구를 노출합니다(mcp@0.1.16). 언어 도구 패키지는 이번 사이클에 상당한 성능 개선을 받았으므로 편집기 확장을 업데이트하는 것이 좋습니다.
TkDodo의 글(디자인 시스템 시리즈 3편)은 컴파운드 컴포넌트 패턴이 자주 잘못 적용된다고 주장합니다. 이 패턴은 자식 컴포넌트의 레이아웃을 사용자가 자유롭게 구성해야 하는 경우(예: <ButtonGroup>, <TabBar>, <RadioGroup>)에 탁월하지만, 동적 옵션 목록을 다루는 <Select>(props 기반 API가 더 적합)나 순서와 슬롯의 완결성이 중요한 <ModalDialog>에는 적합하지 않습니다. 핵심 TypeScript 과제는 JSX 자식이 부모의 타입 파라미터를 상속하지 않는다는 점으로, 완벽하게 타입이 지정된 RadioGroup<ThemeValue>도 각 RadioGroupItem 자식에 타입을 자동으로 전파하지 못합니다. 제시된 해결책은 createRadioGroup<T>() 팩토리 함수로, 미리 타입이 지정된 { RadioGroup, RadioGroupItem } 객체를 반환하며 제네릭을 기본값 never로 설정하여 호출자가 반드시 타입 인수를 제공하도록 강제합니다. 런타임 오버헤드가 없으면서도 호출 지점에서 부모와 자식 타입을 묶어 어노테이션 부담을 줄입니다. 단점은 소비자가 컴포넌트를 직접 임포트하는 대신 팩토리를 호출해야 한다는 것입니다.
Fabian(Coding2GO)은 React 개발자가 일상적으로 마주치지만 언어 기초 없이 React를 배우면 혼란스러울 수 있는 JavaScript 패턴 일곱 가지를 설명합니다. 객체(중괄호, 프로퍼티명 일치)와 배열(대괄호, useState 반환값에 활용)의 구조 분해 할당을 다루며, 스프레드 연산자(...)는 원본을 변경하지 않고 새 배열이나 객체를 생성하여 불변 상태 업데이트에 필수적입니다. map, filter, find, includes 배열 메서드는 데이터를 UI로 변환하거나 검색하는 데 사용됩니다. 삼항 연산자와 논리 && 연산자는 인라인 조건부 렌더링을 가능하게 합니다. 옵셔널 체이닝(?.)은 null일 수 있는 값에 접근할 때 충돌을 방지하고, nullish 병합 연산자(??)는 null/undefined일 때만 폴백을 제공합니다. ESM의 import/export는 다중 파일 컴포넌트 아키텍처를 연결하고, then/catch 또는 async/await를 이용한 Promise는 비동기 데이터 페칭을 처리합니다.
Marvin Hagemeister는 UI 반응성에 쓰이는 Signals와 rust-analyzer 등 현대 LSP에서 사용하는 쿼리 기반 컴파일러 아키텍처를 구조적으로 비교합니다. 두 시스템 모두 지연 평가와 캐시된 중간 결과라는 동일한 핵심 원칙을 공유하지만, 변경 전파 방식에서 결정적인 차이를 보입니다. Signals는 푸시-풀 메커니즘을 사용하여 소스 값이 변경되면 활성 구독을 따라 더티 표시를 전파하고, Effect가 새 값을 당겨와 화면을 동기화합니다. 반면 쿼리 기반 컴파일러는 외부 호출이 있을 때만 재실행되며, 정확성은 전역 리비전 카운터와 각 노드의 changed_at / verified_at 필드로 보장합니다. 단방향 의존성 추적은 메모리 사용량을 줄이는 대신 확장성을 확보하는데, 컴파일러 그래프는 10만 개 이상의 노드를 가질 수 있기 때문입니다. 저자는 두 아키텍처를 혼합한 방식이 Vite와 같은 증분 개발 서버에 적합할지 묻는 열린 질문으로 글을 마무리합니다.
Fabian(Coding2GO)은 React 개발자가 일상적으로 마주치지만 언어 기초 없이 React를 배우면 혼란스러울 수 있는 JavaScript 패턴 일곱 가지를 설명합니다. 객체(중괄호, 프로퍼티명 일치)와 배열(대괄호, useState 반환값에 활용)의 구조 분해 할당을 다루며, 스프레드 연산자(...)는 원본을 변경하지 않고 새 배열이나 객체를 생성하여 불변 상태 업데이트에 필수적입니다. map, filter, find, includes 배열 메서드는 데이터를 UI로 변환하거나 검색하는 데 사용됩니다. 삼항 연산자와 논리 && 연산자는 인라인 조건부 렌더링을 가능하게 합니다. 옵셔널 체이닝(?.)은 null일 수 있는 값에 접근할 때 충돌을 방지하고, nullish 병합 연산자(??)는 null/undefined일 때만 폴백을 제공합니다. ESM의 import/export는 다중 파일 컴포넌트 아키텍처를 연결하고, then/catch 또는 async/await를 이용한 Promise는 비동기 데이터 페칭을 처리합니다.
React Native Rewind 뉴스레터(#25)는 React의 새로운 취약점 두 가지를 공개합니다. 고심각도 서비스 거부(Denial of Service)와 중간 심각도 코드 노출(Code Exposure)로, 이슈 #24에서 다룬 Critical Server Components CVE와는 별개의 것입니다. 기사의 주요 내용은 알파 단계인 React Navigation 8.0으로, 네이티브 하단 탭이 기본값으로 변경되어 JavaScript 기반 탭을 사용하려면 명시적으로 지정해야 합니다. 이 변경은 주로 iOS의 Liquid Glass 때문입니다. useNavigation, useRoute, useNavigationState 훅이 화면 이름을 기반으로 타입을 자동 추론하면서 TypeScript 타입 설정의 번거로움이 크게 줄었습니다. 새 pushParams API는 화면 전환이나 스택 초기화 없이 화면 props를 업데이트하고 히스토리에 추가하여 뒤로 가기 시 이전 파라미터를 복원합니다. NavigationContainer에는 앱 종료 후에도 네비게이터 상태를 복원할 수 있는 persistor 속성이 추가되었습니다.
Node.js 컨트리뷰터 Joyee Cheung은 자신이 부활시킨 require(esm) 기능이 실험적 플래그에서 안정(stable) 상태로 전환되기까지의 과정을 회고합니다. 2025년 말 기준으로 v20.19.0 이상과 v22.12.0 이상 모든 지원 LTS 릴리스 라인에서 사용 가능합니다. 핵심 기술적 제약은 require()가 동기적으로 유지되어야 하므로 탑 레벨 await를 사용하는 모듈은 이 방식으로 로드할 수 없다는 점입니다. 2024년 9월 상위 5,000개 npm 패키지 분석 결과, 단 ~0.02%만이 이 컨텍스트에서 탑 레벨 await가 반드시 필요했으며, ESM 전용 패키지의 ~20%가 즉시 혜택을 받을 수 있었습니다. 이 기능 없이는 CommonJS가 배포 형식의 최소공분모였으며, 패키지 작성자들은 듀얼 패키지(두 개의 별도 모듈 인스턴스 위험 포함)나 faux-ESM(ESM 소스를 dist/에 CommonJS로 트랜스파일) 방식을 택해야 했습니다. v20으로의 백포트는 오픈 리그레션을 피하기 위해 119개 커밋에서 33개로 범위를 축소해야 했습니다. 이제 EOL Node.js 버전을 더 이상 지원할 필요 없는 패키지 작성자는 CommonJS 배포를 완전히 제거하고 package.json의 exports 필드를 단순화할 수 있습니다.
2025년 12월 31일 출시된 Rspack 1.7은 Rspack 2.0 이전 1.x 시리즈의 마지막 마이너 릴리스입니다. 가장 주요한 개선 사항은 SWC Wasm 플러그인 호환성으로, 버전에 민감한 rkyv 직렬화를 자기 기술적(self-describing) cbor로 교체하고 AST 열거형 타입에 Unknown 변형을 추가하여 기존 플러그인이 향후 SWC 업그레이드를 거쳐도 대부분 정상 동작하게 됩니다. Rspack CLI에서는 동적으로 임포트되는 모듈에 대해 지연 컴파일이 기본으로 활성화되어 초기 모듈 그래프를 줄이고 개발 서버 시작 속도를 높입니다. 상수 인라이닝(optimization.inlineExports로 제어), TypeScript 열거형 인라이닝(collectTypeScriptInfo.exportedEnum), 타입 재내보내기 검사의 세 가지 실험적 기능이 안정(stable)으로 승격되어 기존 플래그가 deprecated되었습니다. Rsbuild 1.7은 런타임 오류 오버레이(dev.client.overlay.runtime 옵션으로 활성화)와 빌드별 에셋 크기 변화 보고(performance.printFileSize.diff)를 추가하고, Rslib 0.19는 ESM 라이브러리 출력을 안정화하고 프로그래밍 방식 빌드를 위한 JavaScript API를 도입합니다. 플러그인 작성자는 빌드 실패를 피하기 위해 swc_core@54 이상으로 업그레이드해야 합니다.
Dani Sandoval의 2026년 1월 Svelte 월간 업데이트는 2025년 12월에 배포된 생태계 변경 사항을 다룹니다. 개발자에게 가장 영향이 큰 변경 사항은 render의 hydratable 설정에 추가된 csp 옵션(svelte@5.46.0, PR #17338)으로, Content Security Policy에 호환되는 방식으로 <head>에 <script> 블록을 인라인으로 삽입합니다. CSP를 엄격하게 적용하는 배포 환경에서 기존에 걸림돌이 되던 문제를 해결합니다. Svelte CLI(sv@0.11.0)는 이제 Cloudflare Workers와 Pages용 SvelteKit 프로젝트를 수동 설정 없이 완전히 구성할 수 있습니다. Vercel 어댑터(adapter-vercel@6.2.0 / adapter-auto@7.0.0)는 Node 24 런타임을 지원하고, Svelte MCP 서버는 JavaScript API와 CLI 모두로 도구를 노출합니다(mcp@0.1.16). 언어 도구 패키지는 이번 사이클에 상당한 성능 개선을 받았으므로 편집기 확장을 업데이트하는 것이 좋습니다.
TkDodo의 글(디자인 시스템 시리즈 3편)은 컴파운드 컴포넌트 패턴이 자주 잘못 적용된다고 주장합니다. 이 패턴은 자식 컴포넌트의 레이아웃을 사용자가 자유롭게 구성해야 하는 경우(예: <ButtonGroup>, <TabBar>, <RadioGroup>)에 탁월하지만, 동적 옵션 목록을 다루는 <Select>(props 기반 API가 더 적합)나 순서와 슬롯의 완결성이 중요한 <ModalDialog>에는 적합하지 않습니다. 핵심 TypeScript 과제는 JSX 자식이 부모의 타입 파라미터를 상속하지 않는다는 점으로, 완벽하게 타입이 지정된 RadioGroup<ThemeValue>도 각 RadioGroupItem 자식에 타입을 자동으로 전파하지 못합니다. 제시된 해결책은 createRadioGroup<T>() 팩토리 함수로, 미리 타입이 지정된 { RadioGroup, RadioGroupItem } 객체를 반환하며 제네릭을 기본값 never로 설정하여 호출자가 반드시 타입 인수를 제공하도록 강제합니다. 런타임 오버헤드가 없으면서도 호출 지점에서 부모와 자식 타입을 묶어 어노테이션 부담을 줄입니다. 단점은 소비자가 컴포넌트를 직접 임포트하는 대신 팩토리를 호출해야 한다는 것입니다.
2026년 첫 ISO 주간의 JavaScript 생태계는 기본기를 되짚는 차분한 분위기로 출발합니다. 가장 돋보이는 글은 Marvin Hagemeister가 연휴 동안 파고든 심층 분석으로, UI 렌더링의 Signals와 최신 LSP를 지탱하는 쿼리 기반 컴파일러 아키텍처가 같은 반응형 코어 위에 서 있음을 보여 줍니다. 두 진영이 무효화와 메모이제이션에서 서로 다른 설계를 택한 지점이 특히 흥미롭습니다.
이번 주의 플랫폼 이정표는 Node.js의 몫입니다. Joyee Cheung이 require(esm)가 지원되는 모든 LTS 라인에서 플래그 없이 stable로 승격되었음을 알리며, 10년 묵은 ESM/CJS 상호운용성 문제에 마침표를 찍었습니다. 툴링도 그 뒤를 따릅니다. Rspack 1.7은 2.0을 앞두고 SWC Wasm 플러그인 호환성을 안정화한 1.x의 마지막 마이너 릴리스입니다.
다만 축하만 있는 것은 아닙니다. React Native Rewind가 12월 RSC 권고와 별개인 새로운 React 취약점 두 건(고심각도 DoS, 중간 심각도 코드 노출)을 보고했습니다. React 팀이라면 연휴 복귀 전 반드시 점검해야 할 항목입니다. Svelte 1월 업데이트, TkDodo의 타입 안전 컴파운드 컴포넌트, React 입문 전 JavaScript 복습 영상이 조용하지만 알찬 한 주를 마무리합니다.
Key Takeaways
require(esm)가 지원되는 모든 Node.js LTS 라인에서 stable이 되었습니다. 듀얼 패키지 전략의 은퇴 계획을 세우세요.
새로 공개된 React 취약점 두 건에 대해 React·React Native 앱을 연휴 복귀 전에 점검하세요.
Signals와 쿼리 기반 컴파일러는 하나의 반응형 코어를 공유합니다. 한쪽을 이해하면 다른 쪽도 잘 다루게 됩니다.
