26년 07월

한 달 동안 프론트엔드 생태계에서 일어난 일을 짧게 훑습니다. 이번 달은 딱히 요약 없음

공급망 보안

npm, 이번엔 진심이다

• npm v12, install 스크립트 기본 차단: 7월 출시되는 v12부터 preinstall/install/postinstall 자동 실행이 꺼진다. npm approve-scripts로 승인한 패키지만 실행. node-gyp·husky·Playwright류가 영향권이니 11.16.0+ 경고로 미리 목록화하고 allowlist를 package.json에 커밋할 것.
• 다만 만능은 아니다: 침해된 코드는 import 시점에 여전히 실행된다. 트리거 하나를 없앤 것이지 능력을 막은 게 아니다. 배경은 2025년 한 해 악성 패키지 약 45.5만 개.
• npm, 고영향 계정 72시간 잠금: 인기 패키지 메인테이너가 이메일 변경이나 2FA 복구 코드를 쓰면 72시간 읽기 전용. 계정 탈취 직후 악성 배포 패턴을 정조준했다.
• LinkedIn 채용 미끼에 숨은 백도어: 가짜 리크루터의 '코딩 테스트' 레포에 RCE 페이로드. 출처 불명 과제는 컨테이너에서만, 신뢰 전엔 절대 npm install 금지.
• actions/checkout v7: pull_request_target에서 포크 PR 코드를 가져오는 'pwn request' 패턴을 기본 거부. 해당 트리거를 쓰는 CI는 ref 설정 점검 필요.

보안 패치

안전장비는 과해도 됨

• Node.js 6월 보안 릴리스: 26.x·24.x·22.x 전 라인에 HIGH 2건 포함 11개 패치. 와일드카드 인증서 검증 우회(TLS)와 WebCrypto DoS라 SSR·BFF 서버는 영향 범위가 넓다. Docker 베이스 이미지의 Node 핀부터 올릴 것.
• React 앱 보안은 계층 방어: Server Components/Functions로 서버 책임이 늘면서 XSS 우회·CSRF·서버 검증·CSP까지 프론트 몫이 됐다. 클라이언트 검증의 보안 효과는 0.

툴링

드디어 TS7

• TypeScript 7.0 RC: Go 포팅 'Project Corsa'가 RC 도달. 시맨틱은 그대로, 속도는 약 10배(VS Code 코드베이스 타입 체크가 77초에서 7.5초). node10·es5·baseUrl 등 레거시 옵션은 하드 에러이니 GA 전에 tsconfig를 정리하자.
• VS Code 팀의 TS7 도입기: 6개월 점진 도입으로 타입 체크 36초 → 5초. 검증된 경로는 5.9 → 6.0(브리지) → 7, 그리고 @typescript/native-preview로 --noEmit 병행 테스트.
• React Compiler Rust 포팅 머지: 변환 로직 약 10배 빨라졌고, 머지 직후 Next.js canary·Oxlint·swc·Rolldown·Rspack이 줄줄이 통합. Rspack 기준 Babel 대비 7~13배. 안정 패키지 퍼블리시 전이니 도입은 지원 버전 확인 후에.
• Vite 8.1의 실험적 bundled dev mode: 1만 컴포넌트 기준 기동 15배, 풀 리로드 10배. Linear 실측 콜드 스타트 렌더링 최대 3배. --experimental-bundle로 브랜치에서 측정부터.
• Nub: Zod 제작자의 Rust 단일 바이너리 툴킷. Bun/Deno처럼 Node를 대체하는 게 아니라 stock Node를 증강한다. 파일 러너 ~2.9배, nubx는 npx 대비 ~19배. 락인 없이 Dockerfile 한 줄로 시험 가능.
• TanStack Table V9: 타입 인스턴스화 최대 86% 절감에 이어 프로토타입 공유로 메모리 ~90% 절감. 4GB에서 다룰 수 있는 행이 100만에서 1,000만 행대로. "측정하고, 추정하지 마라."

생태계 지각변동

이적시장이 열렸다

• VoidZero, Cloudflare에 합류: Vite·Vitest·Rolldown·Oxc 팀 전체가 Evan You와 함께 인수됐다. MIT 라이선스 유지 + 생태계 펀드 100만 달러. 주당 1.3억 다운로드 툴체인이 단일 벤더에 묶인 건 지켜볼 지점.
• Dan Abramov, Next.js 팀에 파트타임 합류: React 코어의 상징적 인물이 Vercel로. RSC·App Router 방향성에 힘이 실리는 시그널.
• Node.js, 연 1회 릴리스로 전환: Node 27부터 매년 4월 한 번, 홀짝 구분 폐지, 전부 LTS. '짝수만 쓴다' 휴리스틱은 은퇴.

프레임워크 근황

지루한 게 미덕

• Next.js 16.3 Instant Navigations 프리뷰: RSC 네비게이션 지연을 정조준. 라우트 데이터마다 Stream/Cache/Block 세 갈래를 고르게 하고, Partial Prefetching으로 prefetch 폭주를 줄였다. 아직 next@preview.
• React Router v8: 의도적으로 '지루한' 메이저. breaking change 전부가 v7 Future Flag로 미리 적용 가능. 대신 v6와 Remix v2는 공식 EOL이니 업그레이드 로드맵은 지금 잡아야 한다.
• Angular v22: Signal Forms·httpResource·Angular Aria가 한꺼번에 production-ready. signals 이후 가장 큰 안정화 묶음.
• shadcn/ui, GitHub 리포를 레지스트리로: 루트에 registry.json만 두면 shadcn add <user>/<repo>/<item>으로 설치. Tailwind를 내 CSS로 내리는 eject도 함께.
• Extend UI: PDF·DOCX·XLSX 뷰어/에디터 등 문서 앱용 15개 컴포넌트를 MIT로 공개. shadcn식 소스 복사 배포라 블랙박스 의존성이 아니다.

React 실전 팁

렌더링 최적화를 잘해야 살아남음

• Linear, styled-components에서 StyleX로: codemod 500+ PR에 좁은 스코프 agent를 조합해 약 10만 줄 전환, 페이지 이동 렌더 약 30% 단축. agent 결과물은 '맞아 보이지만 미묘하게 틀리다'. 시각 검증은 여전히 사람 몫.
• Conductor 재작성으로 2배: 전역 리렌더의 숨은 범인은 useSearchParams의 불안정 참조였다. useMemo 남발 대신 @tanstack/react-router의 structural sharing으로 해결.
• 최고의 로딩 상태는 로딩 상태가 없는 것: 스켈레톤은 대기의 포장일 뿐. 호버·뷰포트 기준 프리페치와 useTransition으로 준비가 끝난 뒤 전환하라. 단 무분별한 프리페치는 대역폭 청구서로 돌아온다.

런타임과 플랫폼

Deno가 데스크톱까지

• Deno 2.9의 deno desktop: 단일 TS 파일부터 Next.js·SvelteKit 앱까지 크로스플랫폼 데스크톱 바이너리로. Electron 대안 포지션에 --compress로 65MB → 19MB. 실험적 명령이라 SSR 호환은 검증 후에.
• Electron 43: 부트 스냅샷과 바이트코드 캐시로 시작 속도 개선. 32비트 지원은 이번이 마지막 라인.
• Node 26.4의 실험적 package maps: node_modules 탐색 대신 정적 JSON으로 bare specifier를 해석. 미선언 의존성 접근을 차단해 의존성 위생을 강제할 수 있다.
• npm 11.18, linked install 전략 stable: pnpm식 .store+심링크 구조가 npm 기본 옵션으로. 핵심 효과는 유령 의존성 차단.
• Drizzle이 한 달간 npm 배포 못 한 이유: packument 크기 제한에 걸린 사건의 전말. 릴리스가 잦은 패키지라면 같은 위험을 점검할 것.
• Safari 27 베타: 커스터마이즈 가능한 <select>, 스크롤 앵커링, Wasm JSPI. react-select를 네이티브로 대체할 길이 열리지만 아직 베타·WebKit 한정.

AI와 디자인

일이 실행에서 판단으로

• Figma Config 2026: code layers, Figma Motion(키프레임을 CSS/JSON/React로 복사, MCP 호환), shader fills. 모션 스펙 구두 전달 핸드오프가 사라질 여지.
• What is AX?: UX가 조종석 설계였다면 AX는 순간이동이다. 실행의 간극은 0으로, 평가의 간극은 벌어진다. diff 뷰·출처 표시·되돌리기 같은 '검증 표면'의 비중이 커진다.
• AI 시대 디자인의 핵심 역량은 비평: 비결정론적 시스템엔 동작 명세가 불가능하니 '좋음'을 정의하는 게 일이다. Judge-Evaluate-Iterate 루프, LLM judge는 F1≥0.8이면 신뢰하되 사람 어노테이션으로 보정.
• 확률론적 디자인: AI 출력을 확정처럼 전달하면 에어캐나다 챗봇처럼 법정에서 끝난다. 확신도 표시·범위 기반 표현·graceful degradation을 happy path보다 먼저.
• 디자인 시스템을 AI-Ready로: AI 프로토타입 품질의 병목은 모델이 아니라 시스템의 작은 불일치. Spec 파일, 토큰 레이어, Audit 스크립트 세 겹으로, 컴포넌트를 API처럼.
• Vercel AI SDK 7: 에이전트 중심 메이저. 실시간 음성 WebSocket 세션과 멀티 프로바이더 비디오 생성 추가. Vercel 없이도 쓸 수 있다.