frontend-briefing-2026-02-15-KST

01-eslint-v10.md

ESLint v10.0.0 released (길이상 요약 번역)

• 원문 제목: ESLint v10.0.0 released
• 원문 링크: https://eslint.org/blog/2026/02/eslint-v10.0.0-released/
• 번역 생성일: 2026-02-15 (KST)

원문이 매우 길어서, 업그레이드/마이그레이션에 직접 영향을 주는 핵심 섹션 중심으로 요약 번역했습니다.

하이라이트

ESLint v10.0.0은 주요(major) 릴리즈로, 새 기능과 파괴적 변경이 포함됩니다.

설치

메이저 릴리즈라 자동 업그레이드가 안 될 수 있습니다.

npm i eslint@10.0.0 --save-dev

Node.js 지원 범위

게시 시점 기준 Node.js v24.x가 LTS이며, ESLint v10은 다음을 지원 종료합니다.

• Node.js v20.19.0 미만
• v21.x, v23.x

마이그레이션 가이드

변경점이 많기 때문에 공식 마이그레이션 가이드가 제공됩니다.

• https://eslint.org/docs/latest/use/migrate-to-10.0.0

대부분의 사용자는 빌드 변경 없이 업그레이드 가능할 것으로 예상하지만, 문제가 있으면 가이드를 참고하라고 안내합니다.

주요 변경점

1) 설정 파일 탐색(lookup) 알고리즘 변경

ESLint v10은 eslint.config.*(flat config)를 찾을 때,

• 기존(v9): 현재 작업 디렉터리(CWD) 기준
• 변경(v10): 각 린트 대상 파일의 디렉터리에서 시작해서 탐색

이 변경은 한 번의 실행에서 여러 config를 다룰 수 있게 해주고, 모노레포에서 특히 유용하다고 설명합니다.

v9에서 실험 플래그 v10_config_lookup_from_file로 켤 수 있었고, v10에서는 기본값이 되었으며 해당 플래그는 제거되었습니다.

2) eslintrc 시스템 제거(완전 삭제)

v10에서 eslintrc 구성 시스템이 완전히 제거되었습니다. 즉,

• .eslintrc.*, .eslintignore는 더 이상 동작하지 않음
• ESLINT_USE_FLAT_CONFIG 환경변수는 더 이상 무시되지 않고 동작하지 않음(더 이상 의미 없음)
• CLI에서 eslintrc 전용 옵션들(--no-eslintrc, --env, --rulesdir, --ignore-path 등)이 제거
• /* eslint-env */ 주석은 에러로 보고

API 레벨에서도 LegacyESLint 제거 등 여러 변경이 있습니다.

3) JSX reference 추적

JSX 식별자도 스코프 분석에서 참조로 추적하게 되어,

• no-unused-vars의 오탐/미탐
• no-undef의 미탐

같은 문제가 줄어든다고 설명합니다.

4) RuleTester 강화

플러그인/룰 작성자용 RuleTester가 더 엄격해졌습니다.

• 메시지/위치/데이터 검증을 강제하는 옵션(requireMessage, requireLocation, requireData) 추가
• 실패한 테스트 케이스 위치를 더 잘 찾아주도록 스택 트레이스 개선

요약

• v10은 flat config 전환 + eslintrc 완전 제거가 핵심입니다.
• 모노레포는 파일 기준 config 탐색으로 멀티 config 실행이 쉬워집니다.
• 업그레이드는 공식 마이그레이션 가이드 기반으로 진행하는 게 안전합니다.

02-webpack-roadmap-2026.md

Roadmap 2026 (webpack)

• 원문 제목: Roadmap 2026
• 원문 링크: https://webpack.js.org/blog/2026-04-02-roadmap-2026/
• 번역 생성일: 2026-02-15 (KST)

개요

webpack TSC는 2026년에 단순 유지보수를 넘어, 설정/의존성 복잡도를 줄이고 현대 런타임(웹/Node/Bun/Deno 등)에 대비하는 개선을 추진한다고 설명합니다.

2026년에 집중하는 주요 항목

플러그인 없이 CSS Modules 지원

experiments.css 옵션으로 제공되던 네이티브 CSS 지원을 더 진전시켜,

• 2~3월쯤 코어 포함을 목표로 하고
• 한동안 실험 상태로 버그 리포트를 받다가
• webpack 6에서는 더 이상 실험이 아니며 관련 플러그인(예: mini-css-extract-plugin)이 필요 없어지는 방향을 언급합니다.

universal 타깃(크로스 런타임 호환)

Node, 웹, Bun, Deno 등 다양한 런타임에서 돌아가도록

• 결과물이 순수 ESM이 되도록 래핑/출력을 정리하고
• 런타임 비종속적인 빌드를 목표로 하는 universal 타깃 아이디어를 소개합니다.

로더 없이 TypeScript 빌드

최근 TypeScript paths 해석을 코어에 넣어 플러그인 의존을 줄였고, 다음으로는 ts-loader 같은 로더 없이 webpack 자체에서 TS 트랜스파일까지 지원해 의존성을 더 줄이려는 방향을 제시합니다.

HTML entry(플러그인 없이)

html-webpack-plugin 없이도 HTML 파일을 import하고 entry로 사용하는 기능을 실험 옵션으로 코어에 넣는 아이디어를 언급합니다.

Webpack Everywhere

Node 내부 의존(Buffer 등)과 결합을 줄이고, Node 전용 모듈(node:fs) 같은 의존이 있어도 브라우저/다른 환경에서 적절히 처리할 수 있게 런타임-중립 구조를 강화하려고 합니다.

Lazy Barrel Optimization 평가

Rspack의 lazy barrel 최적화처럼, side-effect 없는 barrel(재export 묶음)에서 실제 사용되지 않는 모듈은 빌드하지 않는 전략을 검토해 빌드 시간을 줄이려는 아이디어입니다.

자산(minimizer) 설정 단순화

현재는 JS/CSS/HTML/JSON minimizer 플러그인을 각각 관리해야 하는데, 이를 통합한 단일 minimizer 플러그인으로 정리해 설정과 유지보수 부담을 줄이려는 방향을 제시합니다.

Dev Experience 개선

• dev-middleware/hot-middleware 병합, dev-server overlay 추출 등 내부 정리
• webpack-cli 유지보수/사용성 개선(패키지 통합, help/subcommand 리팩토링 등)

문서 정확성

타입/스키마에서 API/설정 문서를 자동 생성해 문서-동작 불일치를 줄이는 목표를 언급합니다.

마무리

로드맵 전반은 “플러그인/로더 의존을 줄이고, 코어에서 흔한 작업을 기본 제공하며, 런타임 다양화에 대비”하는 방향으로 요약됩니다.

03-interop-2025-webkit.md

Interop 2025: A year of convergence (WebKit)

• 원문 제목: Interop 2025: A year of convergence
• 원문 링크: https://webkit.org/blog/17808/interop-2025-review/
• 번역 생성일: 2026-02-15 (KST)

Interop 2025 요약

Interop 프로젝트는 Apple, Bocoup, Google, Igalia, Microsoft, Mozilla 등이 함께 웹 플랫폼에서 상호운용성이 중요한 영역을 정하고(테스트 스위트 기반), 브라우저 간 구현을 맞추는 협업입니다.

2025년은 지금까지 가장 야심찬 해였다고 설명합니다.

• 포커스 영역 19개 + 조사(investigation) 영역 5개
• 연초에는 모든 브라우저가 동시에 통과하는 테스트 비율이 29%였는데,
• 연말에는 Interop 점수가 97% 통과율에 도달
• 실험 브라우저(Chrome Canary/Edge Dev/Firefox Nightly/Safari TP) 모두 99% 달성

Safari가 43 → 99로 가장 큰 폭으로 상승했다고 강조합니다.

올해 다룬 영역(예시)

CSS/UI 쪽

• Anchor Positioning
• View Transitions
• @scope
• backdrop-filter
• text-decoration
• writing modes
• layout(Flexbox/Grid)
• <details> element

API/플랫폼 기능

• Navigation API
• Storage Access API
• URLPattern
• JS Modules
• scrollend event
• WebRTC
• WebAssembly

호환성/건강 영역

• Core Web Vitals
• Pointer/Mouse events
• Mutation events 제거
• 전반적인 web compatibility

조사 영역

• 접근성 테스트, Gamepad API 테스트, 모바일 테스트, 프라이버시 테스트, WebVTT

특히 의미 있었던 3가지 포커스

1) Anchor positioning

JS 포지셔닝 라이브러리 없이도 CSS만으로 popover/tooltip/menu를 기준 요소에 배치할 수 있게 해주는 기능이며, 여러 해 동안 가장 요청이 많던 CSS 기능 중 하나였고 “모든 브라우저에서 상호운용 가능”하게 됐다고 설명합니다.

2) Same-document View Transitions

브라우저 네이티브로 UI 상태 간 전환 애니메이션을 제공하는 API이며, Safari 18.x에서 지원을 제공했고, Interop을 통해 브라우저 간 호환이 맞아가면서 "이제 쓸 준비가 됐다"는 메시지입니다.

3) Navigation API

history.pushState()의 현대적 대안으로, SPA에서 인터셉트/트래버설/엔트리 등 네비게이션을 더 제대로 다룰 수 있게 합니다. Safari 26.2에서 지원했고, 초기부터 상호운용성 있게 들어온 점을 강조합니다.

결론

그래프가 보여주는 핵심은 “모든 엔진이 위로 수렴(convergence)했다”는 것이며, 이 수렴이 개발자가 "한 번 쓰고 어디서나 동작"을 더 믿을 수 있게 만든다고 설명합니다.

Interop 2025 결과는 대시보드에서 전체 포커스 영역별 점수까지 확인할 수 있습니다.

• https://wpt.fyi/interop-2025

04-a-broken-heart-safari.md

A Broken Heart (Safari에서 ❤️ 하나로 100배 느려진 사례)

• 원문 제목: A Broken Heart
• 원문 링크: https://allenpike.com/2026/a-broken-heart/
• 번역 생성일: 2026-02-15 (KST)

요약

대시보드가 원래 1초 내외로 로드되다가 갑자기 10초가 걸리기 시작했고, 조사해보니 Safari에서만 재현되는 성능 문제였다는 이야기입니다.

초기 가설과 반전

작성자는 처음엔 React 문제(불필요한 리렌더, memo 누락 등)를 의심했고, 코딩 에이전트에게 React 이슈를 찾아 고치게 했지만 큰 개선이 없었습니다. 그래서 본격적으로 성능 프로파일링을 시작합니다.

Safari 성능 인스펙터를 보면 네트워크/JS 파싱/스타일 계산이 아니라, CPU의 대부분(94%)이 Layout에 쓰이고 있었고, 한 번의 Layout 패스가 1600ms 이상 걸리는 등 비정상적으로 느렸다고 합니다.

바이너리 서치로 최소 재현

원인을 찾기 위해 "바이너리 서치" 방식(원인이 될 만한 요소를 절반씩 제거/되돌리며 최소 재현을 찾는 방식)을 적용했고, 10분 정도 만에 범인을 찾습니다.

범인은 버튼에 추가했던 하트 이모지(❤️) 였습니다.

• 하트를 제거하면 Layout이 2ms
• 다시 넣으면 Layout이 1600ms

더 깊은 원인: Noto Color Emoji + Safari

버그 리포트를 위해 최소 재현 HTML을 만들다 보니, 진짜 문제는 이모지 자체라기보다 폰트였다고 합니다.

다음 HTML이 Safari 26.2에서 Layout에 1600ms가 걸림:

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet">
  <style>
    body { font-family: "Noto Color Emoji"; }
  </style>
</head>
<body>
  💔
</body>
</html>

Noto Color Emoji는 COLRv1 컬러 폰트 기술을 쓰는데, Safari에서는 SVG fallback 경로에서 CoreSVG 쪽이 매우 느린 것처럼 보인다고 합니다.

대응/권장 사항

작성자는 “Apple 플랫폼에서 Noto Color Emoji를 쓰지 말고, 폰트 목록에서 Apple Color Emoji를 먼저 두라”는 실무 팁을 남깁니다(버그가 고쳐질 때까지).

또한 코딩 에이전트가 원인 격리/최소 재현 제작에 강력한 도구였다는 경험담으로 마무리합니다.

참고: WebKit 버그 트래커에도 이 이슈가 등록됐다고 합니다.

• https://bugs.webkit.org/show_bug.cgi?id=305636

05-viteland-jan-2026.md

What’s New in ViteLand: January 2026 Recap (VoidZero)

• 원문 제목: What’s New in ViteLand: January 2026 Recap
• 원문 링크: https://voidzero.dev/posts/whats-new-jan-2026
• 번역 생성일: 2026-02-15 (KST)

개요

VoidZero는 Vite/Vitest/Rolldown/Oxc를 하나의 통합 툴체인으로 묶어 개발자 생산성을 높이겠다는 방향을 설명하고, 2026년 1월의 업데이트를 요약합니다.

Unified by Design

각 프로젝트가 개별 시각 정체성을 유지하던 것을, voidzero.dev / vite.dev / vitest.dev / rolldown.rs / oxc.rs 등 전반에서 통합된 디자인/브랜딩으로 개편했다고 합니다. 이는 단순 외형이 아니라, Vite 8이 Rolldown/Oxc를 내부적으로 사용하고, Oxlint/Oxfmt도 같은 파서를 공유하는 등 “실제 통합”이 진행 중이라는 메시지로 연결됩니다.

Project Updates

Vite

• Vite 누적 npm 다운로드가 30억을 넘었다고 언급합니다.
• React Server Components 플러그인이 프레임워크들이 커스텀 환경을 더 쉽게 통합할 수 있도록 조정되었다고 합니다.

Vitest

• Vitest 4.1 베타가 시작.
• Test Tags 기능(태그 기반으로 테스트 필터링/타임아웃 등 설정)을 소개.
• Vite 없이 Vitest를 돌리는 방향(옵션 끄기 등) 논의가 진행 중.
• 테스트 컨텍스트 확장에 builder 패턴을 도입해 타입 추론을 개선.

Rolldown

• Rolldown이 RC(릴리즈 후보) 단계에 도달, 실험 기능을 제외하면 API 파괴적 변경이 없을 거라고 합니다.
• Lazy Barrel Optimization 도입: barrel 파일에서 실제 사용되는 모듈만 컴파일.
  • 실사례로 AntDesign에서 Button 하나만 import할 때 컴파일 모듈 수 92% 감소, 빌드 2배 빨라짐을 언급.
• 청킹 알고리즘 개선으로 불필요한 chunk 생성을 줄임.
• tsdown v0.20 릴리즈(롤다운 RC 지원/성능 개선 등)

Oxc

• Oxlint가 동적 config(예: oxlint.config.ts)를 지원.
• 네이티브 룰 추가(예: prefer-const).
• tsgolint가 tsconfig 탐색 동시화로 20% 빨라짐.
• Oxfmt에 Tailwind class sorting(실험) 도입.
• import 그룹 정렬 기본 순서 RFC 공개.
• Oxfmt가 Prettier와 100% 컨포먼스(호환) 달성, 그 과정에서 Prettier 업스트림 버그 리포트/수정.

커뮤니티/마이그레이션 사례

• Turborepo가 ESLint/Prettier에서 Oxlint/Oxfmt로 마이그레이션했고, 가이드도 추가.
• Hugging Face, Lichess 등도 Prettier → Oxfmt, ESLint → Oxlint 전환 사례가 언급됩니다.

요약하면, VoidZero 생태계는 “번들러/린터/포매터”를 통합하고 속도/DX를 끌어올리는 방향으로 빠르게 진척 중이라는 내용입니다.

06-wcag-3-overview.md

WCAG 3.0 overview and update (Feb 2026)

• 원문 제목: WCAG 3.0 overview and update 2026
• 원문 링크: https://abilitynet.org.uk/resources/digital-accessibility/what-expect-wcag-30-web-content-accessibility-guidelines
• 번역 생성일: 2026-02-15 (KST)

WCAG 3.0는 무엇인가

WCAG 3.0는 W3C가 만드는 차세대 디지털 접근성 가이드라인입니다. 기존 WCAG 1.0~2.2가 “Web Content Accessibility Guidelines”였다면, WCAG 3.0에서는 약어의 의미가 “W3C Accessibility Guidelines”로 바뀌어 웹 페이지만이 아니라 더 넓은 범위를 다루는 방향을 강조합니다.

왜 새 표준이 필요한가

웹 콘텐츠를 넘어서는 범위

WCAG 2.2가 주로 웹 페이지에 적용되었다면, WCAG 3.0은 다음도 지원 대상으로 삼습니다.

• 모바일 앱/소프트웨어
• 문서(PDF 등)
• CMS 같은 저작 도구
• 브라우저/보조공학(유저 에이전트)
• VR/XR 환경 등

유지보수 용이성

표준 개정이 너무 오래 걸리는 문제를 줄여, 더 자주 업데이트 가능한 구조를 목표로 합니다.

더 포괄적인 포용

감각/신체뿐 아니라 인지 장애 등 더 넓은 사용자군을 커버하려는 방향을 설명합니다.

다른 접근성 표준과의 관계

여러 표준(ATAG/UAAG/WCAG 등)이 흩어져 있던 것을 WCAG 3.0에서 더 조화롭게 통합하려는 목표를 말합니다. 다만 WCAG 3.0이 나온다고 WCAG 2.2가 즉시 폐기되는 것은 아니며, 법/규정에 내장된 2.2가 한동안 병행될 것이라고 합니다.

언제 완성되나

2016년부터 개발 중이며, 문서 기준으로는 2028년 이전 최종 확정이 어렵다는 전망을 제시합니다.

• Working Draft(현재)
• Candidate Recommendation(예상: 2027년 Q4)
• W3C Recommendation(최종, 2028년 이후 가능)

WCAG 3.0의 큰 변화

스코프

“페이지(URI)” 중심에서 벗어나,

• view(뷰포트에서 실제 상호작용 가능한 화면)
• process(여러 뷰의 흐름)

단위로 평가할 수 있게 되는 방향을 설명합니다.

적합성(Conformance)

WCAG 2.x의 pass/fail 이분법에서 벗어나,

• Foundational requirements
• Supplemental requirements
• Assertions

로 나누고, 점수/레벨 같은 더 유연한 모델을 준비 중이라고 합니다.

더 쉬운 문서(plain language)

기술 문서가 너무 어렵다는 문제를 줄이기 위해 plain language 요약을 포함하려는 방향을 언급합니다.

준비 방법

현재는 WCAG 2.2를 사실상의 기준으로 유지하는 게 맞고, WCAG 3.0은 아직 변동이 크므로 “현재 초안만 맞춘다고 최종 적합을 보장하진 않는다”고 설명합니다. 동시에, 포용적 디자인과 실제 사용자 피드백을 포함하는 접근은 지금부터도 도움이 되며 WCAG 3.0 방향성과도 충돌하지 않을 가능성이 높다고 합니다.

07-bun-1-3-9.md

Bun v1.3.9

• 원문 제목: Bun v1.3.9
• 원문 링크: https://bun.sh/blog/bun-v1.3.9
• 번역 생성일: 2026-02-15 (KST)

bun run --parallel / --sequential

여러 package.json 스크립트를

• 동시에(--parallel) 또는
• 순차로(--sequential) 실행할 수 있는 옵션을 소개합니다.

예시:

bun run --parallel build test
bun run --sequential build test
bun run --parallel --filter '*' build lint test
bun run --sequential --workspaces build

각 출력 라인에 스크립트 이름/패키지 이름 프리픽스를 붙여(포어맨 스타일) 어떤 작업에서 나온 로그인지 구분하기 쉽게 합니다.

기본적으로 하나가 실패하면 나머지를 중단하고, 모두 끝내고 싶으면 --no-exit-on-error를 사용합니다.

또한 --filter/--workspaces와 함께 쓸 수 있고, pre/post 스크립트는 메인 스크립트와 함께 올바른 순서로 묶여 실행된다고 설명합니다.

net.Server → HTTP/2 업그레이드 패턴 수정

net.Server에서 받은 raw TCP 연결을 Http2SecureServer로 넘기는 패턴이 이제 정상 동작한다고 합니다.

mock()/spyOn()에 Symbol.dispose 지원

mock() / spyOn()이 Symbol.dispose를 구현해서 using 키워드로 스코프를 벗어날 때 자동으로 복구되게 할 수 있습니다.

import { spyOn, expect, test } from "bun:test";

test("auto-restores spy", () => {
  const obj = { method: () => "original" };

  {
    using spy = spyOn(obj, "method").mockReturnValue("mocked");
    expect(obj.method()).toBe("mocked");
  }

  expect(obj.method()).toBe("original");
});

NO_PROXY 동작 개선

이전엔 프록시를 명시적으로 옵션으로 넘기면 NO_PROXY가 무시되었는데, 이제는 명시적 프록시 옵션을 쓰더라도 NO_PROXY를 항상 체크하도록 수정되었습니다.

--cpu-prof-interval

CPU 프로파일 샘플링 간격을 마이크로초 단위로 지정하는 --cpu-prof-interval 플래그를 추가했습니다(Node와 유사).

--compile에서 ESM bytecode 지원

--bytecode와 --format=esm 조합을 지원합니다.

ARMv8.0에서 SIGILL 크래시 수정

구형 ARM64(Cortex-A53, Raspberry Pi 4 등)에서 발생하던 illegal instruction(SIGILL) 크래시를 수정했다고 합니다.

성능 개선(일부)

• Markdown→HTML 렌더링(특수문자 스캔 SIMD 최적화)
• bun.markdown.react()에서 문자열 캐싱으로 할당 감소
• AbortSignal에 리스너가 없을 때 불필요한 이벤트 생성 회피

JavaScriptCore 업그레이드 하이라이트(일부)

정규식 SIMD 가속, 특정 패턴 JIT 개선, startsWith/Map.size/Set.size/trim/defineProperty 등의 엔진 최적화가 소개됩니다.

버그 수정(일부)

Node 호환성, bun API/Web API 크래시/행(hang) 문제, 보안 관련 수정(요청 스머글링 가능성) 등이 포함됩니다.