Expo SDK 53 beta is now available

 

 

https://expo.dev/changelog/sdk-53-beta

 

Expo SDK 53 베타 기간 정보

베타 기간

• 베타 기간은 오늘부터 약 2주간 지속됩니다.
• 이 기간 동안 개발자들은 SDK를 테스트하고 새 릴리스가 자신의 시스템과 앱 구성에 문제를 일으키지 않는지 확인할 수 있습니다.
• 베타 기간 동안 지속적으로 수정사항과 개선사항이 릴리스될 예정이며, 일부는 호환성이 깨지는 변경사항(breaking changes)이 포함될 수 있습니다.

기술적 세부사항

• SDK 53 베타는 React Native 0.79.0과 React 19.0.0을 포함합니다.
• 전체 릴리스 노트는 정식 출시 때까지 제공되지 않습니다.
• 릴리스 범위와 호환성이 깨지는 변경사항에 대해 더 알고 싶으면 expo/expo 리포지토리의 변경 로그를 확인할 수 있습니다.
• 베타가 완료되면 모든 변경 로그가 루트 CHANGELOG.md에 병합될 예정입니다.

베타 테스트 지원

• 릴리스 테스트에 관심 있는 개발자들을 위해 Discord에서 오피스 아워를 운영할 예정입니다.

이 정보는 제가 이전에 언급했던 내용과 일부 차이가 있는데, 특히 React Native 버전이 0.74.1이 아닌 0.79.0이며, React 19.0.0을 포함한다는 점이 주목할 만한 차이입니다. 이는 매우 최신 버전의 React와 React Native를 지원한다는 의미로, React 19의 새로운 기능들도 활용 가능하다는 점이 중요합니다.

 

 

 

새로운 아키텍처(New Architecture)가 이제 기존 프로젝트에서도 기본 설정으로 적용

주요 변경사항

• SDK 52에서는 새 프로젝트에서만 New Architecture를 기본으로 활성화했지만, 기존 프로젝트에서는 선택적으로 적용 가능했습니다.
• SDK 53에서는 모든 프로젝트에서 New Architecture가 기본적으로 활성화되며, 아직 준비가 되지 않은 경우 명시적으로 비활성화해야 합니다.
• 비활성화 방법에 대한 가이드가 제공됩니다.

라이브러리 호환성 관련 주의사항

1. react-native-maps 사용자:
   • 현재 권장되는 1.20.0 버전 대신 최신 1.21.0 릴리스를 설치해보세요.
   • 설치 명령어: npx expo install react-native-maps@1.21.0
   • 버전 검증에서 제외하고 config 플러그인에 변경사항 적용 필요
   • 이 버전은 New Architecture를 완전히 지원하며, Expo SDK 53의 기본 버전으로 권장되기 전에 더 넓은 커뮤니티의 테스트가 필요합니다.
   • 이 오픈소스 라이브러리에 크게 의존하는 앱을 개발한다면, 지속적인 유지보수를 위해 프로젝트 후원을 고려해보세요.
   • iOS 18 이상만 지원하거나 iOS를 지원하지 않는 앱의 경우, 새로운 SwiftUI 및 Jetpack Compose 기반의 expo-maps를 대안으로 고려할 수 있습니다.
2. @stripe/stripe-react-native 사용자:
   • 아직 New Architecture를 지원하지 않지만, 곧 지원 예정입니다.

대응 방법

• New Architecture로 마이그레이션하는 데 문제가 있다면, expo/expo 저장소에 이슈를 생성하고, 문제가 해결될 때까지 비활성화하는 것을 권장합니다.

이러한 변경은 React Native 개발 생태계에서 중요한 전환점을 나타냅니다. New Architecture는 성능 향상과 네이티브 통합 개선을 제공하지만, 일부 라이브러리가 아직 완전히 지원하지 않을 수 있으므로 기존 프로젝트를 업데이트할 때 주의가 필요합니다.

 

 

 

Android 프로젝트를 위한 Edge-to-Edge 기본 적용 출시

추가 정보를 해석해 드리겠습니다.

Edge-to-Edge 기능의 중요성

• SDK 52에서는 @zoontek과 함께 react-native-edge-to-edge 라이브러리 개발에 협력하고 있다고 발표했습니다.
• 이 라이브러리는 Android 앱 콘텐츠가 시스템 바 아래로 자연스럽게 흐르도록 Edge-to-Edge 디스플레이를 쉽게 구현할 수 있게 해줍니다.
• 이 기능이 중요해진 이유는 Google이 Android 16(2025년 6월 출시 예정)부터 Edge-to-Edge를 비활성화하는 옵션을 더 이상 제공하지 않을 것이라고 발표했기 때문입니다.

Android 버전별 Edge-to-Edge 정책 변화

• Android 15에서는 API 레벨 35를 타겟팅하는 앱에 Edge-to-Edge를 강제 적용했지만, R.attr#windowOptOutEdgeToEdgeEnforcement를 true로 설정하여 비활성화할 수 있었습니다.
• Android 16(API 레벨 36)부터는 R.attr#windowOptOutEdgeToEdgeEnforcement가 더 이상 지원되지 않고 비활성화되어, 앱이 Edge-to-Edge를 비활성화할 수 없게 됩니다.

SDK 53에서의 Edge-to-Edge 적용 상황

1. Expo Go 앱에서 기본 활성화 - 비활성화 옵션 없음
2. 모든 새 프로젝트에서 기본 활성화 - Expo Go 외부에서는 비활성화 가능
3. Expo Go 외부의 기존 프로젝트에서는 기본 비활성화 - 활성화 가능 및 권장됨

향후 계획

• SDK 54에서는 Edge-to-Edge가 신규 및 기존 프로젝트 모두에서 기본값이 될 예정입니다.
• 더 자세한 가이드는 정식 SDK 53 릴리스 시점에 제공될 예정입니다.
• 그때까지는 react-native-edge-to-edge README의 "Considerations" 섹션을 참고하시기 바랍니다.

이러한 변경은 Android의 UI/UX 트렌드를 반영하며, Edge-to-Edge 디자인이 Google의 디자인 가이드라인에 맞춰 표준이 되고 있음을 보여줍니다. React Native 개발자들은 이러한 변화에 미리 대비하여 앱을 업데이트하는 것이 좋을 것 같습니다.

 

 

 

향상된 Swift UI 및 Jetpack Compose 통합, 실험적 신규 Expo UI 패키지 출시

추가 정보를 해석해 드리겠습니다.

Expo UI 소개

• Expo UI는 개발자들에게 Jetpack Compose와 SwiftUI의 네이티브 UI 컴포넌트에 쉽게 접근할 수 있는 방법을 제공합니다.
• 토글, 슬라이더, 컨텍스트 메뉴, 피커, 리스트와 같은 필수적인 플랫폼 프리미티브를 포함하여 Android Views 및 iOS UIKit 기반의 기존 커뮤니티 라이브러리를 보완합니다.

현재 상태와 주의사항

• 이 라이브러리는 실험적이며, 매우 초기 단계이고, 빠르게 변화하고 있습니다.
• 오늘 사용 중인 API가 내일 변경될 수 있습니다!
• SwiftUI와 Jetpack Compose는 아직 React Native 생태계에서 널리 사용되지 않고 있으며, Expo 팀은 이러한 도구들과의 통합을 위한 몇 가지 독특한 접근 방식을 탐색하고 있습니다.
• 문제점과 제한사항이 발견될 것이며, 이를 보고해 주시기를 권장합니다.

개발 배경과 기여자

• 이는 생태계에서 이러한 종류의 첫 시도가 아니며, 여러 사람들의 공동 노력으로 발전되어 왔습니다.
• 기여자들: Andrew Levy, Janic Duplessis, Andrew Prifer, Emanuel Quimper, Benjamin Komen, Fernando Rojo, "Pflaumenbaum" 등
• 이 문제에 관심이 있는 개발자들의 기여를 환영합니다.

추가 정보

• 향상된 SwiftUI 및 Jetpack Compose 통합에 대한 자세한 정보가 곧 제공될 예정입니다.
• Expo UI에 대한 더 많은 정보는 API 레퍼런스에서 확인할 수 있습니다.
• GitHub에서 예제를 볼 수 있습니다.

이 실험적인 패키지는 React Native 개발자들에게 iOS와 Android의 최신 UI 프레임워크에 접근할 수 있는 새로운 방법을 제공할 것으로 보입니다. 아직 초기 단계이지만, 네이티브 UI 컴포넌트를 JavaScript를 통해 쉽게 사용할 수 있게 해주는 중요한 발전이 될 수 있습니다.

 

 

 

로컬 빌드 캐싱을 위한 실험적 지원 기능 추가

추가 정보를 해석해 드리겠습니다.

로컬 빌드 캐싱 기능

• 앱 구성에서 experiments.remoteBuildCache.provider를 eas로 설정하면, 새로운 캐싱 기능을 사용할 수 있습니다.
• npx expo run:ios 또는 npx expo run:android 명령어를 실행할 때 EAS에서 일치하는 지문(fingerprint)을 가진 빌드를 찾습니다.
• 일치하는 빌드가 존재하면, 앱을 다시 컴파일하는 대신 해당 빌드를 다운로드하여 실행합니다.
• 일치하는 빌드가 없으면, 기존 run 명령어처럼 로컬에서 평소대로 컴파일을 진행하고, 완료 후 아카이브를 업로드합니다.
• 이후 실행 시, 개발자와 팀원들은 새 빌드를 자동으로 다운로드하여 매번 몇 분의 시간을 절약할 수 있습니다.

이 기능은 개발 시간을 단축하고 팀 작업 효율성을 높이는 데 큰 도움이 될 것입니다. 특히 큰 규모의 앱이나 여러 개발자가 함께 작업하는 프로젝트에서 빌드 시간 단축으로 인한 생산성 향상이 기대됩니다. 이는 실험적 기능이므로, 정식 출시 전에 피드백을 통해 개선될 가능성이 있습니다.

 

 

 

eas build 대비 remoteBuildCache의 차이점

추가 정보를 해석해 드리겠습니다.

remoteBuildCache와 eas build:dev의 주요 차이점

• 기존에 eas build:dev를 사용해 왔다면, 새로운 remoteBuildCache 방식과의 차이가 궁금할 수 있습니다.
• 가장 큰 차이점은 remoteBuildCache는 캐시 미스(일치하는 빌드가 없는 경우)가 발생했을 때 EAS에서 빌드하는 대신 로컬에서 앱을 컴파일한다는 점입니다.
• 또한 베타 기간 동안 대체 원격 캐시 제공자 구현에 대한 지원이 추가될 예정이므로, GitHub 또는 원하는 곳에 자체 캐시를 호스팅할 수 있게 될 것입니다.

캐시 제한 및 계획

• 초기 실험 기간 동안, EAS 제공자와의 캐시된 빌드 수는 다음과 같이 제한됩니다:
  • 무료 및 온디맨드 플랜: 10개
  • 프로덕션 플랜: 50개
  • 엔터프라이즈 플랜: 100개 (청구 주기당)
• 이 제한은 기능이 안정적인 릴리스로 진행됨에 따라 조정될 예정입니다.

기술적 배경

• 이 캐시는 eas upload 및 eas build:download 명령어 위에 구축되었습니다.
• 이 명령어들은 Radon IDE 팀을 위해 동일한 사용 사례를 위해 개발되었습니다.
• 따라서 가까운 미래에 IDE를 사용하는 Expo 프로젝트에서도 유사한 동작을 볼 수 있을 것입니다.

피드백 요청

• 이 기능이 개발자와 팀에게 유용한지, 개발 워크플로우 속도 향상에 도움이 될 수 있는 유사한 도구에 대한 생각이 있다면 알려달라고 합니다.

이 기능은 특히 반복적인 개발과 테스트 과정에서 빌드 시간을 크게 단축할 수 있어, 개발 효율성을 높이는 데 중요한 역할을 할 것으로 보입니다. 또한 팀원 간에 빌드를 공유할 수 있어 협업 환경에서 더욱 유용할 것입니다.

 

 

 

Expo SDK 53 하이라이트

주요 기술 업데이트

• React Native 0.79와 React 19 지원: React 19의 Suspense(로딩 상태용)와 use(컨텍스트 및 프로미스용) 등 새로운 기능 포함
• React Native Web 0.20.0 지원

새로운 라이브러리

1. expo-audio 정식 출시
   • SDK 52에서 베타로 출시되었던 기능이 안정화
   • expo-av보다 더 안정적이고 사용하기 쉬우며 성능이 향상됨
   • expo-av에서 마이그레이션 권장
2. expo-maps 알파 릴리스
   • 각 플랫폼 표준 지도 API 래퍼(Android: Google Maps, iOS: Apple Maps)
   • Jetpack Compose와 SwiftUI API 기반으로 구축
   • 최소 iOS 버전은 현재 iOS 18이지만 iOS 17 지원 예정
   • iOS 17 이전 버전은 SwiftUI API 제한으로 지원 불가능
   • iOS에서 Google Maps 지원 계획 없음

성능 개선

• Android 빌드 시간 개선: 사전 컴파일된 Expo 모듈 제공으로 로컬 빌드 시간 최대 25% 감소
• 신규 프로젝트 템플릿에서 기본 활성화되며, package.json에서 설정으로 비활성화 가능

기능 개선

1. expo-updates: Updates.setUpdateURLAndRequestHeadersOverride() 메서드 추가로 런타임에 헤더 재정의 가능
2. React Server Functions: EAS Hosting에서 프로덕션 배포 가능(베타)
3. expo-background-task: 최신 Android/iOS API 사용, 이전의 expo-background-fetch 모듈은 지원 중단
4. TestFlight 개발 빌드 배포: 개발 빌드를 TestFlight로 배포 가능
5. TV 및 macOS 지원 개선: tvOS/Android TV 및 macOS 플랫폼 지원 확장
6. expo-file-system/next: expo/fetch와 통합으로 file.blob()을 통한 파일 업로드 지원
7. expo-sqlite:
   • 웹 지원(WebAssembly 기반 SQLite) 추가
   • libsql 지원 및 Turso와 협력으로 오프라인 동기화 베타 지원

알림 관련 변경사항

• Android용 Expo Go에서 푸시 알림 지원 중단
• iOS용 Expo Go에서는 계속 지원
• Android용 Expo Push Service에 사용자 정의 이미지와 아이콘 지원 추가
• iOS 구현이 대부분 Swift와 Expo 모듈 API로 변환

기타 변경사항

• import.meta 변환 플러그인 추가(실험적 기능)
• AppDelegate: Objective-C에서 Swift로 이동
• TypeScript 버전: ~5.8.3으로 업데이트 권장
• React 19.1: 실험적 지원 추가(app config에서 설정 가능)

이러한 변경사항은 Expo SDK 53이 모던 앱 개발 환경을 지향하며, 성능과 기능 측면에서 상당한 개선을 제공하고 있음을 보여줍니다.

 

 

 

 

Expo CLI 업데이트 사항

추가 정보를 해석해 드리겠습니다.

Expo CLI 개선 사항

1. eslint-config-expo에서 플랫 설정 지원
   • npx expo lint 명령어가 이제 플랫 설정을 지원합니다.
   • 마이그레이션 방법에 대한 가이드가 제공됩니다.
2. package.json의 exports와 imports가 기본적으로 활성화
   • 이 변경사항은 Metro 번들러에서 비롯되었습니다.
   • 주의: 호환성이 깨지는 변경사항이므로 "Notable breaking changes" 섹션에서 추가 정보를 참고해야 합니다.
3. Expo Atlas가 실험적 단계에서 안정화 단계로 승격
   • EXPO_ATLAS=1 npx expo 명령어로 활성화할 수 있습니다.
   • JavaScript 번들을 분석하고 앱 크기를 개선하는 데 도움을 줍니다.
4. 웹에서 웹 워커에 대한 실험적 지원 추가
   • expo-sqlite에서 멀티스레드 웹 지원을 위해 사용됩니다.
   • 네이티브 앱은 여전히 네이티브 모듈과 Reanimated 워크렛을 사용하여 메인 스레드 외부에서 JavaScript를 실행할 수 있습니다.
5. Expo DOM 컴포넌트에 실험적 EAS Update 지원 추가
   • 이제 eas update로 DOM 컴포넌트를 업데이트할 수 있습니다.
   • 프로덕션 환경에서 DOM 컴포넌트를 업데이트하기 전에 스테이징 빌드에서 테스트하고, 문제가 있으면 보고해야 합니다.
6. 오류 메시지 개선
   • React 오류가 이제 Expo CLI 로그에서 심볼화된 스택 추적을 출력합니다.
   • ⌘+클릭으로 파일로 이동하여 관련 코드 라인으로 바로 이동할 수 있어 디버깅이 용이해졌습니다.

예시 오류 메시지:

 

Error: Couldn't find the bottom tab bar height. Are you inside a screen in Bottom Tab Navigator?

이 오류는 다음 위치에 있습니다:

 

20 |
21 | export default function ParallaxScrollView({
> 22 | children,
   | ^
23 | headerImage,
24 | headerBackgroundColor,
25 | }: Props) {

이러한 개선 사항들은 개발자 경험을 향상시키고, 디버깅을 더 쉽게 만들며, 새로운 기능과 도구를 제공하여 Expo 개발 환경을 더욱 강력하게 만들고 있습니다.

 

 

 

Expo Router 및 주요 변경사항

Expo Router와 주요 변경사항에 관한 정보를 해석해 드리겠습니다.

Expo Router 개선사항

1. 빌드 타임 리다이렉트 및 재작성 기능 추가
   • 앱과 웹사이트의 URL 및 라우팅 동작을 커스터마이징할 수 있습니다.
   • 기존 프로젝트를 Expo Router로 마이그레이션할 때 특히 유용합니다.
2. 인증 및 초기 리다이렉트를 사용하는 흐름 구축 개선
   • 앱이 이제 가상 루트 네비게이터로 래핑되어 모든 네비게이션 이벤트가 처리될 수 있도록 합니다.
3. Fast Refresh 및 오류 스택 트레이스 개선
   • 개발 경험이 향상되었습니다.
4. 문서 개선
   • 새롭게 개선된 Expo Router 문서가 제공됩니다.
   • "Router 101" 섹션에서 라우터 기초 지식을 확인할 수 있습니다.

지원 중단 (Deprecations)

1. expo-av
   • Video 컴포넌트는 SDK 52에서 expo-video로 대체되었습니다.
   • Audio API는 SDK 53에서 expo-audio로 대체되었습니다.
   • expo-av 패키지는 더 이상 유지 관리되지 않으며 SDK 54 이상에서는 새 버전이 출시되지 않습니다.
2. expo-background-fetch
   • 최신 플랫폼 API를 사용하는 expo-background-task로 대체되었습니다.

주요 호환성 깨짐 변경사항 (Breaking Changes)

1. React 19 변경사항
   • React 19 업그레이드 가이드에서 자세한 내용을 확인할 수 있습니다.
   • 웹 관련 지침은 건너뛰어도 됩니다.
2. React Native 내부 import가 export 구문으로 업데이트
   • React Native 0.79 블로그 포스트의 예제를 참조하세요.
3. 기본 AppTheme 업데이트
   • 새로운 네이티브 Android 프로젝트와 CNG로 생성된 프로젝트는 이제 DayNight 테마를 사용합니다.
   • 이 변경은 edge-to-edge 레이아웃 출시와 react-native-edge-to-edge 호환성을 위해 이루어졌습니다.
4. setImmediate 폴리필 제거
   • 런타임에서 더 이상 사용되지 않는 폴리필이 제거되었습니다.
5. edge-to-edge가 활성화된 경우 expo-status-bar 및 expo-navigation-bar의 제한
   • StatusBar 컴포넌트만 사용 가능하며, 명령형 메서드는 사용할 수 없습니다.
   • 현재는 react-native-edge-to-edge의 SystemBars API를 통해 네비게이션 바를 제어할 수 있으며, 향후 expo-navigation-bar를 통해서도 제공될 예정입니다.
6. package.json exports 필드가 Metro 번들러에서 기본적으로 활성화
   • 관련 문제가 있는 경우 unstable_enablePackageExports: false로 비활성화할 수 있습니다.
   • 의존하는 라이브러리가 이 변경사항과 호환되지 않는 경우, "이중 패키지 위험(dual package hazard)"으로 인해 앱에서 미묘한 문제가 발생할 수 있습니다.
   • Expo Atlas를 사용하여 번들을 분석하는 것이 좋습니다.
   • 라이브러리 작성자이고 react-native-builder-bob을 사용하는 경우, 이 변경에 적응하기 위한 가이드를 따르는 것이 좋습니다.

이러한 변경사항들은 Expo 생태계의 현대화와 성능 향상을 목표로 하지만, 일부 기존 코드에 영향을 미칠 수 있으므로 마이그레이션 시 주의가 필요합니다.

 

 

 

알려진 이슈 및 베타 테스트 가이드

마지막으로 제공된 정보에 대한 해석을 드리겠습니다.

알려진 이슈

1. npm 사용 시 종속성 관련 설치 문제
   • "ERESOLVE could not resolve" / "Could not resolve dependency" 오류가 발생할 수 있습니다.
   • 라이브러리의 "expo": ">= 52.0.0" 같은 피어 종속성이 "expo@53.0.0-preview"와 일치하지 않기 때문입니다.
   • 해결 방법:
     • -legacy-peer-deps 옵션 사용
     • .npmrc 파일에 이 옵션 설정
     • 다른 패키지 매니저로 전환
2. React 18 피어 종속성으로 인한 다중 react 설치 문제
   • 많은 라이브러리가 React 19와 호환됨에도 React 18에 대한 피어 종속성을 가지고 있습니다.
   • 런타임 오류를 방지하기 위해 package.json에 overrides를 추가하여 모든 라이브러리가 동일한 React 버전을 사용하도록 해야 합니다.
3. 릴리스 빌드에서 expo-updates 오류 처리 문제
   • React Native 0.79.0에는 expo-updates가 릴리스 빌드에서 시작 오류를 처리하는 데 의존하는 API에 회귀가 포함되어 있습니다.
   • facebook/react-native#50400에서 수정되었으며 다음 패치 릴리스에서 사용 가능할 예정입니다.
   • 이 문제가 해결될 때까지 베타 버전으로 프로덕션 릴리스를 보류하는 것이 좋습니다.

베타 릴리스 테스트 방법

새 프로젝트 초기화

 

bash

# npm
npx create-expo-app@latest --template default@sdk-53

# bun
bun create expo-app --template default@sdk-53

# pnpm
pnpm create expo-app --template default@sdk-53

# yarn
yarn create expo-app --template default@sdk-53

참고: create-expo-app은 사용 중인 패키지 매니저로 종속성을 설치합니다.

기존 프로젝트 업그레이드

• SDK 53에 맞게 모든 종속성 업그레이드:

 

bash

npx expo install expo@next --fix

• 최신 Expo Go 설치:
  • Android 에뮬레이터/실제 기기 또는 iOS 시뮬레이터: Expo CLI를 통해 프로젝트 실행 (npx expo start 후 a 또는 i 키보드 단축키 누르기)
  • iOS 실제 기기: TestFlight External Beta 참여
• 문서 읽기: API 참조 섹션의 버전 선택기에서 선택

테스트 항목

1. 앱 업그레이드: npm install expo@next 또는 yarn add expo@next, 그 다음 npx expo install --fix 실행
2. Native project upgrade helper 참조 및 발생하는 모든 문제 보고
3. EAS Build로 앱 빌드 또는 로컬 빌드 테스트:
   • npx expo prebuild --clean 실행 후 npm run ios 및 npm run android
   • 또는 npx expo run 시도
4. 문서 업데이트 누락 확인

문제 보고 방법

1. 적절한 템플릿을 작성하여 이슈 생성 (최소 재현 가능 예제 포함)
2. 문제의 근본 원인 파악은 항상 매우 도움이 됩니다.
3. SDK 53 베타를 사용 중임을 알려 우선순위를 정할 수 있도록 합니다.
4. 가장 도움이 되는 베타 테스터는 최종 릴리스 노트에 기재되며 Discord 특별 칭호를 받을 수도 있습니다.

Expo 팀은 릴리스 테스트에 협조해 주셔서 감사하다는 메시지와 함께 곧 정식 출시를 기대한다는 내용으로 마무리하고 있습니다. 🚀