stylish.log

© 2026. @StyleList94(새 창에서 열림)

2026.06.07. · 5 min read

26년 06월

월간 후론트

S E R I E S

월간 후론트 2026

26년 06월26년 07월26년 08월26년 09월26년 10월

한 달 동안 프론트엔드 생태계에서 일어난 일을 짧게 훑습니다. 이번 달은 세 줄로 요약됩니다.

npm 공급망 보안이 한 달을 삼켰고,

Rust 기반 툴링이 사실상 표준이 됐고,

AI가 디자인과 코드 사이의 벽을 허물었습니다.

공급망 보안

이달의 메인 이벤트

  • TanStack npm 침해 포스트모템: 42개 포함 npm 84개 패키지 침해(영향 170+, 5.18억 다운로드). SLSA provenance가 멀쩡히 찍힌 채 배포된 첫 사례라 provenance 단독 신뢰는 끝났다.
  • npm Staged Publishing 정식 출시: npm publish 즉시 공개 시대 종료, 2FA 승인을 거쳐야 퍼블릭으로 나간다.
  • pnpm 11은 갓 올라온 패키지를 24시간 차단(minimumReleaseAge), npm은 postinstall 자동 실행 기본 차단 RFC 제출.
  • Vercel 보안 사고: 직원 한 명의 SaaS OAuth 그랜트가 회사 시크릿의 입구가 됐다. 사내 OAuth 스코프 감사는 남 일이 아니다.

보안 패치

양파같은 RSC

  • Next.js 5월 보안 릴리스: 인증 우회·DoS·SSRF·XSS 등 CVE 13건 일괄 패치. 안전 버전은 15.5.18 또는 16.2.6.
  • RSC 앱이면 React도 함께 업그레이드해야 취약점이 닫힌다.
  • 배경은 React2Shell(CVSS 10.0): RSC Flight 역직렬화로 사전 인증 없이 서버 코드 실행.
  • 교훈은 하나로 모인다. Server Functions는 신뢰 경계로 다뤄야 한다.

툴링

온 세상이 Rust

  • TypeScript 7.0 베타: 컴파일러를 Go로 포팅해 약 10배 빨라짐. tsgo로 미리 사용 가능.
  • Rolldown 1.0(Vite 8의 새 심장)은 Rollup보다 10~30배 빠르고, Rspack 2.0은 설치 용량 90% 절감. Yelp는 Rspack으로 빌드 시간 50% 단축.
  • Deno 2.8: Node 호환률 42% → 76.4%, deno install이 npm 드롭인 대체.
  • Bun 1.3.14: Sharp 없이 이미지 처리하는 빌트인 Bun.Image 등장. 단, 번들러 교체 시 빌드 diff + E2E 회귀 테스트 선행 권장.

프레임워크 근황

  • Angular 22 RC: Signal Forms 정식 승격, 신규 컴포넌트 OnPush 기본.
  • Express 5.x 리부트: 브랜드부터 라우터까지 전면 개편. 4→5는 단순 버전 업이 아님.
  • Remix 3 베타: React를 떼고 독자 노선. 기존 훅 자산은 가져갈 수 없다.
  • Waku 1.0 / Fresh 2.3: 가벼운 RSC, 정적 페이지 JS 0KB로 미니멀 진영도 건재.

React 실전 팁

  • 검색·필터 UI엔 async를 네이티브로 받는 useTransition, 폼·토글엔 연타 race를 막는 useActionState (가이드).
  • GitHub Issues는 local-first로 네비게이션 지연 600ms → 70ms.
  • Evil Martians는 Web Components로 JS 100KB 절감, Tanner Linsley는 9KB짜리 React 런타임을 AI로 제작.
  • 스트리밍 UI는 autoscroll 끄기 + 토큰마다 textContent += + requestAnimationFrame당 한 번 그리기로 안정화.

표준 및 엔진

  • ShadowRealm(Stage 2.7): 같은 쓰레드 경량 격리(보안 샌드박스는 아님).
  • WAICT: 브라우저가 받은 JS의 변조 여부를 암호학적으로 검증하는 표준 제안.
  • Chrome 148: JS 없이 서버 HTML 조각만으로 페이지 일부 갱신 실험 공개.
  • Node 공식 Axios→fetch codemod 등록: npx codemod @nodejs/axios-to-whatwg-fetch.

AI와 디자인

둘의 경계가 사라지다

  • Figma 디자인 에이전트 베타: 토큰·컴포넌트를 이해하고 자연어로 일괄 편집.
  • AI in Design 2026: 주간 AI 사용률 91%, 절반이 생성 코드를 프로덕션에 푸시, Claude가 ChatGPT 추월.
  • 경고도 함께: AI가 만든 UI는 접근성이 거의 없어 사이드바 하나에 평균 결함 10개. eslint-plugin-jsx-a11y를 CI에서 error로 강제하는 게 해법.
  • 코드 짜는 디자이너보다 AI 코드를 audit하는 시니어 프론트엔드의 가치가 오르는 달 (DESIGN.md 표준화 흐름).

다음 시리즈 포스트

26년 07월
  • 공급망 보안
  • 보안 패치
  • 툴링
  • 프레임워크 근황
  • React 실전 팁
  • 표준 및 엔진
  • AI와 디자인