Skip to content

Instantly share code, notes, and snippets.

@leedc0101

leedc0101/fe-briefing-2026-03-24.md

Created March 24, 2026 01:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save leedc0101/69a769dd7c4a50369e86599b658a328a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save leedc0101/69a769dd7c4a50369e86599b658a328a to your computer and use it in GitHub Desktop.
Download ZIP
frontend-briefing-2026-03-24-KST
Raw
fe-briefing-2026-03-24.md

FE 데일리 브리핑 — 2026-03-24 KST

번역일: 2026-03-24 | 수집 소스: Hacker News, CSS-Tricks, InfoQ, DEV, OpenUI Blog

1. The Three Pillars of JavaScript Bloat (JavaScript 비대화의 세 가지 원인)

원문 제목: The Three Pillars of JavaScript Bloat
원문 링크: https://43081j.com/2026/03/three-pillars-of-javascript-bloat
번역일: 2026-03-24 KST

npm 의존성 트리가 점점 비대해지는 이유를 세 가지 관점에서 분석한 글이다.

주요 내용

1. 오래된 런타임 지원 (레거시 엔진 + 영역 보호)
ES3/IE6 시절 코드를 지원하기 위해 is-string, hasown 같은 마이크로 패키지들이 여전히 존재한다. Object.hasOwn, typeof 같은 네이티브 기능으로 충분히 대체 가능한데도 말이다.

2. 원자적 패키지 아키텍처의 극단적 남용
lodash처럼 기능을 극단적으로 잘게 쪼개는 패턴이 퍼지면서, 단순한 함수 하나를 쓰기 위해 수십 개의 패키지를 설치하게 된다.

3. 이미 불필요해진 폴리필(ponyfill)
Promise, fetch 등 이미 모든 주요 브라우저/Node.js가 지원하는 기능임에도 폴리필 패키지가 의존성 트리에 남아있다.

e18e 커뮤니티가 이 문제를 체계적으로 정리하고 있으며, 불필요한 패키지를 제거하는 "cleanup" 이니셔티브를 진행 중이다.

2. Gea JS — "JavaScript Is Enough" (JavaScript만으로 충분하다)

원문 제목: JavaScript Is Enough (Gea Framework)
원문 링크: https://geajs.com/
HN 토론: https://news.ycombinator.com/item?id=47473231
번역일: 2026-03-24 KST

React hooks가 "함수 안에 슬며시 끼워넣은 OOP"라는 비판이 담긴 HN 토론과 함께, 새 프레임워크 Gea가 주목받고 있다.

Gea 핵심 철학

  • 새로운 개념 제로: 시그널도, 훅도, 의존성 배열도 없다. 스토어는 클래스, 계산 값은 getter, 상태 변경은 그냥 대입(assignment)
  • 컴파일 타임 반응성: Vite 플러그인이 JSX를 빌드 시점에 분석해 외과적 DOM 업데이트만 생성
  • 가상 DOM 없음: diffing, reconciliation 오버헤드 없이 직접 DOM 변경
  • 크기: 라우터 포함 ~13kb gzip
class CounterStore extends Store {
  count = 0
  increment() { this.count++ }
}
// 그냥 클래스. 컴파일러가 반응형으로 만들어준다.

HN 커뮤니티에서는 "React hooks는 OOP를 함수형의 뒷문으로 재발명한 것"이라는 지적과 함께 Gea의 접근법에 공감하는 댓글이 많았다. 다만 복잡한 앱에서 React가 내재화한 문제(concurrent rendering, Suspense 등)를 Gea가 어떻게 처리할지는 아직 미지수다.

3. We Rewrote Our Rust WASM Parser in TypeScript — and It Got 3x Faster

원문 제목: Rewriting our Rust WASM Parser in TypeScript
원문 링크: https://www.openui.com/blog/rust-wasm-parser
HN 토론: https://news.ycombinator.com/item?id=47461094
번역일: 2026-03-24 KST

"Rust WASM이 당연히 빠르다"는 통념을 깨는 실전 사례다.

왜 TypeScript가 더 빨랐나?

OpenUI 팀은 파서를 Rust → WASM으로 컴파일해서 브라우저에서 실행하고 있었다. 그런데 TypeScript로 재작성했더니 3배 빠라졌다.

원인 분석:

  • WASM ↔ JS 경계(bridge)를 넘는 직렬화/역직렬화 오버헤드가 누적됨
  • V8 엔진이 순수 TypeScript 코드에 대해 JIT 최적화를 훨씬 잘 수행함
  • 파서 특성상 JS 호출이 빈번해서 WASM의 연산 이점이 브리지 비용에 묻힘

교훈: Rust/WASM은 순수 연산 집약적(compute-bound) 작업에는 유리하지만, JS 환경과 자주 데이터를 주고받는 작업에서는 오히려 불리할 수 있다.

4. State of JavaScript 2025: TypeScript 완전 정착, Vite가 Webpack 제치다

원문 제목: State of JavaScript 2025: Survey Reveals a Maturing Ecosystem with TypeScript Cementing Dominance
원문 링크: https://www.infoq.com/news/2026/03/state-of-js-survey-2025/
원본 설문: https://2025.stateofjs.com/en-US
번역일: 2026-03-24 KST

2025년 11월 진행, 2026년 2월 공개된 State of JavaScript 2025 서베이 주요 결과.

핵심 수치

항목 결과
TypeScript 전용 사용 40% (2024: 34%, 2022: 28%)
순수 JS 전용 6%
Vite 만족도 98%
Webpack 만족도 26% (2024: 36%에서 하락)
React 사용률 83.6%
Next.js 사용률 59%

주목할 트렌드

  • "TypeScript가 이겼다": Node.js에서 type stripping을 네이티브 지원하면서 TypeScript는 사실상 표준 언어가 됨
  • Vite의 부상: 사용률은 Webpack(87%)이 Vite(84%)를 약간 앞서지만, 만족도 격차가 압도적
  • Turbopack 고전: Vercel이 밀어붙이는 Rust 기반 Turbopack은 아직 28% 사용률
  • Rolldown 급성장: Rollup 대체를 목표로 하는 Rust 기반 Rolldown이 1% → 10%로 급증
  • Next.js 논란: 가장 많은 댓글을 받은 프로젝트. "복잡도가 너무 높아졌다", "Vercel의 상업적 방향이 불안하다"는 우려 多

5. Abusing Customizable <select> — CSS로 커스텀 드롭다운 만들기

원문 제목: Abusing Customizable Selects
원문 링크: https://css-tricks.com/abusing-customizable-selects/
번역일: 2026-03-24 KST

브라우저의 새 네이티브 커스터마이즈 가능한 <select> 기능을 활용한 창의적인 CSS 데모 모음.

핵심 내용

크로미움 기반 브라우저에서 새롭게 지원되는 커스터마이즈 <select>를 이용하면:

  • 기존 JS 없이 <select> 드롭다운의 외관을 완전히 바꿀 수 있다
  • <option> 안에 <span> 등 추가 마크업 삽입 가능
  • CSS만으로 폴더 스택, 카드 UI 등 복잡한 드롭다운 구현
<select>
  <option value="documents"><span>Documents</span></option>
  <option value="photos"><span>Photos</span></option>
</select>

주의: 현재 Chromium 기반 브라우저에서만 동작. 하지만 미지원 브라우저에서는 일반 <select>로 graceful degradation.

6. What's !important #7 — CSS random(), 앵커 컨테이너 쿼리, Popover API

원문 제목: What's !important #7: random(), Folded Corners, Anchored Container Queries, and More
원문 링크: https://css-tricks.com/whats-important-7/
번역일: 2026-03-24 KST

CSS-Tricks 정기 뉴스레터. 이번 호 주요 내용:

random() / random-item()

CSS 네이티브 랜덤 함수. width: random(--w element-shared, 1rem, 2rem) 처럼 사용.

clip-path로 접힌 모서리(folded corner) 만들기

Kitty Giraudel의 새 기법 — box-shadow 없이 clip-path만으로 구현.

font-variant-numeric: tabular-nums

숫자가 동적으로 바뀔 때 레이아웃 시프트를 막는 CSS 프로퍼티. 라이브 시계, 카운터, 금융 테이블에 필수.

앵커 컨테이너 쿼리(Anchored Container Queries)

CSS Anchor Positioning + Container Queries 조합으로 동적 토글팁 구현 데모.

backdrop-filter 재조명

::backdrop 전용이 아니라 일반 요소에도 다양한 배경 효과를 줄 수 있다.

7. HTML popover 속성 완벽 가이드

원문 제목: The HTML popover Attribute — Complete Deep Dive
원문 링크: https://dev.to/anjab/the-html-popover-attribute-complete-deep-dive-l6d
번역일: 2026-03-24 KST

Popover API가 UI 개발에서 <dialog> 등장 이후 가장 큰 변화라는 평가.

핵심

<div popover id="menu">Hello Popover</div>
<button popovertarget="menu">Open</button>
<!-- JS 불필요 -->
  • JS 없음, ARIA 핵 없음, 포탈 로직 없음
  • 열리면 자동으로 top layer로 올라감 (z-index 전쟁 종료)
  • overflow: hidden에 클리핑되지 않음
  • ESC, 외부 클릭으로 자동 닫힘 (auto 모드)

popover vs dialog vs div

Popover Dialog Div+JS
내장 open/close ✅ ✅ ❌
외부 클릭 닫기 ✅ ❌ ❌
Top layer ✅ ✅ ❌
포커스 관리 부분 강력 수동

메뉴/드롭다운 → popover, 모달 → dialog, 커스텀 레이아웃 → div+JS.

자동 생성 — FE 데일리 브리핑 봇 by Jarvis

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment