26년 08월

한 달 동안 프론트엔드 생태계에서 일어난 일을 짧게 훑습니다. TypeScript 7 정식 출시!

보안 패치

프레임워크·런타임이 한꺼번에

• Next.js, 월간 정기 보안 릴리스 체제로 전환: 첫 릴리스부터 CVE 9건(High 4)을 수정. Server Action DoS, Turbopack i18n의 middleware 우회, rewrites() SSRF가 High다. 패치는 v16.2.11·v15.5.21, 이제 매달 나오니 팀 루틴에 넣을 것.
• React 19, 세 라인 동시 패치: Server Function 엔드포인트를 OOM·CPU 소진시키는 CVE-2026-44907(CVSS 7.5, 인증 불필요). react-server-dom-webpack 계열이 영향권이고 수정은 19.0.8 / 19.1.9 / 19.2.8에 백포트됐다.
• Node.js 7월 보안 릴리스: v26.5.1 / v24.18.1 / v22.23.2로 CVE 11건. High는 HTTP/2 메모리 고갈, nghttp2 use-after-free, --permission allowlist 우회 3건이니 해당 기능을 쓴다면 즉시 올릴 것.

공급망 보안

설치도 배포도 검문을 통과해야 한다

• npm v12, install 스크립트 기본 차단: 지난달 예고가 현실이 됐다. 의존성 스크립트와 암묵적 node-gyp rebuild가 전부 옵트인이 된다. 미승인 스크립트는 조용히 안 돌아 런타임에 가서야 실패하니 npm approve-scripts로 allowlist를 커밋해두자.
• npm, publish 시점 전수 멀웨어 스캔: 새로 publish된 패키지는 스캔이 끝나야 설치된다. 통상 5분, 피크엔 15분 이상이라 publish 직후 설치·배포하는 CI/CD엔 재시도 로직이 필요하다.
• 북한발 가짜 코딩 면접, 이번엔 SVG 스테가노그래피: Elastic이 분석한 Contagious Interview 캠페인. Next.js '테스트 챌린지' 저장소의 페이로드가 국기 SVG 주석에 Base64로 숨어 eval()된다. 공개 시점 AV 탐지 0건, 채용 명목 저장소는 격리 환경에서만 열 것.
• prototype pollution은 코어에서 막을 수 없다: Matteo Collina의 답변. 리포트 전부가 '앱에 이미 오염이 있다'를 전제로 깔고 있어 그 시점의 가젯은 취약점이 아니라 증상이다. 방어선은 경계이니 secure-json-parse로 객체 생성 전에 거부할 것.

툴링

TypeScript 7, 드디어 GA

• TypeScript 7.0 정식 출시: Go 재작성 컴파일러가 GA. 시맨틱은 6.0과 동일하고 풀 빌드는 8~12배(VS Code 125.7초 → 10.6초). 단 프로그래매틱 API가 없어 Volar 계열과 typescript-eslint는 7.1까지 6.0을 병행해야 한다.
• Hejlsberg의 실제 코드베이스 시연: 130만 줄 규모에서 직접 돌린 영상. Playwright 11.1초 → 1.1초, TypeORM 17.5초 → 1.3초로 규모와 무관하게 약 10배. 커스텀 transformer를 쓴다면 전환 전 호환성 검증이 필수.
• Vite+ 베타: VoidZero가 Vite 8·Vitest·Rolldown·Oxlint를 태스크 러너와 함께 단일 vp 명령으로 묶었다. 상용으로 기획됐다가 MIT로 전환했고, 1.0 이전이니 Oxlint 커버리지부터 확인할 것.
• ESLint 공식 codemod, v9는 8월 6일 EOL: v8→v9, v9→v10 마이그레이션 codemod가 나왔다. v9→v10은 npx codemod @eslint/v9-to-v10 하나에 4개가 묶여 있다. EOL은 이미 지났으니 아직 v9라면 이번 달 안에 정리하자.
• better-sqlite3 13.0, N-API로 이전: Node용 최속 동기 SQLite가 처음으로 N-API 위에서 동작한다. 프리빌트 바이너리를 Node·Electron 버전 간, 이론상 Bun에서도 재사용할 수 있다. 메이저 업이라 스테이징 확인 후 배포할 것.

프레임워크 근황

기본값이 뒤집혔다

• Next.js 16 Cache Components: 데이터가 기본 dynamic이 되고 "use cache"를 붙여야 캐시된다. cacheComponents: true 하나가 dynamicIO·useCache·ppr을 흡수한다. 캐시 스코프 안에선 cookies()를 못 읽어 기존 프로젝트엔 마이그레이션이다.
• React Compiler에 맡겼더니 깨진 것들: v1.0을 프로덕션 Next.js에 적용한 실전기. React Hook Form의 watch()가 얼어붙었고, useCallback을 지운 Chart.js 핸들러는 stale data를 참조했다. 함수 정체성에 의존하는 서드파티는 "use no memo"로 우회할 것.
• Shopify, 체크아웃 위젯을 React에서 Preact로: 강제 64KB 번들 예산을 도입했는데 vanilla React만으로 기본 73KB라 예산을 넘겼다. Preact + Polaris web components로 전환해 전송 번들 40~85% 감소, 확장 로드도 7~8% 빨라졌다.
• Preact 11.0 Beta 2: 메인테이너 Jovi De Croock이 "마지막 베타 중 하나"라고 밝힌 릴리스. 마이그레이션 가이드가 이미 나와 있어 정식 전에 사전 검증을 시작할 수 있다.

성능 실전

느린 건 LCP가 아니라 hydration이다

• hydration mismatch 하나가 LCP를 빨간불로 만든다: React 18부터 mismatch는 가장 가까운 Suspense 경계 DOM 전체의 remount다. font-display: swap과 겹치면 hydration이 끝나는 5초 이후에야 LCP가 찍힌다. 콘솔 경고를 성능 버그로 취급해 CI에서 차단할 것.
• Container Timing API origin trial: LCP가 최대 요소 하나만 보는 것과 달리 DOM의 특정 영역 전체가 언제 보였는지를 측정한다. 'LCP는 좋은데 핵심 위젯이 늦는' 문제를 containertiming 속성 하나로 잡을 수 있다. 다만 Chrome 148~153 한정 실험이다.
• Web Locks API로 다중 탭 동시성 풀기: OLX는 두 탭이 같은 영상 업로드를 중복 실행하는 문제를 브라우저 표준 락으로 해결했다. navigator.locks.request()는 콜백 종료 시 자동 해제된다. 2022년부터 Baseline이라 localStorage 플래그 대신 쓸 수 있다.
• 프레임워크 12종을 매일 밤 벤치마크: Alicia Sykes가 동일한 날씨 앱을 React·Vue·Svelte·Solid·Qwik·Lit 등으로 구현하고 매일 밤 자동 측정한다. 번들 크기·Lighthouse·빌드/HMR까지 재고 원시 데이터는 JSON/TSV로 받는다. 다만 앱이 소규모다.

UI와 디자인 시스템

Meta는 풀었고, shadcn은 갈아탔다

• Meta, 디자인 시스템 Astryx 오픈소스 공개: 8년간 13,000개 이상 제품을 구동해 온 사내 시스템을 MIT로 공개(베타). React + StyleX 기반에 접근성 컴포넌트 150개 이상과 테마 시스템, CLI. 핵심은 AI 에이전트가 사람과 같은 레퍼런스로 빌드하도록 설계된 점.
• shadcn/ui, 기본 프리미티브를 Base UI로 전환: 2023년 출시 이래 기반이던 Radix 대신 Base UI가 신규 프로젝트 기본값이 됐다. shadcn/create 사용자가 이미 2:1로 Base UI를 택한 걸 공식화한 결정. 기존 프로덕션 앱은 옮길 필요 없고, shadcn 팀도 자사 프로덕션은 Radix를 유지 중이다.
• shadcn/typeset: 렌더된 HTML(예: Markdown 출력)용 드롭인 타이포그래피 시스템. 단일 CSS 파일과 래퍼 클래스 하나로 동작하고 수십 개 설정 대신 CSS 변수 몇 개로 제어한다.
• Shadscan: shadcn 컴포넌트를 정적 분석해 접근성·상태·합성 모범 사례 관련 약 60개 검사를 돌린다. AI도 API 키도 필요 없는 결정론적 검사라 CI에 붙이기 쉽다.
• UI SFX: 사운드를 파일 이름이 아니라 의미로 호출하는 라이브러리. 78개 시맨틱 큐, 936개 사운드를 런타임 12.0kB·의존성 0으로 제공한다. autoplay 정책상 unlock() 시점을 놓치면 첫 소리가 씹힌다.

AI와 디자인

산출물의 독자가 더는 사람만이 아니다

• ReactBench: React Scan·Million.js 팀이 만든 벤치마크로, 코딩 에이전트가 현실적인 React 작업을 실제로 동작하게 만드는지 평가한다. 다른 벤치마크 점수만 좋은 모델을 걸러내는 게 목적이고, 현재 GPT 5.6 Sol이 선두다.
• NN/g, AI가 읽는 디자인 컨텍스트를 제안: 리서치·디자인 산출물의 소비자가 사람에서 AI로 이동한다는 관점. 컨텍스트에 없으면 모델은 학습 데이터의 '평균적인 화면'을 만들어낸다. Google Labs의 DESIGN.md를 사례로 들고 확장판 UX.md를 가설로 제시한다.
• Layers, 제품 디자인 7레이어를 AI skill로: Reality → Problem space → Solution space의 7레이어에 각각 돌릴 수 있는 skill을 붙였다. FE 관점에선 객체 맵·용어집이 타입 정의와 i18n 키의 밑그림이 된다.
• 필요한 건 새 도구가 아니라 심리스한 통합: 배경에 머물며 반복 작업을 처리하는 'Quiet AI'가 핵심이라는 Vitaly Friedman의 글. 사용자는 새 워크플로가 아니라 기존 멘탈 모델 안의 해결을 원한다. AI는 별도 챗 화면이 아니라 인라인 contextual action으로 심을 것.
• UX는 활동량이 아니라 비즈니스 성과로 보고하라: UX 팀이 예산 싸움에서 지는 건 경영진의 언어로 보고하지 않아서다. 투자 평가 5축은 매출 영향, 비용 절감, 리스크 완화, 출시 속도, 리텐션. 'LCP 1.2초 개선'이 아니라 '이탈률 감소 → 매출 기여'로 프레이밍하자.

런타임과 언어

ES2026 확정, 그리고 네이티브 바이너리

• ECMAScript 2026 승인: 6월 30일 Ecma International이 17판을 승인했다. Map upsert, JSON.parse 소스 접근, Iterator.concat, Uint8Array base64/hex 변환, Math.sumPrecise, Error.isError, Array.fromAsync 7종. 기대를 모았던 Temporal은 ES2027로 밀렸다.
• Node.js 26.5.0 (Current): import attributes로 텍스트 파일을 ES 모듈에서 import하는 기능이 실험 플래그 뒤에 추가됐다. 대용량 blob 스트리밍용 blob.textStream()도 함께.
• scriptc, TS를 네이티브 바이너리로: 평범한 TypeScript를 JS 엔진 없는 170~200KB 네이티브 바이너리로 AOT 컴파일한다. 실제 tsc로 타입체크한 코드를 그대로 쓰고 시작 약 2.4ms(Node 47ms). Vercel Labs 실험이라는 점은 감안할 것.
• Bun을 Zig에서 Rust로 재작성한 전 과정: Jarred Sumner이 포팅 과정을 공개했고 이 코드베이스가 곧 나올 Bun 1.4의 기반이 된다. 다수의 Claude Code 인스턴스를 동원했고 API 가격 기준 약 $165k가 들었다. 런타임급 코드베이스도 에이전트로 옮기는 레퍼런스 케이스.