이번 주 React 소식 #267 : Bun, Next-Intl, Grab, Aria | Worklets, Teleport, Voltra, AI SDK, Screens | State of JS, Temporal

Source: Dev.to

안녕하세요, 여러분!

익숙해져야 할 겁니다: 또 한 주가 AI 콘텐츠로 가득 차 있네요. MCP부터 Agent Skills, AI‑전용 CLI까지, 어디를 바라봐야 할지 모르겠어요.

State of JavaScript 2025 설문조사에서 다시 한 번 상위 5개 뉴스레터에 선정된 것을 기쁘게 생각합니다. 여러분의 신뢰에 감사드립니다!

그런데 여러분의 피드백도 듣고 싶어요 — 뉴스레터의 어떤 점이 마음에 들고, 2026년에 어떻게 하면 더 좋게 만들 수 있을까요? 답장만 달아 알려 주세요! ❤️

💡 Subscribe to the official newsletter to receive an email every week!

React 성능, v2

실제 중요한 곳에서 React 앱을 빠르게 만들기.

Steve Kinney가 제공하는 고급 성능 강좌로, 실제 병목 현상을 진단하고 최신 React 19 패턴을 사용해 느리고 끊긴 React 앱을 고치는 데 중점을 둡니다.

• 🚀 모던 React: Suspense, 전환, 지연된 값, 하이드레이션, 서버 액션
• 🔍 빠른 디버깅: React DevTools와 Profiler를 사용해 불필요한 재렌더링을 찾기
• 🧠 스마트 최적화: 메모이제이션, 가상화, 코드 스플리팅, 낙관적 UI
• ⚡ 빠른 UX 체감: React Fiber가 작업을 우선순위화하여 앱을 반응성 있게 유지하는 방식을 배우세요

⏱ 4시간 이상 • ⭐ 4.8 평점
🏫 Frontend Masters 제공

빠른 링크 및 하이라이트

• 💸 PostHog – 에이전트 1년 동안 얻은 8가지 교훈
• 👀 React DOM PR – SubmitEvent.submitter 지원
• 👀 React.dev PRs – useOptimistic, useActionState, useEffectEvent 문서 개편
• 📜 React’s ViewTransition Element – Chris Coyier가 “와 네이티브 document.startViewTransition() API를 비교
• 📜 Why Inngest migrated off Next.js to TanStack Start – 로컬 개발 시간을 83 % 단축
• 📜 Reverse‑Engineering Figma Make – 바이너리 .fig 파일에서 React 앱 추출
• 📜 GitHub Copilot CLI’s animated ASCII banner – React Ink를 사용해 터미널 UI에 신뢰성 있는 애니메이션 컴포넌트 렌더링
• 📜 Can AI actually debug complex React/Next.js issues? – Claude Opus가 실제 버그 3개 중 1개만 해결
• 📜 React design‑system library MCP – 실험적인 Storybook MCP 서버 활용
• 💸 Building AI Voice Agents at Scale – ElevenLabs의 경영진용 플레이북

패키지 및 릴리스

동영상

• 🎥 Toby Mey – “Next.js 16에서 인증을 어디에 두어야 할까?”
• 🎥 Remotion – “AI로 모션 그래픽 만들기 – 초보자를 위한 간단 튜토리얼”

💸 후원

Meticulous – 자동화된 E2E UI 테스트

아직도 테스트를 수동으로 작성하고 계신가요? Notion, Dropbox, LaunchDarkly는 이제는 상상도 할 수 없는 새로운 테스트 패러다임을 도입했습니다. 전 Palantir 엔지니어들이 만든 Meticulous는 개발자 노력이 전혀 들지 않으면서 거의 완전한 커버리지를 제공하는 지속적으로 진화하는 E2E UI 테스트 스위트를 자동으로 생성합니다 – 다른 어떤 방법으로도 달성할 수 없는 수준입니다.

How it works

• 매 테스트 실행마다 거의 완전한 커버리지
• 테스트 생성이 필요 없음
• 유지보수 불필요 (진심)
• 플레이크 제로 (결정론적 브라우저)

🤨 궁금하신가요? 시간을 예약하고 자세히 알아보기

React Native 멀티스레딩의 뒷이야기

Vision Camera V5 × React Native Worklets – Worklets가 Reanimated에서 분리되어 일급 멀티스레딩 프리미티브가 되었습니다. 곧 출시될 Vision Camera V5에 통합되어 실시간 프레임‑프로세서 시스템이 카메라 스레드에서 직접 실행됩니다.

• 📦 Worklets 0.8 – Bundle Mode preview – 워크릿 내부에서 서드파티 라이브러리와 네트워크 요청을 허용합니다 (옵트인, 기본값이 될 수 있음).

💸 컴포넌트를 수동으로 찾는 것을 중단하세요 – Radon의 Element Inspector를 사용해 React Native 앱을 더 빠르게 빌드하세요.

Articles

• 📜 Building Voltra: Renderer – Widgets & Live Activities 라이브러리 제작자가 맞춤 렌더러를 설명합니다 (React DOM SSR에서 영감).
• 📜 2026년 모바일 앱 다운로드와 유지율을 높이는 5가지 팁

Packages

• 📦 Teleport 1.0 – React Native용 진정한 네이티브 포털(ReactDOM.createPortal의 모바일 버전)이며, 뷰 재부모화, 재사용 및 사전 렌더링을 지원합니다. 크로스‑플랫폼이며 웹도 지원합니다.
• 📦 Screens 4.21 – Android 스택 화면 사전 로딩, iOS xcassets 아이콘 카탈로그 지원을 통해 주요 네비게이션 UI 요소를 제공합니다.

Source:

📦 릴리스 및 도구

• Xcode 26.3 RC – 에이전트 기반 코딩의 힘을 풀어줍니다.

  • Xcode를 IDE로 사용하고 싶지 않다면, 새로운 Xcode MCP와 RenderPreview 도구를 활용해 AI에게 시각적 피드백을 제공할 수 있습니다 (SwiftUI 프리뷰; RN 뷰에서는 작동하지 않을 가능성이 높습니다).

• Agent‑Device – AI 에이전트를 위한 iOS 및 Android 디바이스 제어 CLI.

  • 모바일용 Vercel의 agent‑browser와 동등한 기능입니다. TV/데스크톱 앱 지원은 예정되어 있습니다.

• AI SDK Profiler – 새로운 Rozenite DevTools 플러그인.

  • RN AI SDK에서 발생하는 OpenTelemetry 스팬을 검사할 수 있게 해줍니다.

• AI SDK 0.12 – 프로파일러 플러그인, AI v6, 도구 호출 및 Llama 모델을 위한 재정렬 기능.

• Tamagui 2.0 RC – React용 범용 스타일 라이브러리.

  • 더 안정적이고, 사용하기 쉬우며, 문서화가 잘 되어 있고, 빠르며, 기능이 완전합니다.

• Uniwind 1.3 – 데이터 속성 지원.

• Superconfig – Nitro를 사용해 react-native-config보다 18배 빠릅니다.

• Callstack – Android TurboModule을 처음부터 구현 (영상).

• React Native Live – Infinite Red에서 제공하는 새로운 월간 라이브 쇼 채널 (영상).

• Beto – “환경 변수를 유출하고 있나요? React Native + Expo” (영상).

• Simon Grimm – “2026년을 위한 Expo Router 팁 10가지!” (영상).

• RNR 352 – Cedric van Putten과 함께하는 Expo 런치 (팟캐스트).

Source:

🔀 기타

• State of JavaScript 2025 – 설문 결과

  • React와 Next.js의 사용량은 계속 증가하고 있지만 만족도는 감소하고 있습니다.
  • Astro와 Solid 같은 대안은 비교적 높은 만족도 점수를 보이고 있습니다.

• JavaScriptCore에 Temporal 제안 구현

  • JS Temporal API가 곧 모든 브라우저에 도입될 예정이며, Safari가 마지막 남은 브라우저입니다.
  • JSC(Safari, Bun)를 위한 구현이 완료되었지만 아직 병합되지 않았습니다.

• Node.js 경로 탐색: 방지 및 보안 가이드

  • http://localhost:port/images/../../etc/passwd와 같은 위험한 경로 입력으로부터 Node 애플리케이션을 보호하는 방법을 설명합니다.

• 한 번에 브라우저 API 구축

  • 전문가가 만든 좋은 프롬프트를 사용하면 Claude Opus가 IndexedDB의 괜찮은 TypeScript 구현을 한 번에 생성할 수 있습니다.

• Astro 5.17 – 개발자 도구 툴바 위치, 파티션 쿠키, 비동기 파일‑로드 파서.

• Turborepo 2.8 – Git worktree 지원, 에이전트 스킬, AI‑활성화.

• Babel 7.29 – 마지막 Babel 7 마이너 릴리스.

  • Babel 8이 RC 단계에서 발표되었으며, 채택이 쉽고 ESM‑전용이 되는 것을 목표로 합니다.

• npmx – npm 레지스트리를 위한 빠르고 현대적인 브라우저.

🤭 재미

(항목이 없습니다)

읽어 주셔서 감사합니다! 이 호를 즐기셨다면 팀과 공유해 주세요.

Note: iOS xcassets 아이콘 카탈로그는 이미 React Navigation의 네이티브 탭에 통합되어 있습니다.