JS frameworks, React/Vue/Svelte, and runtime updates Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 25-2026bolt1 CRITICAL
article
Node.js 2026년 6월 보안 릴리스
TAG: 보안
Node.js 프로젝트가 2026년 6월 18일 22.x, 24.x, 26.x 릴리스 라인에 대한 보안 업데이트를 발표하며 총 11개의 CVE를 패치하였습니다. 가장 심각한 취약점은 두 가지입니다. CVE-2026-48933은 WebCrypto AES 정수 오버플로로, 입력값이 2GiB의 배수일 경우 프로세스가 크래시됩니다. CVE-2026-48618은 resolver와 verifier 간 호스트명 정규화 불일치로 인한 TLS 와일드카드 깊이 인증 우회 취약점입니다. 중간 심각도 패치로는 ERR_PROXY_TUNNEL 오류 메시지에서 프록시 자격 증명이 노출되는 문제, 공격자가 제어하는 ORIGIN 프레임을 통한 HTTP/2 메모리 무제한 증가, GOAWAY 세션 정리 버그, mTLS 호스트명 대소문자 구분 우회 등이 포함됩니다. 의존성 업데이트로는 llhttp 9.4.2, nghttp2 1.69.0, OpenSSL 3.5.7, 그리고 각 라인별 undici 버전 업그레이드가 포함됩니다. 지원되는 모든 활성 LTS 라인이 영향을 받으므로 즉시 업그레이드가 강력히 권장됩니다.
Angular 22의 가장 큰 변화: OnPush가 기본 Change Detection Strategy로
TAG: 앵귤러
2026년 6월 3일 출시된 Angular 22는 명시적인 전략을 설정하지 않은 모든 컴포넌트에 대해 ChangeDetectionStrategy.OnPush를 기본값으로 적용합니다. 이는 이전 여러 버전에 걸쳐 도입된 시그널 기반 반응성 모델을 완성하는 변경입니다. 기존의 Default 전략은 목록 위치가 아닌 동작을 설명하는 이름인 ChangeDetectionStrategy.Eager로 이름이 변경되었습니다. ng update를 실행하면 기존 컴포넌트에 자동으로 Eager 태그를 추가하여 업그레이드 이전 동작을 유지하지만, node_modules의 컴파일된 서드파티 라이브러리 코드는 재작성되지 않습니다. RxJS 구독 내에서 일반 필드에 값을 쓰는 라이브러리 컴포넌트는 업그레이드 후 템플릿 바인딩 업데이트가 조용히 멈출 수 있습니다. 권장 수정 방법은 toSignal()을 통해 옵저버블을 시그널로 연결하는 것입니다. 이번 릴리스는 Resource API(resource, rxResource, httpResource)를 안정화하고, 실험적인 debounced() 헬퍼를 추가하며, TypeScript 6 및 Node 22+로 툴체인 기준을 올리고, strictTemplates 기본값을 true로 변경하며, HttpClient를 Fetch 백엔드로 전환합니다.
React 코드베이스에서 useCallback과 useMemo를 반사적으로 적용하는 경우가 많지만, 각 호출은 캐시된 값과 의존성 배열을 위한 메모리를 할당하여 함수 생성이나 50개 항목 정렬 같은 저렴한 연산에는 오히려 비용이 더 커집니다. 이 심층 가이드는 SearchPage 컴포넌트가 모든 상태, 페칭, 콜백을 소유하는 Next.js 검색 페이지를 예제로, 로직을 실제로 필요한 컴포넌트로 내려보내는 리팩터링을 단계별로 설명합니다. ProductTable은 자체 useQuery와 로컬 정렬 상태를 관리하고, Filter 컴포넌트는 서랍 상태와 countries/colors/modes 페칭, activeFilterCount를 통합 관리합니다. Search는 디바운스 ref를 내부화하고, FilterChips는 자체적으로 priceLabel을 계산합니다. 이를 통해 정확성을 유지하면서 대부분의 메모이제이션이 불필요해집니다. 또한 의존성 배열에 원시 값 사용, 컴포넌트 외부에서 객체 정의, useMemo 대신 useState 활용 등으로 불안정한 객체 참조로 인한 무한 렌더 루프를 수정하는 방법도 다룹니다.
TanStack React용 Storybook: Router, Start, Query 공식 지원
TAG: 툴링
Storybook이 TanStack 코어 팀과 협력하여 TanStack Router, Start, Query에 대한 네이티브 통합을 제공하는 전용 프레임워크 패키지 @storybook/tanstack-react를 출시하였습니다. 모든 스토리는 인메모리 히스토리를 사용하는 RouterProvider로 자동 래핑되며, 라우트 파라미터와 검색 파라미터는 컴파일 타임에 라우트의 선언된 스키마에 대해 타입 검사가 이루어집니다. createServerFn()으로 생성된 TanStack Start 서버 함수는 자동으로 일반 목 함수로 스텁되어, 실제 서버, 데이터베이스, 인증 레이어를 구동하지 않고도 각 스토리에서 성공, 로딩, 빈 상태, 오류 상태를 설정할 수 있습니다. 공유 QueryClient 데코레이터 패턴을 통해 스토리별 캐시 시딩이 가능합니다. @tanstack/react-start의 서버 전용 임포트는 빌드 타임에 Vite 플러그인을 통해 브라우저 안전한 목으로 리다이렉트됩니다. React 18 이상과 Vite 7 이상이 필요하며, automigrate CLI 명령어로 기존 @storybook/react-vite 프로젝트에 추가할 수 있습니다.
Wasp, 이제 Full-stack Logic을 TypeScript Spec으로 작성 가능
TAG: 프레임워크
배터리 포함 풀스택 JS/TS 프레임워크인 Wasp가 자체 DSL 컴파일러를 TypeScript 네이티브 스펙 레이어로 교체하였습니다. 개발자는 @wasp.sh/spec에서 가져온 page, route, query, action, job 등의 스펙 생성자를 사용하여 *.wasp.ts 파일을 작성하고, 이를 단일 export된 app 객체로 조합합니다. with { type: ref } 임포트 속성은 스펙 빌드 시점에 평가하지 않고도 React 및 Node.js 구현 파일을 참조할 수 있게 해줍니다. 스펙이 순수 TypeScript이기 때문에 for 루프, 서드파티 라이브러리, 디스크 읽기, 피처 수직 구조 등을 모두 지원합니다. 포스트에서는 스펙 코드만으로 구현한 파일 기반 라우팅 예제를 소개하고, 배포 가능한 인터페이스 정의 기반의 풀스택 수직 슬라이스인 Full Stack Modules(FSM)의 로드맵도 공개합니다.
React 19의 useActionState 훅은 비동기 폼 처리에서 반복되는 로딩 플래그, 오류 상태, 성공 상태, try/catch 블록을 state, submitAction 함수, isPending 불리언의 세 가지 값으로 이루어진 단일 API로 통합합니다. 액션 함수는 previousState와 FormData 객체를 받아 다음 상태를 반환하며, React가 전체 비동기 전환을 조율합니다. 이 가이드는 useActionState가 'use server'로 선언된 Server Actions와 어떻게 직접 연동하여 별도 API 라우트나 수동 fetch 없이 깔끔한 풀스택 워크플로우를 구현하는지 보여줍니다. useActionState와 useReducer를 비교하며, useReducer는 동기적 유한 상태 로직에 적합하고 useActionState는 I/O 바운드 비동기 워크플로우를 위한 것임을 설명합니다. useActionState와 useOptimistic을 함께 사용하면 서버 응답 전에 즉각적인 UI 업데이트가 가능합니다. 액션이 React의 트랜지션 시스템을 통해 실행되므로, 장시간 실행되는 작업 중에도 UI는 인터랙티브 상태를 유지하며 업데이트가 중단 가능합니다.
Jack Herrington이 최신 WebMCP 개선 사항을 데모하며 이 표준이 아직 잠재력의 절반만 달성했다고 설명합니다. chrome://flags에서 두 가지 항목을 활성화하면 사용 가능한 새로운 Chrome DevTools 지원이 Application 탭 아래에 WebMCP 패널을 추가합니다. 이 패널은 현재 페이지에 등록된 모든 도구를 나열하고 입출력을 확인하며 개별 도구를 직접 실행할 수 있습니다. 새롭게 도입된 선언적 API는 JavaScript 코드 없이 폼 요소에 toolname, tooldescription, toolparamdescription HTML 속성을 추가하는 것만으로 해당 요소를 MCP 도구로 자동 등록합니다. 이는 인메모리 할 일 목록으로 라이브 시연되었습니다. 명령형 API(document.modelContext.registerTool)와 선언형 방식이 비교됩니다. Herrington은 Chrome의 Gemini 통합을 포함한 브라우저 AI 패널이 아직 model context 객체를 소비하지 않아, 브라우저 측 MCP 인프라를 구동할 AI 클라이언트가 없다는 점에서 이 표준이 절반만 완성되었다고 주장합니다.
Node.js 프로젝트가 2026년 6월 18일 22.x, 24.x, 26.x 릴리스 라인에 대한 보안 업데이트를 발표하며 총 11개의 CVE를 패치하였습니다. 가장 심각한 취약점은 두 가지입니다. CVE-2026-48933은 WebCrypto AES 정수 오버플로로, 입력값이 2GiB의 배수일 경우 프로세스가 크래시됩니다. CVE-2026-48618은 resolver와 verifier 간 호스트명 정규화 불일치로 인한 TLS 와일드카드 깊이 인증 우회 취약점입니다. 중간 심각도 패치로는 ERR_PROXY_TUNNEL 오류 메시지에서 프록시 자격 증명이 노출되는 문제, 공격자가 제어하는 ORIGIN 프레임을 통한 HTTP/2 메모리 무제한 증가, GOAWAY 세션 정리 버그, mTLS 호스트명 대소문자 구분 우회 등이 포함됩니다. 의존성 업데이트로는 llhttp 9.4.2, nghttp2 1.69.0, OpenSSL 3.5.7, 그리고 각 라인별 undici 버전 업그레이드가 포함됩니다. 지원되는 모든 활성 LTS 라인이 영향을 받으므로 즉시 업그레이드가 강력히 권장됩니다.
Jack Herrington이 최신 WebMCP 개선 사항을 데모하며 이 표준이 아직 잠재력의 절반만 달성했다고 설명합니다. chrome://flags에서 두 가지 항목을 활성화하면 사용 가능한 새로운 Chrome DevTools 지원이 Application 탭 아래에 WebMCP 패널을 추가합니다. 이 패널은 현재 페이지에 등록된 모든 도구를 나열하고 입출력을 확인하며 개별 도구를 직접 실행할 수 있습니다. 새롭게 도입된 선언적 API는 JavaScript 코드 없이 폼 요소에 toolname, tooldescription, toolparamdescription HTML 속성을 추가하는 것만으로 해당 요소를 MCP 도구로 자동 등록합니다. 이는 인메모리 할 일 목록으로 라이브 시연되었습니다. 명령형 API(document.modelContext.registerTool)와 선언형 방식이 비교됩니다. Herrington은 Chrome의 Gemini 통합을 포함한 브라우저 AI 패널이 아직 model context 객체를 소비하지 않아, 브라우저 측 MCP 인프라를 구동할 AI 클라이언트가 없다는 점에서 이 표준이 절반만 완성되었다고 주장합니다.
Angular 22의 가장 큰 변화: OnPush가 기본 Change Detection Strategy로
2026년 6월 3일 출시된 Angular 22는 명시적인 전략을 설정하지 않은 모든 컴포넌트에 대해 ChangeDetectionStrategy.OnPush를 기본값으로 적용합니다. 이는 이전 여러 버전에 걸쳐 도입된 시그널 기반 반응성 모델을 완성하는 변경입니다. 기존의 Default 전략은 목록 위치가 아닌 동작을 설명하는 이름인 ChangeDetectionStrategy.Eager로 이름이 변경되었습니다. ng update를 실행하면 기존 컴포넌트에 자동으로 Eager 태그를 추가하여 업그레이드 이전 동작을 유지하지만, node_modules의 컴파일된 서드파티 라이브러리 코드는 재작성되지 않습니다. RxJS 구독 내에서 일반 필드에 값을 쓰는 라이브러리 컴포넌트는 업그레이드 후 템플릿 바인딩 업데이트가 조용히 멈출 수 있습니다. 권장 수정 방법은 toSignal()을 통해 옵저버블을 시그널로 연결하는 것입니다. 이번 릴리스는 Resource API(resource, rxResource, httpResource)를 안정화하고, 실험적인 debounced() 헬퍼를 추가하며, TypeScript 6 및 Node 22+로 툴체인 기준을 올리고, strictTemplates 기본값을 true로 변경하며, HttpClient를 Fetch 백엔드로 전환합니다.
React 코드베이스에서 useCallback과 useMemo를 반사적으로 적용하는 경우가 많지만, 각 호출은 캐시된 값과 의존성 배열을 위한 메모리를 할당하여 함수 생성이나 50개 항목 정렬 같은 저렴한 연산에는 오히려 비용이 더 커집니다. 이 심층 가이드는 SearchPage 컴포넌트가 모든 상태, 페칭, 콜백을 소유하는 Next.js 검색 페이지를 예제로, 로직을 실제로 필요한 컴포넌트로 내려보내는 리팩터링을 단계별로 설명합니다. ProductTable은 자체 useQuery와 로컬 정렬 상태를 관리하고, Filter 컴포넌트는 서랍 상태와 countries/colors/modes 페칭, activeFilterCount를 통합 관리합니다. Search는 디바운스 ref를 내부화하고, FilterChips는 자체적으로 priceLabel을 계산합니다. 이를 통해 정확성을 유지하면서 대부분의 메모이제이션이 불필요해집니다. 또한 의존성 배열에 원시 값 사용, 컴포넌트 외부에서 객체 정의, useMemo 대신 useState 활용 등으로 불안정한 객체 참조로 인한 무한 렌더 루프를 수정하는 방법도 다룹니다.
TanStack React용 Storybook: Router, Start, Query 공식 지원
Storybook이 TanStack 코어 팀과 협력하여 TanStack Router, Start, Query에 대한 네이티브 통합을 제공하는 전용 프레임워크 패키지 @storybook/tanstack-react를 출시하였습니다. 모든 스토리는 인메모리 히스토리를 사용하는 RouterProvider로 자동 래핑되며, 라우트 파라미터와 검색 파라미터는 컴파일 타임에 라우트의 선언된 스키마에 대해 타입 검사가 이루어집니다. createServerFn()으로 생성된 TanStack Start 서버 함수는 자동으로 일반 목 함수로 스텁되어, 실제 서버, 데이터베이스, 인증 레이어를 구동하지 않고도 각 스토리에서 성공, 로딩, 빈 상태, 오류 상태를 설정할 수 있습니다. 공유 QueryClient 데코레이터 패턴을 통해 스토리별 캐시 시딩이 가능합니다. @tanstack/react-start의 서버 전용 임포트는 빌드 타임에 Vite 플러그인을 통해 브라우저 안전한 목으로 리다이렉트됩니다. React 18 이상과 Vite 7 이상이 필요하며, automigrate CLI 명령어로 기존 @storybook/react-vite 프로젝트에 추가할 수 있습니다.
Wasp, 이제 Full-stack Logic을 TypeScript Spec으로 작성 가능
배터리 포함 풀스택 JS/TS 프레임워크인 Wasp가 자체 DSL 컴파일러를 TypeScript 네이티브 스펙 레이어로 교체하였습니다. 개발자는 @wasp.sh/spec에서 가져온 page, route, query, action, job 등의 스펙 생성자를 사용하여 *.wasp.ts 파일을 작성하고, 이를 단일 export된 app 객체로 조합합니다. with { type: ref } 임포트 속성은 스펙 빌드 시점에 평가하지 않고도 React 및 Node.js 구현 파일을 참조할 수 있게 해줍니다. 스펙이 순수 TypeScript이기 때문에 for 루프, 서드파티 라이브러리, 디스크 읽기, 피처 수직 구조 등을 모두 지원합니다. 포스트에서는 스펙 코드만으로 구현한 파일 기반 라우팅 예제를 소개하고, 배포 가능한 인터페이스 정의 기반의 풀스택 수직 슬라이스인 Full Stack Modules(FSM)의 로드맵도 공개합니다.
React 19의 useActionState 훅은 비동기 폼 처리에서 반복되는 로딩 플래그, 오류 상태, 성공 상태, try/catch 블록을 state, submitAction 함수, isPending 불리언의 세 가지 값으로 이루어진 단일 API로 통합합니다. 액션 함수는 previousState와 FormData 객체를 받아 다음 상태를 반환하며, React가 전체 비동기 전환을 조율합니다. 이 가이드는 useActionState가 'use server'로 선언된 Server Actions와 어떻게 직접 연동하여 별도 API 라우트나 수동 fetch 없이 깔끔한 풀스택 워크플로우를 구현하는지 보여줍니다. useActionState와 useReducer를 비교하며, useReducer는 동기적 유한 상태 로직에 적합하고 useActionState는 I/O 바운드 비동기 워크플로우를 위한 것임을 설명합니다. useActionState와 useOptimistic을 함께 사용하면 서버 응답 전에 즉각적인 UI 업데이트가 가능합니다. 액션이 React의 트랜지션 시스템을 통해 실행되므로, 장시간 실행되는 작업 중에도 UI는 인터랙티브 상태를 유지하며 업데이트가 중단 가능합니다.
25주차 JavaScript 뉴스는 보안이 중심을 차지하였습니다. Node.js가 모든 활성 LTS 라인(22.x, 24.x, 26.x)에 걸쳐 11개의 CVE를 수정하는 긴급 패치를 배포하였습니다. 두 가지 심각한 취약점인 CVE-2026-48933(WebCrypto AES 정수 오버플로)과 CVE-2026-48618(TLS 와일드카드 깊이 인증 우회), 그리고 HTTP/2 메모리 증가 및 ERR_PROXY_TUNNEL 메시지에서의 프록시 자격 증명 노출에 대한 중간 심각도 수정은 런타임 수준의 보안 관리가 여전히 필수임을 상기시켜 줍니다. 의존성 업데이트로는 OpenSSL 3.5.7, llhttp 9.4.2, nghttp2 1.69.0이 포함됩니다.
프레임워크 측면에서 Angular 22는 명시적 전략이 없는 모든 컴포넌트에 대해 ChangeDetectionStrategy.OnPush를 기본값으로 적용함으로써 시그널 기반 반응성 전환을 완료하였습니다. 기존의 Default 전략은 Eager로 이름이 변경되었습니다. ng update 마이그레이션은 기존 동작을 유지하지만, RxJS 구독 내에서 일반 필드에 값을 쓰는 컴파일된 서드파티 라이브러리는 toSignal()로 연결하지 않으면 조용히 렌더링이 멈출 수 있습니다. 한편 Wasp는 자체 DSL 컴파일러를 *.wasp.ts 파일과 @wasp.sh/spec 생성자를 사용하는 TypeScript 네이티브 스펙 레이어로 교체하여 for 루프, 서드파티 임포트, 그리고 분리된 풀스택 계약을 위한 with { type: ref } 임포트 속성을 지원하게 되었습니다.
React 툴링에서는 두 가지 주목할 만한 추가 사항이 있었습니다. Storybook이 TanStack Router, Start, Query에 대한 제로 컨피그 통합을 제공하는 @storybook/tanstack-react를 출시하였으며, 스토리별로 createServerFn() 서버 함수를 자동으로 스텁합니다. 또한 React 19의 useActionState에 대한 상세 가이드는 이 훅이 비동기 폼 보일러플레이트를 Server Actions와 직접 연동하는 세 가지 값의 API로 통합하는 방법을 보여주었습니다. WebMCP 표준은 솔직한 평가를 받았습니다. Chrome DevTools가 WebMCP 패널과 선언적 HTML 속성 API를 지원하게 되었지만, 브라우저 AI 패널이 아직 model context 객체를 사용하지 않아 표준이 절반만 작동하는 상태에 머물러 있습니다.
Key Takeaways
즉시 Node.js를 업그레이드하십시오. CVE-2026-48933(WebCrypto AES 오버플로)과 CVE-2026-48618(TLS 와일드카드 우회)이 모든 활성 LTS 라인에 영향을 미치며, OpenSSL은 이제 3.5.7로 업데이트되었습니다.
Angular 22의 OnPush 기본값 변경은 RxJS 구독 내에서 일반 필드를 변경하는 컴파일된 서드파티 라이브러리 컴포넌트를 조용히 중단시킵니다. 업그레이드 전에 toSignal()로 연결하십시오.
Storybook의 @storybook/tanstack-react는 스토리별로 TanStack Start 서버 함수를 자동 스텁하여, 컴포넌트 테스트에서 실제 서버, 데이터베이스, 인증 레이어가 필요 없어집니다.
