dev-weekly 2025-10-04

2025년 10월 4일

CSS

Workers 호환성을 개선하여 이제 express 를 포함한 많은 npm 모듈 실행 가능
- node:console, crypto, fs, https, dns, net, process, timers, tls, zlib API 지원. 지원하지 않는 API는 명시적 에러
- TS, Cpp를 결합하여 네이티브 구현. Wrangler를 쓰지 않기 때문에 성능 향상
- wrangler.jsonc or wrangler.toml 에서 nodejs_compat 플래그 설정. wrangler 사용 안하면 클라우드 플레어 대시보드 혹은 API 플래그 제어 가능
Workers는 EOL 없음. remove_nodejs_compat_eol 플래그는 통해 현재 호환 날짜까지 EOL 에 도달한 API 제거

<Activity /> 앱의 일부를 조건부 렌더링 하는 대신 Activity 사용 가능

// Before
{isVisible && <Page />}

// After
<Activity mode={isVisible ? 'visible' : 'hidden'}><Page /></Activity>

useEffectEvent useEffect 내부의 값을 사용하게 되면 의존성에 전부 선언 필요했었음. Effect event를 사용하면 이를 추출하여 Effect에서 분리 가능.
퍼포먼스 트랙
- 스케쥴러 - 유저 인터랙션을 위한 블로킹이나 트랜지션과 같은 다양한 우선순위에 대해 리액트가 어떤 작업을 수행하는지 보여줌
- 컴포넌트 - 렌더링하거나 이펙트를 실행하기 위해 작업중인 컴포넌트 트리를 보여줌
Partial Pre-Rendering
클라이언트 렌더링, SSR 에서 스트리밍 되었는지에 따라 서스펜스 바운더리 다르게 나타나는 버그 수정

no-cache 저장하되 재검증 하지 않는다는 뜻인데 캐시하지 않는다 처럼 오해받는 영역들 존재. 많은 사이트가 캐싱을 잘못하고 있고 이를 위해 만든 가이드
- HTTP 캐시에 대해 옵션들과 우선순위, 멘탈모델에 대해 설명한 가이드. 사용 사례에 따른 패턴, 레시피 제공
캐시 멘탈 모델 - 캐싱은 한 곳에서 일어나는게 아니라, 각 레이어마다 고유한 규칙, 범위, 특징을 가진 여러 레이어로 구성된 생태계
메모리 캐시는 HTTP 캐싱 헤더 영향 안받음. 단일 세션 동안 유지. 디스크 캐시는 탭과 세션간 유지. HTTP 캐싱 헤더 준수.
브라우저는 캐시 키로 요청된 리소스의 스키마, 호스트, 경로, 쿼리 스트링, top-level browsing context도 사용해 double-keyed caching을 구현.
- 모던 브라우저는 임베디드 iframe과도 구분하는 triple-keyed caching 으로 전환 중
- Vary 헤더 - 특정 요청도 캐시 키에 포함되어야 함을 알려줌.
캐싱은 freshness vs validation. 언제 재사용할 수 있는가.
- 하이 레벨에 3가지 카테고리 존재. Freshness controls, Validators, Metadata
- 카테고리별 헤더들 - max-age, s-max-age, … age, ETag 등
CDN 캐시(Cloudflare), 애플리케이션 캐시
캐시 디버깅

값의 변화를 스크린 리더기에게 알려주는 output 엘리먼트 소개
label 처럼 for를 통해 input 연결 가능. 토스트같은 사용성 아님. 토스트는 role="status" (혹은 alert)을 사용하는게 좋음