MDN, 프론트엔드 재구축에서 React 대신 Web Components 선택

MDN ditches React for web components in frontend rebuild

📅 2026-04-14 📰 JavaScript Weekly

요약

MDN은 방대한 콘텐츠 사이트의 프론트엔드를 React에서 Web Components와 자체 제작 Server Component 시스템으로 전환하여, 모든 페이지에 불필요한 JavaScript를 배포하는 것을 피할 수 있었다. 이는 콘텐츠 중심의 현대적 웹사이트 구축 시 React보다 경량 솔루션이 효과적일 수 있음을 보여준다.

핵심 포인트

MDN이 React를 Web Components로 대체하여 불필요한 JavaScript 페이로드를 제거하고 성능을 개선했다. 콘텐츠 중심 사이트에서는 무거운 JavaScript 프레임워크가 최적의 솔루션이 아닐 수 있다.
자체 제작 Server Component 시스템을 구현하여 각 페이지의 필요한 기능만 최소화된 JavaScript로 전송할 수 있다. 이는 React Server Components 이전에 유사한 개념을 구현한 사례이다.
Google이 6월부터 뒤로가기 버튼을 '납치'하는 사이트에 검색 결과에서 페널티를 주기로 결정하여, 브라우저 히스토리 네비게이션을 방해하지 않도록 주의해야 한다.
TanStack Start가 React Server Components에 대한 실험적 지원을 추가했으며, Phaser 4.0이 13주년을 맞이하여 성능/효율성 개선과 AI 에이전트용 스킬 파일을 포함한 주요 업데이트를 출시했다.
Bun v1.3.12가 네이티브 무헤드 브라우저 자동화와 Bun.cron 인프로세스 태스크 스케줄러를 추가했으며, React 19.2.5/19.1.6/19.0.5가 Server Components 취약점 패치를 배포했다.

왜 중요한가

MDN의 사례는 대규모 콘텐츠 사이트에서 JavaScript 프레임워크의 필요성을 재평가하게 하며, Web Components와 Server Components를 활용하여 성능을 극대화할 수 있음을 보여준다.

📄 전문 번역

📰 JavaScript 주간 뉴스 요약 (2026년 4월 14일)

주목할 소식

MDN의 새로운 프론트엔드 스택 공개

MDN이 프론트엔드를 완전히 새로 지었다는 소식이 업계에서 화제네요. React를 걷어내고 Web Components와 자체 개발한 서버 컴포넌트 시스템으로 전환했거든요. 콘텐츠가 많은 웹사이트에서 불필요한 JavaScript를 최소화하는 방법에 대한 좋은 사례라고 평가받고 있습니다.

Expo로 웹 개발처럼 모바일 앱 만들기

JavaScript 개발자라면 눈여겨볼 만합니다. Expo가 웹처럼 편리한 워크플로우를 모바일 네이티브 앱 개발에 그대로 가져왔거든요. 기기에서 바로 핫 리로드가 되고, 앱스토어 심사를 건너뛰는 OTA 업데이트도 지원합니다. Vercel처럼 작동하는 클라우드 빌드까지 있으니 말이에요. npx create-expo-app으로 지금 바로 시작할 수 있습니다.

게임 프레임워크 Phaser 4.0 출시

널리 사용되는 2D 게임 프레임워크 Phaser가 13년 만에 메이저 업데이트를 했습니다. 성능과 효율성 개선에 집중했고, AI 에이전트가 Phaser 4.0 앱을 구축할 수 있도록 스킬 파일도 포함됐어요. 다양한 데모와 게임 예제가 있고, v3 사용자를 위한 마이그레이션 가이드도 준비됐습니다.

간단한 소식들

Google 검색 결과 정책 변경: 6월부터 뒤로 가기 버튼을 방해하는 사이트에 패널티를 부과합니다. Chris Nelson은 "사용자의 브라우저 히스토리 네비게이션을 방해하는 어떤 것도 하지 않도록 주의하세요"라고 말했습니다.
TanStack Start: React Server Components 실험 버전 지원을 추가했습니다.
dotJS: 9월 18일 프랑스 파리에서 개최되며, 아직 2주간 CFP 신청을 받고 있습니다.
JSHeroes 컨퍼런스: 5월 14-15일 루마니아에서 열립니다.

새 버전 출시

Bun v1.3.12: 헤드리스 브라우저 자동화 기능이 네이티브로 추가되었고, Bun.cron으로 인 프로세스 태스크 스케줄러를 사용할 수 있습니다.
React 19.2.5, 19.1.6, 19.0.5: React Server Components 보안 취약점 수정 버전이 배포됐습니다.
React Native 0.85: 새로운 애니메이션 백엔드와 개발자 도구 개선사항 포함
그 외 pnpm v11.0 RC 0, React Three Fiber 9.6, Electron 41.2, DOMPurify 3.4

흥미로운 기술 글과 영상

Firefox 확장 프로그램 전수 조사

개발자가 JavaScript로 Firefox 확장 프로그램 생태계를 탐험한 이야기인데, 정말 재미있습니다. 개발자를 위한 '이상한 나라의 앨리스' 같은 느낌이에요. 이런 식의 깊이 있는 탐사 글이 더 많아지면 좋겠습니다.

중첩된 Promise의 쓸모

James가 2013년 Promises/A+ 논쟁을 다시 꺼냈는데, 실제로 마주친 동시성 문제 때문에 생각이 바뀌었다고 합니다. 난이도가 높지만 읽을 가치가 충분합니다.

Promise는 취소할 수 없다 (가끔은 가능하지만)

Promise를 완전히 취소할 순 없지만, async 함수가 영원히 해결되지 않는 Promise를 기다리게 만들면 함수 실행을 멈출 수 있습니다. 함수는 조용히 멈추고 가비지 컬렉션이 뒷정리를 합니다.

Parse, Don't Validate (TypeScript로 유효성 검증 증명하기)

같은 검증 코드를 여러 파일에 반복 작성하느라 고민이신가요? Branded types와 discriminated unions을 사용하면 TypeScript가 그 증명을 대신해줍니다.

Intl API: 당신이 모르는 최고의 브라우저 API

코드 예제가 풍부한 Intl API 입문서입니다. 다국어 처리에 정말 유용하거든요.

그 외 추천 글들

@swc/jest로 단위 테스트 속도를 15초에서 4초로 단축하기
Astro에서 Barba.js와 GSAP로 커스텀 페이지 트랜지션 만들기
GitHub의 Diff 라인 렌더링 성능 최적화 도전기
QuickJS로 JavaScript 런타임 구축하기

개발 도구와 라이브러리

Boneyard: 자동 생성 스켈레톤 화면

실제 UI를 스냅샷으로 캡처해서 페이지 레이아웃을 정확히 모방하는 스켈레톤 'bones' 목록을 자동으로 생성합니다. React, Preact, React Native, Vue, Svelte, Angular를 모두 지원합니다.

Micro-ML: 예측 및 클러스터링 라이브러리

약 56KB 크기의 WASM 기반 라이브러리로, TensorFlow.js 같은 무거운 라이브러리 없이 회귀, 평활, 클러스터링, 분류, 시계열 예측을 할 수 있습니다.

Ink 7.0: React로 터미널 UI와 CLI 앱 만들기

많은 인기 있는 터미널 앱을 지원하는 라이브러리가 v7.0으로 업그레이드됐습니다. React 19.2를 기반으로 하고, useEffectEvent로 효율성을 높였으며, 새로운 훅과 설정 옵션이 추가됐어요.

web-audio-api: Node와 Bun에서 Web Audio API 사용하기

Web Audio API를 서버 환경에서 사용할 수 있게 해줍니다. 머신에서 오디오를 재생하거나 파일로 렌더링할 수 있으며, Tone.js도 정상 작동합니다. 다양한 예제도 포함되어 있습니다.

Syncpack: 모노레포의 일관된 의존성 관리

Electron, Cloudflare, Vercel 등 대형 프로젝트에서 사용하는 CLI 도구입니다. 자바스크립트 모노레포의 의존성 버전을 일관되게 관리할 수 있습니다.

🔗 원문 보기 👍 유용해요