JS frameworks, React/Vue/Svelte, and runtime updates Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 2-2026
article
웹 의존성은 망가졌다. 고칠 수 있을까?
TAG: 생태계
Lea Verou는 웹 플랫폼이 JavaScript에 제대로 된 의존성 관리 시스템을 제공한 적이 없어, Webpack, Rollup, esbuild 같은 번들러가 본래 목적과 다른 역할을 억지로 맡아왔다고 주장합니다. node_modules/ 직접 배포, Unpkg·JSDelivr 같은 CDN 임포트, 패키지 로컬 복사, import map 활용 등 번들러 없이 사용하는 모든 방법은 보안 위험, 캡슐화 위반, 전이적 의존성 처리 불가, HTML 템플릿 도구 강제 의존이라는 공통된 결함을 지닙니다. 특히 import map은 로컬성·합성성·확장성을 모두 위반하며 JSON 형태의 번들러를 재창조하는 데 불과합니다. Verou는 플랫폼 수준의 해결책으로 <script type=importmap src> 방식의 외부 import map, DOM 메서드를 통한 import map 주입(이미 전 브라우저에서 동작함을 글 작성 중 발견), HTTP Link 헤더를 통한 import map 전달, package.json의 clientDependencies 필드 추가를 제안합니다. 더 급진적인 아이디어로는 bare specifier를 서버 측에서 처리 가능한 specifier: URL 프로토콜로 취급하는 방안도 제시합니다. 결론은 분명합니다. 플랫폼이 의존성 해석을 책임지기 전까지, 첫 번째 의존성을 추가하는 순간부터 엄청난 복잡도를 감수해야 합니다.
ESLint v10의 첫 번째 릴리스 후보(RC)에는 개발자 경험에 영향을 주는 세 가지 주요 변경 사항이 포함되어 있습니다. RuleTester API에 requireData 어설션 옵션이 추가되어, true로 설정하면 플레이스홀더가 포함된 메시지를 참조하는 messageId를 사용하는 모든 유효하지 않은 테스트 케이스에서 반드시 data 객체를 제공해야 합니다. 또한 실패한 테스트 케이스의 스택 트레이스가 개선되어, invalid[N] 인덱스와 VS Code 터미널에서 클릭 가능한 파일:라인 참조가 출력에 포함됩니다. 별도로 max-params 규칙에 countThis 옵션이 추가되어(기존에 deprecated된 countVoidThis를 대체), "never"로 설정하면 TypeScript this 어노테이션이 함수 매개변수 카운트에서 제외됩니다. npm i eslint@next --save-dev 또는 eslint@10.0.0-rc.0으로 설치할 수 있으며, v10의 주요 변경 사항에 대한 마이그레이션 가이드도 제공됩니다.
Angular에서 조건부 렌더링이나 ngTemplateOutlet을 사용해 컴포넌트를 다른 DOM 위치로 이동하면 컴포넌트가 조용히 파괴되고 새로 생성되어, 모든 signal, 타이머, 폼 상태가 초기화됩니다. 이 글은 세 가지 CDK 접근법을 비교합니다. ngTemplateOutlet은 연결될 때마다 새로운 embedded view를 생성하고, @angular/cdk/portal의 TemplatePortal은 포털 라이프사이클 제어를 제공하지만 연결 시 여전히 새 view를 생성합니다. DomPortal만이 실제 DOM 노드를 물리적으로 reparent하여 살아있는 컴포넌트 인스턴스와 모든 Angular signal을 보존하고, 중요하게도 기능 범위 DI 프로바이더가 유지되도록 원본 injector 컨텍스트를 보존합니다. 구현은 viewChild<ElementRef>와 effect()를 사용해 new DomPortal(element)를 초기화하고, 실제 div 아웃렛에 [cdkPortalOutlet]을 사용합니다. 단, 포털은 한 번에 하나의 아웃렛에만 연결될 수 있으므로 이동 시 자동으로 이전 아웃렛에서 분리됩니다.
Krasimir Tsonev은 React Server Components에서 사용되는 기법에 관한 Dan Abramov의 글에서 영감을 받아, 약 200줄의 코드로 스트리밍 JSON 라이브러리 Streamson을 구현한 과정을 소개합니다. 서버 측은 Transfer-Encoding: chunked와 Content-Type: application/x-ndjson을 사용하며, normalize() 함수로 데이터 객체를 순회해 미해결 Promise를 _$1 같은 플레이스홀더 ID로 대체한 뒤, 각 Promise가 해결될 때마다 { i: id, c: value } 형태의 청크를 res.write()로 전송하고, 모든 Promise가 완료되면 res.end()를 호출합니다. 클라이언트는 Fetch API의 getReader()로 스트림을 읽고, 각 NDJSON 라인을 파싱하며, 미러링된 walk() 함수로 플레이스홀더를 나중에 도착하는 청크에 의해 해결되는 실제 Promise로 교체합니다. 단, 서버와 클라이언트 모두 직접 제어할 수 있어야 한다는 제약이 있습니다. 이 라이브러리는 npm에 streamson으로 게시되어 있으며, unpkg.com/streamson@latest/dist/streamson.min.js에서 1KB 브라우저 번들을 제공합니다.
VoidZero의 2025년 12월 업데이트에는 5개 핵심 프로젝트 전반에 걸친 중요한 진전이 담겨 있습니다. Oxlint는 typescript-eslint 대비 8–12배 빠른 타입 인식 린팅을 알파로 제공하고 ESLint 호환 JS 플러그인을 추가했으며, Oxfmt 알파는 임베디드 언어 지원과 실험적 import 정렬을 포함합니다. npx oxfmt --migrate prettier 명령어로 Prettier 마이그레이션도 간단해졌습니다. Vitest는 느린 테스트를 진단하기 위한 실험적 OpenTelemetry 추적 기능과 experimental.fsCache 플래그를 통한 변환 파일 디스크 캐싱을 지원합니다. Rolldown은 기본 청킹 알고리즘을 개선해 청크 수를 줄이고, postBanner/postFooter 옵션 및 TypeScript 프로젝트 참조를 지원합니다. 커뮤니티 채택도 빠르게 확산 중입니다. Bun, Vue, Preact, date-fns, Shopify, Miro, Airbnb, MonkeyType(린팅 속도 약 3배 향상) 등이 Oxlint로 전환했으며, Facetpack의 React Native 툴킷은 Babel을 Oxc로 교체해 변환 속도를 36배 개선했습니다.
Ember 6.9는 Ember Release Train의 표준 마이너 릴리스로, 사용자에게 직접 영향을 미치는 프레임워크 변경 사항은 없으며 모든 Ember.js 6.9 변경 사항은 내부 수정, 문서 업데이트 또는 버그픽스 백포팅입니다. 더 중요한 소식은 Ember.js 6.8이 동시에 LTS(Long Term Support)로 승격되어 9 릴리스 사이클(54주) 동안 보안 패치를, 6 사이클(36주) 동안 버그픽스를 받게 된다는 점입니다. 이전 LTS는 6.4였습니다. 도구 측면에서 Ember CLI 6.9는 broccoli를 ^4.0.0으로 업그레이드하여 broccoli 의존성 트리의 보안 취약점과 deprecation 경고를 해결합니다. 새 메이저 버전은 완전히 API 호환됩니다. 이 업그레이드로 최소 지원 Node.js 버전이 20.19로 상향되는데, 이는 업데이트된 broccoli에 필요한 require(esm) 기능이 해당 버전에 백포팅되었기 때문입니다.
Theo(t3.gg)는 Anthropic이 rate limit을 2배 늘린 후 2주간의 휴일 동안 Claude Code 인스턴스를 최대 6개 병렬로 실행하며 워크플로우가 완전히 바뀐 경험을 공유합니다. IDE를 한 번도 열지 않고 Expo, Nativewind, Convex를 사용한 Turbo Repo 모노레포 구조의 풀스택 이미지 생성 스튜디오(웹 + React Native 모바일 앱)를 구축했으며, Claude Code 작업이 실행 중일 때만 Twitter 접속을 차단하는 브라우저 익스텐션도 만들었습니다. 웹 프로젝트를 새 Expo 앱이 포함된 Turbo Repo 모노레포로 전환해달라는 단일 프롬프트 하나로 1시간 이상이 걸린 후 2,300줄짜리 PR이 생성되었고, Greptile은 이 PR에 5점 만점 5점을 부여했습니다. 월 $200 구독으로 약 $1,500 상당의 추론을 소비했으며, 최대한 사용해도 주간 한도의 14%밖에 도달하지 못했다고 추산합니다. 주요 주의 사항으로는, 이러한 도구들이 모델의 실수를 잡아낼 수 있는 숙련된 엔지니어에게 훨씬 효과적이라는 점, --dangerously-skip-permissions 모드의 위험성, 그리고 컨텍스트 압축과 히스토리 관리가 여전히 개선이 필요한 영역이라는 점을 꼽습니다.
Lea Verou는 웹 플랫폼이 JavaScript에 제대로 된 의존성 관리 시스템을 제공한 적이 없어, Webpack, Rollup, esbuild 같은 번들러가 본래 목적과 다른 역할을 억지로 맡아왔다고 주장합니다. node_modules/ 직접 배포, Unpkg·JSDelivr 같은 CDN 임포트, 패키지 로컬 복사, import map 활용 등 번들러 없이 사용하는 모든 방법은 보안 위험, 캡슐화 위반, 전이적 의존성 처리 불가, HTML 템플릿 도구 강제 의존이라는 공통된 결함을 지닙니다. 특히 import map은 로컬성·합성성·확장성을 모두 위반하며 JSON 형태의 번들러를 재창조하는 데 불과합니다. Verou는 플랫폼 수준의 해결책으로 <script type=importmap src> 방식의 외부 import map, DOM 메서드를 통한 import map 주입(이미 전 브라우저에서 동작함을 글 작성 중 발견), HTTP Link 헤더를 통한 import map 전달, package.json의 clientDependencies 필드 추가를 제안합니다. 더 급진적인 아이디어로는 bare specifier를 서버 측에서 처리 가능한 specifier: URL 프로토콜로 취급하는 방안도 제시합니다. 결론은 분명합니다. 플랫폼이 의존성 해석을 책임지기 전까지, 첫 번째 의존성을 추가하는 순간부터 엄청난 복잡도를 감수해야 합니다.
Theo(t3.gg)는 Anthropic이 rate limit을 2배 늘린 후 2주간의 휴일 동안 Claude Code 인스턴스를 최대 6개 병렬로 실행하며 워크플로우가 완전히 바뀐 경험을 공유합니다. IDE를 한 번도 열지 않고 Expo, Nativewind, Convex를 사용한 Turbo Repo 모노레포 구조의 풀스택 이미지 생성 스튜디오(웹 + React Native 모바일 앱)를 구축했으며, Claude Code 작업이 실행 중일 때만 Twitter 접속을 차단하는 브라우저 익스텐션도 만들었습니다. 웹 프로젝트를 새 Expo 앱이 포함된 Turbo Repo 모노레포로 전환해달라는 단일 프롬프트 하나로 1시간 이상이 걸린 후 2,300줄짜리 PR이 생성되었고, Greptile은 이 PR에 5점 만점 5점을 부여했습니다. 월 $200 구독으로 약 $1,500 상당의 추론을 소비했으며, 최대한 사용해도 주간 한도의 14%밖에 도달하지 못했다고 추산합니다. 주요 주의 사항으로는, 이러한 도구들이 모델의 실수를 잡아낼 수 있는 숙련된 엔지니어에게 훨씬 효과적이라는 점, --dangerously-skip-permissions 모드의 위험성, 그리고 컨텍스트 압축과 히스토리 관리가 여전히 개선이 필요한 영역이라는 점을 꼽습니다.
ESLint v10의 첫 번째 릴리스 후보(RC)에는 개발자 경험에 영향을 주는 세 가지 주요 변경 사항이 포함되어 있습니다. RuleTester API에 requireData 어설션 옵션이 추가되어, true로 설정하면 플레이스홀더가 포함된 메시지를 참조하는 messageId를 사용하는 모든 유효하지 않은 테스트 케이스에서 반드시 data 객체를 제공해야 합니다. 또한 실패한 테스트 케이스의 스택 트레이스가 개선되어, invalid[N] 인덱스와 VS Code 터미널에서 클릭 가능한 파일:라인 참조가 출력에 포함됩니다. 별도로 max-params 규칙에 countThis 옵션이 추가되어(기존에 deprecated된 countVoidThis를 대체), "never"로 설정하면 TypeScript this 어노테이션이 함수 매개변수 카운트에서 제외됩니다. npm i eslint@next --save-dev 또는 eslint@10.0.0-rc.0으로 설치할 수 있으며, v10의 주요 변경 사항에 대한 마이그레이션 가이드도 제공됩니다.
Angular에서 조건부 렌더링이나 ngTemplateOutlet을 사용해 컴포넌트를 다른 DOM 위치로 이동하면 컴포넌트가 조용히 파괴되고 새로 생성되어, 모든 signal, 타이머, 폼 상태가 초기화됩니다. 이 글은 세 가지 CDK 접근법을 비교합니다. ngTemplateOutlet은 연결될 때마다 새로운 embedded view를 생성하고, @angular/cdk/portal의 TemplatePortal은 포털 라이프사이클 제어를 제공하지만 연결 시 여전히 새 view를 생성합니다. DomPortal만이 실제 DOM 노드를 물리적으로 reparent하여 살아있는 컴포넌트 인스턴스와 모든 Angular signal을 보존하고, 중요하게도 기능 범위 DI 프로바이더가 유지되도록 원본 injector 컨텍스트를 보존합니다. 구현은 viewChild<ElementRef>와 effect()를 사용해 new DomPortal(element)를 초기화하고, 실제 div 아웃렛에 [cdkPortalOutlet]을 사용합니다. 단, 포털은 한 번에 하나의 아웃렛에만 연결될 수 있으므로 이동 시 자동으로 이전 아웃렛에서 분리됩니다.
Krasimir Tsonev은 React Server Components에서 사용되는 기법에 관한 Dan Abramov의 글에서 영감을 받아, 약 200줄의 코드로 스트리밍 JSON 라이브러리 Streamson을 구현한 과정을 소개합니다. 서버 측은 Transfer-Encoding: chunked와 Content-Type: application/x-ndjson을 사용하며, normalize() 함수로 데이터 객체를 순회해 미해결 Promise를 _$1 같은 플레이스홀더 ID로 대체한 뒤, 각 Promise가 해결될 때마다 { i: id, c: value } 형태의 청크를 res.write()로 전송하고, 모든 Promise가 완료되면 res.end()를 호출합니다. 클라이언트는 Fetch API의 getReader()로 스트림을 읽고, 각 NDJSON 라인을 파싱하며, 미러링된 walk() 함수로 플레이스홀더를 나중에 도착하는 청크에 의해 해결되는 실제 Promise로 교체합니다. 단, 서버와 클라이언트 모두 직접 제어할 수 있어야 한다는 제약이 있습니다. 이 라이브러리는 npm에 streamson으로 게시되어 있으며, unpkg.com/streamson@latest/dist/streamson.min.js에서 1KB 브라우저 번들을 제공합니다.
VoidZero의 2025년 12월 업데이트에는 5개 핵심 프로젝트 전반에 걸친 중요한 진전이 담겨 있습니다. Oxlint는 typescript-eslint 대비 8–12배 빠른 타입 인식 린팅을 알파로 제공하고 ESLint 호환 JS 플러그인을 추가했으며, Oxfmt 알파는 임베디드 언어 지원과 실험적 import 정렬을 포함합니다. npx oxfmt --migrate prettier 명령어로 Prettier 마이그레이션도 간단해졌습니다. Vitest는 느린 테스트를 진단하기 위한 실험적 OpenTelemetry 추적 기능과 experimental.fsCache 플래그를 통한 변환 파일 디스크 캐싱을 지원합니다. Rolldown은 기본 청킹 알고리즘을 개선해 청크 수를 줄이고, postBanner/postFooter 옵션 및 TypeScript 프로젝트 참조를 지원합니다. 커뮤니티 채택도 빠르게 확산 중입니다. Bun, Vue, Preact, date-fns, Shopify, Miro, Airbnb, MonkeyType(린팅 속도 약 3배 향상) 등이 Oxlint로 전환했으며, Facetpack의 React Native 툴킷은 Babel을 Oxc로 교체해 변환 속도를 36배 개선했습니다.
Ember 6.9는 Ember Release Train의 표준 마이너 릴리스로, 사용자에게 직접 영향을 미치는 프레임워크 변경 사항은 없으며 모든 Ember.js 6.9 변경 사항은 내부 수정, 문서 업데이트 또는 버그픽스 백포팅입니다. 더 중요한 소식은 Ember.js 6.8이 동시에 LTS(Long Term Support)로 승격되어 9 릴리스 사이클(54주) 동안 보안 패치를, 6 사이클(36주) 동안 버그픽스를 받게 된다는 점입니다. 이전 LTS는 6.4였습니다. 도구 측면에서 Ember CLI 6.9는 broccoli를 ^4.0.0으로 업그레이드하여 broccoli 의존성 트리의 보안 취약점과 deprecation 경고를 해결합니다. 새 메이저 버전은 완전히 API 호환됩니다. 이 업그레이드로 최소 지원 Node.js 버전이 20.19로 상향되는데, 이는 업데이트된 broccoli에 필요한 require(esm) 기능이 해당 버전에 백포팅되었기 때문입니다.
2주차 JavaScript의 핵심 주제는 웹 플랫폼이 오랫동안 해결하지 못한 의존성 관리입니다. Lea Verou의 역작 에세이는 번들러가 10년간 메워온 공백을 정면으로 파헤칩니다. 웹 플랫폼은 JavaScript에 제대로 된 해석 모델을 제공한 적이 없어, CDN 임포트·node_modules/ 배포·import map 등 모든 대안이 제각각의 치명적 결함을 안고 있습니다. 그녀의 제안은 구체적입니다: <script type=importmap src>, DOM 메서드를 통한 import map 주입(이미 크로스 브라우저에서 동작함을 글 작성 중 발견), HTTP Link 헤더 전달, package.json의 clientDependencies 필드. 플랫폼이 해석을 책임지기 전까지 첫 번째 의존성을 추가하는 순간 복잡도가 급격히 올라간다는 결론은 냉정합니다.
도구 레이어는 빠르게 움직이고 있습니다. VoidZero의 2025년 12월 업데이트는 다섯 프로젝트가 동시에 전진하는 모습을 보여줍니다: Oxlint는 type-aware 린팅을 typescript-eslint 대비 8–12배 속도로 제공하고, Oxfmt 알파는 npx oxfmt --migrate prettier 마이그레이션 경로를 추가했으며, Vitest는 OpenTelemetry 추적과 experimental.fsCache를 갖췄고, Rolldown은 청킹 알고리즘을 개선했습니다. Shopify·Airbnb·Bun이 Oxlint로 전환했고, Facetpack은 Babel을 Oxc로 교체해 변환 속도를 36배 개선했습니다.
린팅 거버넌스 측면에서 ESLint v10.0.0-rc.0은 RuleTester에 requireData 옵션을 도입해 messageId 플레이스홀더와 테스트 data 객체의 일관성을 강제하고, max-params에는 TypeScript this 어노테이션을 제외하는 countThis 옵션을 추가했습니다. Krasimir Tsonev의 200줄짜리 Streamson 라이브러리는 Transfer-Encoding: chunked와 NDJSON으로 프레임워크 독립적인 progressive JSON을 제공하는 방법을 보여줍니다. 미해결 Promise를 플레이스홀더 ID로 직렬화하고 클라이언트에서 Fetch API의 getReader()로 해결하는 방식은 React Server Components의 핵심 아이디어를 본질까지 증류한 것입니다.
프레임워크 주변부에서는, DOM 요소 이동 시 컴포넌트 상태가 초기화되는 Angular 팀에게 명확한 답이 주어졌습니다: @angular/cdk/portal의 DomPortal만이 실제 DOM 노드를 물리적으로 reparent하여 signal·타이머·origin injector 컨텍스트를 보존합니다. Ember 6.9와 6.8의 LTS 승격은 조용한 거버넌스 이정표입니다. Theo가 휴일 동안 Claude Code 인스턴스 여섯 개를 병렬로 실행해 Turbo Repo 모노레포를 구축한 영상은 AI 보조 엔지니어링의 현재 좌표를 솔직하게 보여주는 현장 보고서입니다.
Key Takeaways
DOM 메서드를 통한 import map 주입은 이미 크로스 브라우저에서 동작하므로, 광범위한 플랫폼 제안이 정착하기 전에 이 의존성 주입 방식을 지금 바로 프로토타입해 보세요.
린팅이 많은 프로젝트를 Oxlint로 마이그레이션해 8–12배 속도 향상을 검증하고, npx oxfmt --migrate prettier도 함께 실행해 도구를 한 번에 통합하세요.
Angular에서 컴포넌트를 DOM 위치 간에 이동할 때는 TemplatePortal 대신 DomPortal을 사용하세요. signal과 origin injector 컨텍스트를 보존하는 유일한 방법입니다.
