shiwoo.dev logoshiwoo.dev

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

프론트엔드 뉴스레터

#23

2026년 10월 28일8개 소식

이번 이슈 한눈에

  • Node2Shell, 패치 공개 뒤 공격 시도 관측
  • Firefox 159, 스크롤 기반 애니메이션을 기본 지원
  • Deno 팀, 런타임의 재단 이관 추진
  • Redact 0.2.0, 기존 React 코드를 유지하는 브라우저 통합 제공
  1. 01

    ellio.tech

    Node.js Brotli 취약점, 패치 공개 뒤 공격 시도가 관측됐어요

    보안 연구팀 ELLIO가 27일 00:08(KST), 패치가 공개된 Node.js의 Brotli 압축 해제 취약점인 Node2Shell(CVE-2026-111497)을 노린 공격 요청을 관측했어요. 공격자가 조작한 Brotli 데이터를 앱이 압축 해제할 때 문제가 생기며, 공격자가 URL을 지정할 수 있는 Node.js의 fetch()나 Next.js 서버 측 요청에서 Brotli 응답을 처리하는 경우도 해당합니다.

    관측된 요청은 Node.js 24.22.0 x86-64를 겨냥했지만, 연구팀이 취약한 환경에서 재현한 50회 모두 셸 획득에 실패했어요. 공격 시도 관측을 실제 침해 성공으로 볼 수는 없습니다.

    • 공식 보안 공지의 수정 버전은 Node.js 22.23.4·24.22.1·26.12.1입니다.
    원문 읽기 ↗
  2. 02

    developer.mozilla.org

    Firefox 159, 스크롤 기반 애니메이션을 기본 지원해요

    27일 출시된 Firefox 159부터 스크롤 기반 애니메이션이 기본으로 켜집니다. 시간이 흐르는 대신 스크롤 위치에 따라 애니메이션이 진행되는 방식이에요. animation-timeline에 scroll()이나 view()를 연결해, 스크롤 진행도나 요소가 화면에 들어온 정도에 맞춰 CSS 속성을 바꿀 수 있습니다.

    원문 읽기 ↗
  3. 03

    github.com

    Deno 팀, 런타임의 재단 이관을 추진해요

    JavaScript·TypeScript 런타임 Deno 팀이 Cloudflare 합류 후 런타임의 재단 이관을 추진 중이라고 밝혔어요. 21일 공식 이슈에 올라온 후속 설명으로, 구체적인 이관 계획은 아직 공개되지 않았습니다. 기존 팀은 새 기능을 개발하지 않고, 2027년 10월까지 매월 2.9.x의 버그·보안 수정 릴리스를 제공해요.

    원문 읽기 ↗
  4. 04

    tanstack.com

    Redact 0.2.0, 기존 React 코드로 브라우저 런타임을 바꿔요

    브라우저에서 React·React DOM을 대신하는 TanStack Redact 0.2.0이 26일 나왔어요. Vite·TanStack Start·Next.js·Vinext용 stable 브라우저 통합을 제공해, 빌드 설정을 바꾸면 기존 React 컴포넌트와 hooks를 유지하면서 브라우저에 보내는 JavaScript를 줄일 수 있습니다.

    Next.js·Vinext에서는 서버 렌더링과 Server Components를 React가 계속 맡고, 브라우저의 hydration과 렌더링을 Redact가 처리해요.

    • 동기 렌더링을 사용해, 렌더링을 나눠 실행하거나 중간에 멈추는 time slicing·interruptible rendering은 제공하지 않아요. 무거운 렌더링은 입력 처리를 늦출 수 있습니다.
    원문 읽기 ↗
  5. 05

    biomejs.dev

    Biome 2.6, Markdown·YAML·SCSS도 포맷해요

    15일 나온 Biome 2.6부터 Markdown·YAML·SCSS 파일도 포맷할 수 있어요. JavaScript·TypeScript와 문서·설정·스타일 파일을 같은 도구로 정리할 수 있는 범위가 넓어졌습니다. JavaScript나 TypeScript로 커스텀 lint 규칙을 만드는 플러그인도 developer preview로 추가됐어요.

    • Markdown 안의 코드 블록·HTML 포맷은 기본으로 켜져 있지만, lint·assist 분석은 markdown.analyzeEmbeds로 따로 켜야 해요.
    • YAML lint 규칙은 현재 하나이고, SCSS의 loop·mixin이 섞인 코드는 일부 CSS lint 규칙이 아직 검사하지 못합니다.
    원문 읽기 ↗
  6. 06

    github.com

    Remix 3.1, 서버 렌더링을 개선하고 frame prefetch를 추가했어요

    Remix 3.1은 remix/component의 서버 렌더링 속도와 메모리 사용을 개선했어요. 브라우저에서만 필요한 동작은 createMixin(setup, { ssr: false })로 서버의 setup과 렌더링을 건너뛰게 할 수도 있습니다.

    서버에서 받은 HTML로 페이지 일부를 갱신하는 frame에는 HTML·assets를 미리 불러오는 기능이 추가됐어요. 링크에 data-rmx-prefetch="intent"나 data-rmx-prefetch="viewport"를 지정해 사용합니다.

    • 두 링크 prefetch 모드는 Save-Data 설정을 따르며, slow-2g·2g 연결에서는 미리 불러오지 않아요.
    원문 읽기 ↗
  7. 07

    github.com

    Verdaccio 7, 패키지 공개 전에 승인받는 기능을 추가했어요

    사내 npm registry를 직접 운영하는 도구 Verdaccio 7에 패키지 업로드와 공개를 나누는 staged publishing이 추가됐어요. CI가 새 버전을 올린 뒤 유지관리자가 검토해야 다른 프로젝트에서 설치할 수 있는 방식입니다. 실험 기능이며, flags.stage와 npm 11.17 이상이 필요해요.

    • 서버는 Node.js 24 이상, 설정 파일은 YAML만 지원해요. 패키지 API 인증은 .npmrc의 _auth에서 _authToken으로 옮겨야 합니다.
    • npm과 Docker의 latest는 7.x를 가리킵니다. 6.x는 npm의 latest-6와 Docker 이미지의 6 태그로 제공돼요.
    원문 읽기 ↗
  8. 08

    blog.master.dev

    HTML 미리보기는 sandbox와 CSP를 함께 적용해야 해요

    모델이 만든 HTML을 sandbox 없이 iframe의 srcdoc에 넣으면, 부모 페이지와 같은 origin에서 실행돼 부모 DOM과 localStorage를 읽을 수 있어요. 이 글은 미리보기에 sandbox="allow-scripts"를 적용해 부모 접근을 막아도 fetch()나 이미지 요청은 여전히 나간다는 점을 데모로 보여줍니다.

    미리보기 문서에 default-src 'none'을 두고 필요한 inline script·style만 허용하는 CSP를 함께 적용해 리소스 요청도 제한합니다. 다만 이 구성으로도 iframe 자체의 페이지 이동까지 막지는 못해요.

    • 같은 origin의 콘텐츠에 allow-scripts와 allow-same-origin을 함께 주면 부모에 접근해 sandbox를 제거한 뒤 다시 로드해 제한을 벗어날 수 있어요.
    원문 읽기 ↗

다음 이슈 받아보기

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

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

← 뉴스레터 #22 · 2026-10-27