shiwoo.dev logoshiwoo.dev

뉴스레터about me
  • GitHub
  • LinkedIn
  • Email
© 2026 Shi Woo, Park (custardcream98)
All rights reserved.
← 지난 이슈

프론트엔드 뉴스레터

#26

2026년 10월 31일8개 소식

이번 이슈 한눈에

  • Cursor 마켓플레이스에서 Claude Code 확장 변조본이 배포됐어요.
  • Next.js가 11월 3일 medium 취약점 7건을 수정할 예정이에요.
  • ChatGPT Pro의 Work·Codex 한도가 늘고, Pro 200 축소 계획은 철회됐어요.
  • Pico CSS가 2.1.1을 마지막으로 유지보수를 끝냈어요.
  1. 01

    news.hada.io

    Cursor에서 배포된 Claude Code 확장에 SSH 백도어가 포함됐어요

    Cursor의 확장 마켓플레이스에서 Claude Code 확장 변조본이 배포됐어요. Anthropic이 만든 빌드가 아니며, 공격자의 SSH 키를 추가하고 원격 접속 통로와 재부팅 후에도 실행되는 스크립트를 설치하려 합니다. Cursor의 최신 공지는 macOS·Windows용 Anthropic.claude-code 2.1.312·2.1.313을 확인 대상으로 명시했어요.

    • 확인 대상은 해당 마켓플레이스에서 10월 29일 18:27~30일 05:35(KST)에 설치하거나 업데이트한 경우입니다. 다른 공식 배포 경로까지 영향을 받았다는 근거는 없어요.
    • 확장을 삭제하는 것만으로는 충분하지 않아요. 실행 흔적이 있는 기기는 격리하고, 남은 SSH 키·자동 실행 스크립트·터널 프로세스를 제거한 뒤 노출 가능성이 있는 자격 증명과 세션을 교체해야 합니다.
    원문 읽기 ↗
  2. 02

    nextjs.org

    Next.js, 11월 3일 medium 취약점 7건을 수정할 예정이에요

    Next.js가 11월 3일 medium 취약점 7건의 패치를 배포할 예정이에요. 10월 27일 공식 예고는 팀들이 업데이트 일정을 준비할 수 있도록 먼저 공개한 안내입니다. 영향받는 버전과 구체적인 영향, 업그레이드 방법은 패치와 함께 공개될 예정이에요.

    원문 읽기 ↗
  3. 03

    news.hada.io

    ChatGPT Pro의 Work·Codex 한도가 늘고, Pro 200 축소 계획은 철회됐어요

    OpenAI가 10월 29일부터 Pro 100·500에 포함된 ChatGPT Work와 코딩 도구 Codex 사용량을 기존의 2배로 늘렸어요. Pro 200은 예고했던 한도 축소를 철회했습니다. 이미 높은 한도를 적용받던 이용자는 그대로 유지하고, 낮은 한도를 적용받던 이용자는 2배로 늘려 같은 수준에 맞춥니다. Business Premium도 Work·Codex 사용량 확대 대상이에요.

    원문 읽기 ↗
  4. 04

    news.hada.io

    Pico CSS, 2.1.1을 마지막으로 유지보수를 종료했어요

    시맨틱 HTML에 기본 스타일을 입히는 Pico CSS가 2.1.1을 마지막으로 유지보수를 끝냈어요. 저장소는 10월 4일 아카이브됐고, 새 이슈·PR·릴리스는 받지 않습니다. npm·jsDelivr·문서 사이트는 계속 제공돼요.

    원문 읽기 ↗
  5. 05

    tanstack.com

    TanStack DB 1.0 RC1, API를 안정화하고 업데이트 방식을 바꿨어요

    API 데이터를 브라우저에서 필터링·join하고 변경을 화면에 즉시 반영하는 TanStack DB가 1.0 RC1에서 API를 안정화했어요. 기존 REST API와 TanStack Query에서 시작해 로컬 저장·offline mutation·실시간 동기화를 단계적으로 더할 수 있습니다. 정식 1.0에 앞선 RC이며, 이전 버전에서 올릴 때는 호환되지 않는 API 변경을 확인해야 해요.

    • Query Collection의 onInsert·onUpdate·onDelete는 더 이상 자동으로 refetch하지 않아요. handler에서 collection.utils.refetch()를 호출하거나 서버가 확정한 응답을 writeInsert·writeUpdate·writeUpsert·writeDelete로 반영하고, 완료를 기다려야 합니다.
    • 둘 다 생략하면 서버 저장에 성공해도 transaction이 끝날 때 화면의 optimistic 변경이 이전에 동기화된 값으로 돌아갑니다.
    원문 읽기 ↗
  6. 06

    nextjs.org

    Next.js, AI 에이전트가 번들의 import 경로를 추적해요

    lazy()로 분리한 컴포넌트도 다른 곳에서 정적으로 import하면 처음부터 내려갈 수 있어요. Next.js의 next-bundle-optimizer 스킬은 Turbopack의 모듈 연결을 따라가며 이런 경로와 중복 의존성, 불필요하게 클라이언트에 포함된 코드를 찾습니다. 기본 동작은 문제와 수정안 보고이며, /next-bundle-optimizer fix로 변경을 적용하고 분석 전후를 비교할 수 있어요.

    • Next.js 16.4와 Turbopack이 필요해요. next analyze export로 분석 데이터를 JSON으로 내보내 다른 도구에서도 조사할 수 있습니다.
    원문 읽기 ↗
  7. 07

    denodell.com

    디자인 시스템의 느린 반응을 실제 데이터 양으로 추적했어요

    Den Odell이 디자인 시스템 10개에서 249개 국가가 있는 selector 열기와 체크박스 100개 전체 선택을 측정했어요. React Aria에서는 항목마다 높이를 지우고 곧바로 크기를 읽어 브라우저가 layout을 반복 계산하는 문제를 찾았습니다. 높이를 먼저 모두 지운 뒤 한꺼번에 측정하는 수정안을 제시했고, Ant Design의 전체 선택에서는 100개 체크박스가 동시에 실행하는 애니메이션이 큰 비용을 차지했어요.

    • 글에서는 Playwright로 클릭 뒤 main thread가 일한 시간과 긴 프레임을 측정하고, 허용 시간을 넘으면 테스트를 실패시키는 방법까지 보여줍니다.
    원문 읽기 ↗
  8. 08

    tabwidgets.com

    코드는 로드됐는데 위젯이 늦게 보인 원인은 Suspense였어요

    브라우저의 새 탭을 위젯 대시보드로 바꾸는 확장 프로그램 Tab Widgets는 탭을 열 때마다 React 19 앱을 처음부터 실행해요. 프로덕션 빌드를 headless Chromium으로 측정하니 스크립트 로드·실행은 약 100ms에 끝났지만, 위젯은 약 380ms에 보였습니다. 첫 렌더에서 React.lazy가 suspend하고, React가 준비된 콘텐츠를 모아 보여주려고 두는 300ms 대기가 겹친 겁니다.

    수정에서는 preloadLazy가 React의 비공개 필드 _init·_payload로 lazy 컴포넌트 자체를 미리 초기화합니다. 준비되기 전에는 일반 placeholder를 그리고, 준비가 끝나면 state를 갱신해 위젯으로 바꾸도록 했어요.

    • 단순히 import()를 먼저 끝내는 것만으로는 lazy 컴포넌트의 첫 suspend를 피하지 못해요. 원문은 비공개 필드를 쓰지 않는 대안으로 React.lazy 대신 로드한 컴포넌트를 직접 캐시하는 방식도 제시합니다.
    • 코드 로딩으로 인한 suspend를 피한 것이며, 데이터를 가져오면서 다시 suspend하는 위젯에는 대기가 남아요.
    원문 읽기 ↗

다음 이슈 받아보기

읽어볼 만한 프론트엔드 소식과 글을 골라 보내드립니다.

언제든 구독을 취소할 수 있어요.

← 뉴스레터 #25 · 2026-10-30