프론트엔드 뉴스레터
#20
이번 이슈 한눈에
- HTTP2Shell, Node.js 밖의 Brotli 의존성도 업데이트해야 해요
- v0, 모든 카드 대신 hover·focus·touch한 카드의 상세 정보를 미리 불러와요
- AI 코드의 공통 구조는 lint로 검사하고, 분기와 판단은 테스트로 확인해요
- 01
news.hada.io
Brotli 취약점, Bun·Python에서도 별도 패치가 필요해요
원문 읽기 ↗Node2Shell로 알려진 CVE-2026-111497의 영향이 Bun과 Python 패키지 등에서도 확인됐어요. 같은 Brotli decoder를 포함하고 있어서, Node.js를 업데이트했더라도 다른 프로그램에 들어 있는 복사본은 따로 고쳐야 합니다.
공격자가 보낸 Brotli 데이터를 압축 해제하면 메모리 유출·충돌·원격 코드 실행으로 이어질 수 있어요. 서버가 받는 요청뿐 아니라, HTTP client가 외부 서버에서 가져온 압축 응답도 공격 경로가 됩니다.
- Bun은 1.4.4 이상, Python의 Brotli는 1.2.1 이상, brotlicffi는 1.2.1.0 이상에 수정이 들어 있어요. 런타임이나 패키지를 포함한 실행 파일·컨테이너 이미지도 다시 빌드하고 배포해야 합니다.
- Python에서는 urllib3·requests 등이 Brotli 패키지가 설치돼 있으면 자동으로 사용해요. 애플리케이션에서 직접 import하지 않아도 영향을 받을 수 있습니다.
- 02
nextjs.org
v0, 상세 정보의 prefetch를 사용자 동작 뒤로 미뤘어요
원문 읽기 ↗v0는 Next.js 16.4에서 템플릿의 공개 데이터를 캐시하고 미리 불러와, 클릭 직후 제목과 미리보기가 보이도록 바꿨어요. 그런데 화면에 보이는 모든 카드에 적용하자 상세 페이지 prefetch 요청이 2.9배로 늘었습니다.
그래서 상세 정보는 hover·focus·touch가 일어난 카드부터 불러오도록 조정했어요. 프로젝트의 최근 채팅처럼 우선순위가 낮은 내용은
navigation()뒤에서 읽어, 페이지를 열 때 불러오고 재방문할 때는 캐시를 재사용합니다.instant()Playwright helper로 화면 전환 중 도착하는 콘텐츠를 보류하고, 클릭 전에 준비된 UI만으로 제목과 미리보기가 표시되는지 검사했어요.- 이 최적화에 사용한
next-partial-prefetching-optimizerSkill은 Cache Components와 Partial Prefetching을 이미 사용하는 앱을 전제로 합니다.
- 03
robinwieruch.de
AI가 반복해서 만드는 코드 구조를 lint로 검사했어요
원문 읽기 ↗Robin Wieruch는 AI가 handler마다 붙이는 테스트에서 공통 구조 검사를 걷어내고, TypeScript Compiler API로 모든 handler를 검사하는 lint를 만들었어요. 세션 확인이 첫 문장인지, 서비스 호출이
try안에 있는지 등을 검사해 새로 생성되는 파일에도 같은 규칙을 적용합니다.그 과정에서 오류와 함께 빈 목록을 반환해 UI가 실패와 빈 결과를 구분하지 못하는 버그도 찾았어요. 외부 의존성은 파일 종류별 공통 test harness로 묶고, 개별 테스트에는 그 파일이 실제로 내리는 판단과 분기를 남겼습니다.
- 공통 harness는 생성된 실제 client를 유지하고 네트워크만 메모리 내 transport로 교체해요. 요청의 serialization·deserialization 과정도 테스트에 포함됩니다.