Storybook의 WebSocket을 이용한 지속형 XSS/RCE(CVE-2026-2… — 2026년 10주 자바스크립트
JS frameworks, React/Vue/Svelte, and runtime updates Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 10-2026bolt1 CRITICAL
article
Storybook의 WebSocket을 이용한 지속형 XSS/RCE(CVE-2026-27148)
TAG: 보안
CVE-2026-27148 (CVSS 8.9)은 Storybook 8.1.0 이상 10.2.10 미만 버전에 영향을 미치며, v8.1에서 도입된 브라우저 기반 story 편집기의 WebSocket 엔드포인트(ws://localhost:6006/storybook-server-channel)에 인증이 전혀 없는 것이 원인입니다. createNewStoryfileRequest 및 saveStoryRequest 핸들러가 사용자 제공 componentFilePath를 검증 없이 생성된 story 소스 파일에 직접 삽입하여 문자열 컨텍스트 탈출을 통한 JavaScript 주입이 가능합니다. dev server가 공개 노출된 경우 사용자 상호작용 없이 익스플로잇이 가능하며, 로컬 환경에서는 악성 웹페이지 방문만으로 공격이 성립합니다. payload가 디스크에 기록되어 version control에 커밋될 수 있으므로, Vitest와 JSDOM을 사용하는 환경에서는 Node.js 컨텍스트에서 RCE로 에스컬레이션됩니다. 즉시 7.6.23, 8.6.17, 9.1.19, 10.2.10 중 하나로 업데이트하십시오.
TanStack Intent(@tanstack/intent)는 라이브러리 관리자가 버전 관리된 Agent Skills를 npm 패키지 안에 직접 번들링·검증·배포할 수 있게 해주는 새로운 CLI입니다. VS Code, GitHub Copilot, OpenAI Codex, Cursor, Claude Code, Goose, Amp 등이 이미 채택한 오픈 Agent Skills 사양을 기반으로 합니다. 핵심 문제는 AI 에이전트의 라이브러리 지식이 학습 데이터 시점에 고정되어 브레이킹 체인지 때마다 버전 혼동이 발생한다는 것입니다. skill은 YAML 헤더를 가진 Markdown 문서로 올바른 사용 패턴, 흔한 실수, 출처 문서를 포함하며, npx @tanstack/intent stale 명령으로 CI에서 문서 편차를 감지할 수 있습니다. 개발자는 npx @tanstack/intent install 한 번으로 intent 지원 패키지를 CLAUDE.md, .cursorrules 등 에이전트 설정에 자동 연결할 수 있으며, npx @tanstack/intent feedback으로 실패 사례를 관리자에게 전달할 수 있습니다.
READ_TIME: 5_MIN|BY: Co-Authored By Sarah Gerrard; Kyle Mathews
VoidZero의 2026년 2월 생태계 요약입니다. Rust 기반 포매터인 Oxfmt가 Prettier의 JavaScript 및 TypeScript 적합성 테스트를 100% 통과하고 최대 36배 빠른 속도로 beta에 도달했으며, import 정렬·Tailwind CSS 클래스 정렬·임베디드 언어 포매팅을 안정화했습니다. Turborepo, Hugging Face, Lichess 등에서 이미 도입 중입니다. Vite 8 beta에서는 module graph와 HMR 타임라인을 브라우저에서 직접 확인할 수 있는 실험적 devtools가 제공됩니다. Vitest 4.1 beta는 aroundEach와 aroundAll 훅을 추가했으며, Rolldown은 내부 파일 경로 최적화로 9.6% 속도 향상을 달성했습니다. Oxc의 시맨틱 분석은 식별자 해시 사전 계산으로 4-6% 빨라졌고, Oxlint는 tsgolint를 통해 typescript-eslint 61개 규칙 중 59개를 지원합니다.
React Compiler: useMemo와 useCallback 안녕 | Alex Cloudstar
TAG: 가이드
2025년 10월 출시된 React Compiler v1.0은 Babel 또는 SWC 플러그인으로 동작하는 빌드 타임 도구로, useMemo, useCallback, React.memo를 필요한 위치에 자동으로 삽입하여 수동 메모이제이션 보일러플레이트를 제거합니다. 컴파일러는 컴포넌트 전체를 한 번에 분석하여 정확한 의존성 관계를 파악합니다. Next.js에서는 next.config.js에 reactCompiler: true 플래그 하나로 활성화되며, Vite는 babel-plugin-react-compiler를 설치하고 @vitejs/plugin-react의 babel plugins 목록에 추가하면 됩니다. 컴파일러는 순수 함수 컴포넌트, 조건부 훅 금지, 상태 직접 변경 금지 등 React 규칙을 엄격히 적용하며, 위반 코드는 최적화를 건너뜁니다. 점진적 도입을 위해 "use no memo" 디렉티브로 개별 컴포넌트를 제외할 수 있습니다.
Composables vs. Provide/Inject vs. Pinia — 언제 무엇을 사용할까
TAG: 가이드
Daniel Kelly가 작성한 이 Vue School 가이드는 Vue의 세 가지 상태 공유 메커니즘을 언제 사용해야 하는지 명확히 정리합니다. Composable(ref, computed, watch를 사용하는 함수)은 호출마다 독립적인 상태를 제공하여 마우스 추적이나 폼 유효성 검사 같은 재사용 로직에 적합합니다. 모듈 스코프로 ref를 끌어올리면 상태 공유도 가능하지만 devtools 지원을 잃고 SSR에서 상태 누출 위험이 있습니다. provide/inject는 컴포넌트 서브트리 내의 prop drilling 회피에 적합하며, Tabs/Tab, Form/FormField 같은 긴밀히 결합된 컴포넌트 쌍에서 특히 빛을 발합니다. InjectionKey<T> 심볼을 사용하면 문자열 키의 취약성을 제거할 수 있습니다. Pinia는 devtools 타임트래블, SSR 안전성, 내장 getter와 action이 필요한 전역 앱 상태(인증, 장바구니, 기능 플래그)에 적합합니다.
Web Dev Simplified의 Kyle은 TypeScript에서 명시적 return type이 일반적 권장이 아닌 특정 시나리오에서만 코드 품질을 실질적으로 향상시킨다는 점을 다룹니다. 반드시 필요한 경우는 재귀 함수로, TypeScript가 return type을 추론하지 못하고 any로 기본 설정됩니다. 그 외에는 라이브러리 수준의 코드나 널리 사용되는 헬퍼 함수에서 return type이 계약 역할을 합니다. 예를 들어 undefined 대신 null을 반환하도록 실수로 변경하면 주석이 없으면 호출부가 조용히 깨집니다. 추가로 as const 대신 tuple return type을 사용하는 더 유연한 타이핑 방법과, TypeScript의 추론된 타입이 혼란스러운 undefined 중복을 만드는 discriminated union 반환 케이스도 다룹니다. 전반적인 권장 사항은 return type을 기본적으로 생략하고 재귀 함수, 라이브러리/공유 유틸리티, 복잡한 discriminated union에서만 선택적으로 추가하는 것입니다.
Storybook의 WebSocket을 이용한 지속형 XSS/RCE(CVE-2026-27148)
CVE-2026-27148 (CVSS 8.9)은 Storybook 8.1.0 이상 10.2.10 미만 버전에 영향을 미치며, v8.1에서 도입된 브라우저 기반 story 편집기의 WebSocket 엔드포인트(ws://localhost:6006/storybook-server-channel)에 인증이 전혀 없는 것이 원인입니다. createNewStoryfileRequest 및 saveStoryRequest 핸들러가 사용자 제공 componentFilePath를 검증 없이 생성된 story 소스 파일에 직접 삽입하여 문자열 컨텍스트 탈출을 통한 JavaScript 주입이 가능합니다. dev server가 공개 노출된 경우 사용자 상호작용 없이 익스플로잇이 가능하며, 로컬 환경에서는 악성 웹페이지 방문만으로 공격이 성립합니다. payload가 디스크에 기록되어 version control에 커밋될 수 있으므로, Vitest와 JSDOM을 사용하는 환경에서는 Node.js 컨텍스트에서 RCE로 에스컬레이션됩니다. 즉시 7.6.23, 8.6.17, 9.1.19, 10.2.10 중 하나로 업데이트하십시오.
Web Dev Simplified의 Kyle은 TypeScript에서 명시적 return type이 일반적 권장이 아닌 특정 시나리오에서만 코드 품질을 실질적으로 향상시킨다는 점을 다룹니다. 반드시 필요한 경우는 재귀 함수로, TypeScript가 return type을 추론하지 못하고 any로 기본 설정됩니다. 그 외에는 라이브러리 수준의 코드나 널리 사용되는 헬퍼 함수에서 return type이 계약 역할을 합니다. 예를 들어 undefined 대신 null을 반환하도록 실수로 변경하면 주석이 없으면 호출부가 조용히 깨집니다. 추가로 as const 대신 tuple return type을 사용하는 더 유연한 타이핑 방법과, TypeScript의 추론된 타입이 혼란스러운 undefined 중복을 만드는 discriminated union 반환 케이스도 다룹니다. 전반적인 권장 사항은 return type을 기본적으로 생략하고 재귀 함수, 라이브러리/공유 유틸리티, 복잡한 discriminated union에서만 선택적으로 추가하는 것입니다.
TanStack Intent(@tanstack/intent)는 라이브러리 관리자가 버전 관리된 Agent Skills를 npm 패키지 안에 직접 번들링·검증·배포할 수 있게 해주는 새로운 CLI입니다. VS Code, GitHub Copilot, OpenAI Codex, Cursor, Claude Code, Goose, Amp 등이 이미 채택한 오픈 Agent Skills 사양을 기반으로 합니다. 핵심 문제는 AI 에이전트의 라이브러리 지식이 학습 데이터 시점에 고정되어 브레이킹 체인지 때마다 버전 혼동이 발생한다는 것입니다. skill은 YAML 헤더를 가진 Markdown 문서로 올바른 사용 패턴, 흔한 실수, 출처 문서를 포함하며, npx @tanstack/intent stale 명령으로 CI에서 문서 편차를 감지할 수 있습니다. 개발자는 npx @tanstack/intent install 한 번으로 intent 지원 패키지를 CLAUDE.md, .cursorrules 등 에이전트 설정에 자동 연결할 수 있으며, npx @tanstack/intent feedback으로 실패 사례를 관리자에게 전달할 수 있습니다.
VoidZero의 2026년 2월 생태계 요약입니다. Rust 기반 포매터인 Oxfmt가 Prettier의 JavaScript 및 TypeScript 적합성 테스트를 100% 통과하고 최대 36배 빠른 속도로 beta에 도달했으며, import 정렬·Tailwind CSS 클래스 정렬·임베디드 언어 포매팅을 안정화했습니다. Turborepo, Hugging Face, Lichess 등에서 이미 도입 중입니다. Vite 8 beta에서는 module graph와 HMR 타임라인을 브라우저에서 직접 확인할 수 있는 실험적 devtools가 제공됩니다. Vitest 4.1 beta는 aroundEach와 aroundAll 훅을 추가했으며, Rolldown은 내부 파일 경로 최적화로 9.6% 속도 향상을 달성했습니다. Oxc의 시맨틱 분석은 식별자 해시 사전 계산으로 4-6% 빨라졌고, Oxlint는 tsgolint를 통해 typescript-eslint 61개 규칙 중 59개를 지원합니다.
React Compiler: useMemo와 useCallback 안녕 | Alex Cloudstar
2025년 10월 출시된 React Compiler v1.0은 Babel 또는 SWC 플러그인으로 동작하는 빌드 타임 도구로, useMemo, useCallback, React.memo를 필요한 위치에 자동으로 삽입하여 수동 메모이제이션 보일러플레이트를 제거합니다. 컴파일러는 컴포넌트 전체를 한 번에 분석하여 정확한 의존성 관계를 파악합니다. Next.js에서는 next.config.js에 reactCompiler: true 플래그 하나로 활성화되며, Vite는 babel-plugin-react-compiler를 설치하고 @vitejs/plugin-react의 babel plugins 목록에 추가하면 됩니다. 컴파일러는 순수 함수 컴포넌트, 조건부 훅 금지, 상태 직접 변경 금지 등 React 규칙을 엄격히 적용하며, 위반 코드는 최적화를 건너뜁니다. 점진적 도입을 위해 "use no memo" 디렉티브로 개별 컴포넌트를 제외할 수 있습니다.
Composables vs. Provide/Inject vs. Pinia — 언제 무엇을 사용할까
Daniel Kelly가 작성한 이 Vue School 가이드는 Vue의 세 가지 상태 공유 메커니즘을 언제 사용해야 하는지 명확히 정리합니다. Composable(ref, computed, watch를 사용하는 함수)은 호출마다 독립적인 상태를 제공하여 마우스 추적이나 폼 유효성 검사 같은 재사용 로직에 적합합니다. 모듈 스코프로 ref를 끌어올리면 상태 공유도 가능하지만 devtools 지원을 잃고 SSR에서 상태 누출 위험이 있습니다. provide/inject는 컴포넌트 서브트리 내의 prop drilling 회피에 적합하며, Tabs/Tab, Form/FormField 같은 긴밀히 결합된 컴포넌트 쌍에서 특히 빛을 발합니다. InjectionKey<T> 심볼을 사용하면 문자열 키의 취약성을 제거할 수 있습니다. Pinia는 devtools 타임트래블, SSR 안전성, 내장 getter와 action이 필요한 전역 앱 상태(인증, 장바구니, 기능 플래그)에 적합합니다.
이번 주 가장 시급한 뉴스는 CVE-2026-27148입니다. CVSS 8.9 점수의 이 XSS/RCE 취약점은 Storybook 8.1.0 이상 10.2.9 이하 버전에 영향을 미치며, 브라우저 기반 story 편집기와 함께 도입된 인증 없는 WebSocket 엔드포인트를 이용합니다. 공격자의 payload가 디스크에 기록되어 version control에 커밋될 수 있어, Vitest/JSDOM 환경에서는 원격 코드 실행(RCE)으로 직접 이어질 수 있습니다. 즉시 7.6.23, 8.6.17, 9.1.19, 10.2.10 중 하나로 업데이트하십시오.
보안 이슈 외에도 VoidZero 생태계에서 주목할 만한 소식이 있었습니다. Oxfmt가 Prettier의 JavaScript·TypeScript 적합성 테스트를 100% 통과하고 최대 36배 빠른 속도로 beta에 도달했으며, Vite 8 beta에서 module graph 검사를 위한 실험적 devtools가 추가되었습니다. Node.js 22.22.1 LTS도 300개 이상의 커밋과 함께 OpenSSL 3.5.5 업그레이드 및 Buffer.concat 가속화를 포함해 출시되었습니다. TanStack Intent 또한 출시되어, npm 라이브러리 저자가 패키지 안에 버전 관리된 Agent Skills를 번들링할 수 있게 됩니다.
프레임워크 측면에서는 React Compiler v1.0이 빌드 타임에 useMemo와 useCallback 보일러플레이트를 자동화하고, Vue 가이드는 composable, Pinia, provide/inject를 각각 언제 사용해야 하는지 명확하게 정리합니다. TypeScript 영상은 명시적 return type이 실질적으로 필요한 상황을 냉철하게 분석합니다.
Key Takeaways
Storybook을 즉시 7.6.23 / 8.6.17 / 9.1.19 / 10.2.10으로 업데이트하십시오 — CVE-2026-27148은 공개된 dev server 또는 Vitest 환경에서 인증 없는 WebSocket을 통한 RCE를 허용합니다.
Oxfmt beta와 Vite 8 devtools는 VoidZero 툴체인이 빠르게 성숙하고 있음을 보여줍니다. 빌드 파이프라인 업그레이드 대상으로 평가해볼 만합니다.
React Compiler v1.0은 React 규칙을 준수하는 코드베이스에서 프로덕션 수준으로 사용 가능하지만, 가상화 리스트·imperative ref·비표준 서드파티 라이브러리에는 여전히 수동 메모이제이션이 필요합니다.
