shiwoo.dev logoshiwoo.dev

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

프론트엔드 뉴스레터

#36

2026년 11월 11일3개 소식

이번 이슈 한눈에

  • Playwright 1.65는 렌더링되지 않는 텍스트를 접근성 이름에서 뺍니다
  • Modern Web Guidance는 코딩 에이전트에게 Baseline 기준 최신 웹 기능 가이드를 넣어 주는 스킬 모음이에요
  • Rolldown 1.3은 preserveModules 출력 파일 이름을 바꿔요. Vite가 rolldown 버전을 고정하므로 일반 Vite 설치는 영향을 받지 않습니다
  1. 01

    github.com

    Playwright 1.65로 올리면 기존 테스트 결과가 달라질 수 있어요

    Playwright 1.65는 요소를 다루는 방식을 실제 브라우저 동작에 더 가깝게 바꿨어요. 이제 slot에 배정되지 않은 텍스트처럼 브라우저가 렌더링하지 않는 텍스트는 접근성 이름과 aria snapshot에서 빠집니다. 그래서 getByRole에 name을 넘겨 요소를 찾거나 aria snapshot을 비교하는 테스트는 결과가 달라질 수 있어요. click, check, fill 같은 동작은 대상 요소가 inert 상태(상호작용이 막힌 상태)에서 풀릴 때까지 기다리고, 계속 막혀 있으면 타임아웃됩니다.

    TypeScript 테스트 파일의 클래스 필드도 이제 tsc처럼 tsconfig.json의 useDefineForClassFields 설정을 따라요. 이 설정은 target이 ES2022 이상이거나 target을 지정하지 않으면 켜집니다. 그런 프로젝트에서는 생성자 매개변수로 받은 page를 클래스 필드 초기값에서 바로 쓰는 코드(예: constructor(private readonly page: Page)와 readonly submit = this.page.getByRole(...))가 TypeError로 실패해요. 필드 초기값이 생성자보다 먼저 실행되기 때문입니다.

    • 초기화를 생성자 안으로 옮기거나 useDefineForClassFields를 false로 두면 이전처럼 동작해요.
    • Node.js 20은 더 이상 테스트 대상이 아니에요. Node.js 22, 24, 26을 쓰라고 안내합니다.
    원문 읽기 ↗
  2. 02

    news.hada.io

    코딩 에이전트가 오래된 패턴 대신 최신 웹 기능을 쓰도록 돕는 Modern Web Guidance

    LLM 학습 데이터에는 오래된 코드가 많고 최신 웹 기능의 구현 사례는 적어요. 그래서 코딩 에이전트는 브라우저가 이미 지원하는 기능을 두고도 예전 방식으로 코드를 쓰기 쉽습니다. Modern Web Guidance는 이 문제를 겨냥한 에이전트 스킬 모음으로, GoogleChrome GitHub 조직에서 공개했어요.

    이 스킬은 에이전트가 작업할 때 관련된 가이드를 찾아 컨텍스트에 직접 넣어 줘요. 가이드는 250개 웹 기능과 203개 실제 사용 사례를 다룹니다. 주요 브라우저가 어떤 기능을 지원하는지 알려 주는 Baseline 데이터를 기준으로, 무거운 polyfill보다 가벼운 대체 구현을 권해요. 가이드 검색은 로컬에서 돌아가서 네트워크 호출이나 API 키가 필요 없습니다.

    • 프로젝트 README에 실린 자체 평가(11월 8일 기준)에서는 가이드를 붙였을 때 과제 통과율이 claude_code 57%→88%, codex_cli 54%→82%, antigravity_cli 58%→94%로 올랐어요.
    • 실험적이거나 불안정한 기능의 가이드는 기본으로 꺼져 있어요. 익명 사용 데이터를 수집하는데, DISABLE_TELEMETRY=1 환경 변수로 끌 수 있습니다.
    원문 읽기 ↗
  3. 03

    github.com

    Rolldown 1.3에서 preserveModules로 빌드한 라이브러리의 출력 파일 이름이 바뀌어요

    Vite가 사용하는 Rust 기반 번들러 Rolldown 1.3에는 빌드 결과를 바꾸는 변경이 있어요. preserveModules는 원본 모듈 구조대로 파일을 나눠 출력하는 옵션인데, 이 옵션에서 파일 이름 패턴 [name]이 이제 JS가 아닌 확장자를 그대로 남깁니다. Rollup과 같은 동작이에요.

    그래서 data.json은 data.js가 아니라 data.json.js로, Comp.vue는 Comp.vue.js로 출력돼요. 패키지 exports가 예전 파일 이름을 가리키는 라이브러리는 경로를 고쳐야 합니다.

    • Vite는 rolldown 버전을 고정해서 일반 Vite 설치는 영향을 받지 않아요. 다만 Vite 8.3.6 이하는 Rolldown 1.3과 함께 쓰려면 수정이 필요하니, 아직 overrides나 resolutions로 강제로 올리지 말라고 안내합니다.
    원문 읽기 ↗

다음 이슈 받아보기

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

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

← 뉴스레터 #35 · 2026-11-10