19 posts tagged with "release"

오늘, 우리는 React Native 0.76을 출시하게 되어 매우 기쁘게 생각한다.

이번 릴리스는 React Native의 주요 이정표다. 기본적으로 새로운 아키텍처를 활성화하고 React Native DevTools를 소개한다. 이는 우리 팀의 6년 간의 노력과 놀라운 개발자 커뮤니티의 지원이 결실을 맺은 결과다.

주요 내용​

• 기본값으로 변경된 React Native 신규 아키텍처
• React Native DevTools
• 빠른 Metro 해상도
• 박스 그림자와 필터 스타일 속성

주요 변경 사항​

• react-native-community/cli 의존성 제거
• 네이티브 라이브러리 병합으로 안드로이드 앱 크기 약 3.8MB 감소
• 최소 iOS 및 Android SDK 요구 사항 업데이트

오늘 React Native 0.74를 출시한다. 이번 릴리스에서는 Yoga 3.0, New Architecture에서 기본으로 적용되는 Bridgeless, New Architecture에서의 onLayout 업데이트 배치 처리, 그리고 새로운 프로젝트의 기본 패키지 매니저로 Yarn 3를 추가했다.

또한, 더 이상 사용되지 않는 API를 제거했다. PropTypes를 제거하고 PushNotificationIOS에 대한 주요 변경 사항을 적용했다. 안드로이드에서는 SDK 23(Android 6.0)이 이제 최소 지원 버전이다.

주요 내용​

• Yoga 3.0
• 새로운 아키텍처: 기본적으로 Bridgeless
• 새로운 아키텍처: 일괄 처리된 onLayout 업데이트
• 새 프로젝트를 위한 Yarn 3

주요 변경 사항​

• Android 최소 SDK 버전 업그레이드 (Android 6.0)
• PushNotificationIOS API 변경 (Deprecated)
• 더 이상 사용되지 않는 PropTypes 제거
• Flipper React Native 플러그인 제거
• 기타 주요 변경 사항

오늘 React Native 0.73을 출시한다. 이번 릴리스에서는 Hermes를 통한 디버깅 개선, 안정적인 심볼릭 링크 지원, Android 14 지원, 그리고 새로운 실험적 기능을 추가했다. 또한 레거시 디버깅 기능을 더 이상 사용하지 않을 예정이며, 새로운 아키텍처의 다음 기둥인 Bridgeless Mode를 선보인다!

주요 내용​

• 디버깅 기능 개선
• Metro에서 안정적인 심볼릭 링크 지원
• 안드로이드 Kotlin 템플릿
• 안드로이드 14 지원
• 새로운 아키텍처 업데이트
• 더 이상 사용되지 않는 디버깅 기능

주요 변경 사항​

• Babel 패키지 이름 변경
• 기타 주요 변경 사항
• React Native CLI 변경 사항
• @types/react-native 지원 중단

오늘 0.72 버전을 출시한다!

이번 릴리스에서는 Metro를 위한 많은 요청을 받은 기능들, 더 나은 에러 처리, 그리고 개발자 경험 개선 사항들이 추가되었다. 이 작업의 상당 부분은 2022 커뮤니티 설문조사에서 받은 피드백을 기반으로 우선순위가 정해졌다. 참여해 준 모든 분들께 감사드린다!

주요 내용​

• 새로운 Metro 기능
• 개발자 경험 개선
• 새로운 아키텍처 업데이트 진행 상황

주요 변경 사항​

• 더 이상 사용되지 않는 컴포넌트 제거
• 패키지 이름 변경

오늘 React Native 버전 0.71을 출시한다. 이번 버전은 다양한 기능을 포함하고 있다:

• 기본 타입스크립트 지원
• 플렉스 박스 갭을 통한 레이아웃 단순화
• 웹에서 영감을 받은 접근성, 스타일, 이벤트 프로퍼티
• PropTypes 복원
• 개발자 경험 개선
• 새로운 아키텍처 업데이트

이 글에서는 0.71 버전의 주요 기능을 살펴본다.

타입스크립트 기본 지원​

이번 릴리스에서는 React Native의 타입스크립트 경험을 개선했다.

0.71 버전부터 React Native CLI로 새로운 앱을 생성하면 기본적으로 타입스크립트 프로젝트가 만들어진다. 새로운 프로젝트는 tsconfig.json이 미리 설정되어 있어 IDE에서 바로 타입이 지정된 코드를 작성할 수 있다.

또한 react-native 패키지에서 더 정확한 타입스크립트 선언을 내장형으로 제공한다. 이제 @types/react-native가 필요 없으며, 타입 정보는 React Native 릴리스와 동기화되어 업데이트된다.

마지막으로, 모든 예제에 타입스크립트를 적용하도록 문서를 업데이트했다.

이 변경 사항에 대한 자세한 내용은 마이그레이션 단계와 Flow 사용자에게 미치는 영향 등을 포함한 이전 포스트 First-class Support for TypeScript를 참고한다.

플렉스 박스 gap으로 레이아웃 간소화하기​

React Native를 사용하면 플렉스 박스를 통해 다양한 화면 크기에 맞춰 컴포넌트를 유연하게 배치할 수 있다. 브라우저에서는 플렉스 박스 속성인 gap, rowGap, columnGap을 지원하며, 이를 통해 플렉스 박스 내 모든 아이템 사이의 간격을 지정할 수 있다.

이 기능은 React Native에서 오랫동안 요청되어 왔으며, 0.71 버전부터 픽셀 값으로 정의된 gap을 초기 지원한다. 향후 버전에서는 퍼센트와 같은 더 다양한 값을 지원할 예정이다.

이 기능의 유용성을 이해하기 위해, 크기가 다양한 카드로 구성된 반응형 레이아웃을 구축하는 상황을 상상해 보자. 각 카드는 부모 컨테이너의 가장자리에 맞닿아 있고, 카드 간 간격은 10px로 설정되어 있다. 이런 레이아웃을 자식 요소의 마진으로 구현하려면 복잡한 과정이 필요하다.

다음은 각 자식 요소에 margin: 10 스타일을 적용한 레이아웃을 보여준다:

마진은 모든 자식 요소의 가장자리에 균일하게 적용되며, 플렉스 박스에서 마진 겹침 현상이 발생하지 않는다. 이로 인해 카드 외부에 간격이 생기고, 내부에는 원하는 간격의 두 배가 생긴다. 이를 해결하기 위해 비균일 마진을 적용하거나, 부모에 음수 마진을 사용하거나, 의도한 간격을 반으로 줄이는 등의 방법을 사용할 수 있지만, 더 간단한 방법이 있다.

플렉스 gap을 사용하면 컨테이너에 gap: 10을 설정하여 카드 내부 간격을 10px로 쉽게 조정할 수 있다:

플렉스 박스 gap에 대한 더 자세한 정보는 CSS Tricks의 블로그 포스트를 참고하라.

웹 표준에서 영감 받은 접근성, 스타일, 이벤트용 프로퍼티​

이번 릴리스에서는 웹 표준에서 영감을 받아 React Native의 API를 여러 플랫폼에 맞춰 정렬한 새로운 프로퍼티를 추가했다. 이 새로운 프로퍼티는 순수하게 추가적인 기능이므로, 기존의 접근성, 동작, 스타일 프로퍼티와 관련된 마이그레이션이나 동작 변경은 예상되지 않는다.

새로 도입된 프로퍼티 별칭의 경우, 기존에 다른 이름으로 존재하는 프로퍼티와 함께 지정되면 새로운 별칭 프로퍼티 값이 우선 적용된다. 예를 들어, 이번 릴리스에서는 웹의 src 프로퍼티와 일치시키기 위해 Image 컴포넌트에 source 대신 src 프로퍼티 별칭을 추가했다. src와 source가 모두 제공되면 새로운 src 프로퍼티가 사용된다.

접근성​

기존 React Native 접근성 프로퍼티에 대한 별칭으로 ARIA 프로퍼티를 도입했다.

이제 모든 React Native 코어 컴포넌트에서 다음 프로퍼티를 사용할 수 있다: aria-label, aria-labelledby, aria-modal, id, aria-busy, aria-checked, aria-disabled, aria-expanded, aria-selected, aria-valuemax, aria-valuemin, aria-valuenow, 그리고 aria-valuetext.

또한 웹과 동일한 동작을 하는 다음 프로퍼티도 추가했다: aria-hidden, aria-live, role, 그리고 tabIndex.

자세한 내용은 이 이슈를 참고한다.

컴포넌트별 동작​

핵심 컴포넌트의 prop 이름을 동등한 DOM prop 이름과 일치시키기 위해 몇 가지 새로운 props가 도입되었다.

• Image: alt, tintColor, crossOrigin, height, referrerPolicy, src, srcSet, width
• TextInput: autoComplete, enterKeyHint, inputMode, readOnly, rows

자세한 내용은 이 이슈를 참고한다.

스타일​

특정 CSS 스타일에 맞추기 위해 다음과 같은 스타일 기능이 확장되었다:

• aspectRatio는 이제 문자열 값을 지원한다.
• fontVariant는 이제 공백으로 구분된 문자열 값을 지원한다.
• fontWeight는 이제 숫자 값을 지원한다.
• transform는 이제 문자열 값을 지원한다.

기존 React Native 스타일을 대체하기 위해 다음과 같은 별칭이 추가되었다:

• objectFit
• pointerEvents
• userSelect
• verticalAlign

자세한 내용은 이 이슈를 참고한다.

이벤트​

마지막으로 PointerEvents의 옵트인 구현을 추가했다.

활성화하면 View의 다음 핸들러가 호버를 지원한다:

• onPointerOver, onPointerOut
• onPointerEnter, onPointerLeave

이 이벤트는 Pressability에서도 구현되어 새로운 호버 지원을 옵트인할 수 있다.

이 기능을 활성화하려면 다음 플래그를 true로 설정한다:

import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';

// w3c PointerEvent 구현의 JS 측 활성화
ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;

// Pressibility에서 PointerEvent 구현을 기반으로 호버 이벤트 활성화
// shouldEmitW3CPointerEvents도 true여야 함
ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover =
  () => true;

자세한 내용은 전용 PointerEvents 포스트를 참고한다.

PropTypes 복원하기​

React Native의 ViewPropTypes와 Text.propTypes 같은 PropTypes는 0.66 버전에서 더 이상 사용되지 않게 되었고, 접근할 경우 경고 메시지가 출력되었다. 이후 0.68 버전에서 완전히 제거되면서, 최신 버전으로 업그레이드하는 많은 개발자들이 오류를 경험하기 시작했다.

조사를 통해 우리는 커뮤니티가 경고 메시지에 대해 조치를 취하지 못한 몇 가지 문제를 발견했다. 첫째, 경고 메시지가 항상 명확한 조치를 제시하지 않아 사람들이 이를 무시하는 경우가 많았다(이슈 1, 이슈 2). 둘째, 경고 메시지가 LogBox.ignoreLogs에 의해 잘못 필터링되고 있었다. 이 두 문제는 모두 해결되었지만, 개발자들이 더 많은 시간을 가지고 더 이상 사용되지 않는 코드를 업그레이드할 수 있도록 하기 위해 이번 릴리스에서 React Native의 PropTypes를 다시 추가한다.

이번 업데이트로 인해 개발자들이 코드를 업그레이드하고 PropTypes 사용을 피하기 위해 마이그레이션하는 것이 더 쉬워질 것이다. 또한 deprecated-react-native-prop-types 패키지도 0.71 버전의 모든 props에 맞게 업데이트되었다. 앞으로 우리는 다시 PropTypes를 더 이상 사용되지 않게 만들고 제거할 계획이다. 이번 제거 작업을 다시 진행할 때는 커뮤니티에서 훨씬 적은 문제가 발생할 것으로 예상한다.

개발자 경험 개선​

React DevTools​

이번 릴리스에서는 웹에서 사용하던 두 가지 인기 있는 React DevTools 기능을 React Native로 가져왔다.

"클릭하여 검사하기"는 React DevTools의 왼쪽 상단에 있는 옵션으로, 앱에서 아이템을 클릭하면 DevTools에서 해당 요소를 검사할 수 있다. Chrome의 엘리먼트 검사기와 유사한 기능이다.

컴포넌트 하이라이트는 DevTools에서 선택한 엘리먼트를 앱에서 강조 표시해준다. 이를 통해 화면의 어떤 요소가 어떤 React 컴포넌트와 매칭되는지 쉽게 확인할 수 있다.

다음은 두 기능이 동작하는 모습을 보여주는 예제다:

Hermes​

React Native 0.70에서 Hermes를 React Native의 기본 엔진으로 설정했다.

React Native 0.71에서는 Hermes에 몇 가지 주목할 만한 개선 사항을 추가했다:

• 소스 맵 개선: Metro를 통해 네트워크로 소스 맵을 로드함으로써, 최신 버전의 Chrome Dev Tools에서 Flipper 외부에서도 소스 맵을 사용할 수 있는 기능을 복구했다.
• JSON.parse 성능 개선: 이 버전에서는 JSON.parse의 성능을 최대 30%까지 향상시키는 최적화를 포함했다.
• .at() 지원 추가: Hermes는 이제 String, TypedArray, Array에 대해 .at()을 지원한다.

전체 변경 사항 목록은 Road to 71 이슈에서 확인할 수 있다.

새로운 아키텍처​

이번 릴리스에서는 사용자 피드백과 보고를 바탕으로 실험적인 새로운 아키텍처 경험을 개선했다.

• 빌드 시간 단축: 새로운 배포 모델은 Maven Central을 사용해 안드로이드에서의 빌드 시간을 크게 줄이고, 윈도우에서 발생하는 여러 빌드 문제를 해결하며, 새로운 아키텍처와 더 원활한 경험을 제공한다. 자세히 알아보기.
• C++ 코드 작성 최소화: 이제 앱에 C++ 코드를 추가하지 않고도 새로운 아키텍처를 활성화할 수 있다. CLI 앱 템플릿에서 모든 C++ 코드와 CMake 파일을 제거했다. 자세히 알아보기.
• iOS 앱 설정의 더 나은 캡슐화: iOS에서는 안드로이드와 유사한 접근 방식을 따르고, 새로운 아키텍처 설정 로직 대부분을 RCTAppDelegate 클래스에 캡슐화했다. 이를 통해 향후 업그레이드 시 수동으로 변경해야 할 부분을 줄일 수 있다.
• iOS에서의 더 나은 의존성 관리: 라이브러리 관리자를 위해 패키지 podspec 내부에서 호출할 수 있는 새로운 install_module_dependencies 함수를 추가했다. 이 함수는 새로운 아키텍처에 필요한 모든 의존성을 설치한다.
• 버그 수정 및 더 나은 IDE 지원: 사용자들이 새로운 아키텍처 워킹 그룹에서 보고한 여러 버그와 문제(예: 안드로이드에서의 더 나은 IDE 지원)를 해결했다.

새로운 아키텍처는 여전히 실험적인 API 경험이다. 우리는 도입을 더 쉽게 만들기 위해 변경 사항을 반복적으로 개선하고 있다. 새로운 아키텍처 문서에서 간소화된 단계를 시도해 보고, 새로운 아키텍처 워킹 그룹에 피드백을 남겨주길 바란다.

주요 수정 사항​

• 스택 프레임 축소 기능 개선: React Native의 내부 프레임 목록을 업데이트했다. 이제 LogBox가 React Native의 내부 프레임 대신 여러분의 코드를 더 자주 표시한다. 이를 통해 문제를 더 빠르게 디버깅할 수 있다.
• 빌드 시간 개선: Hermes의 현재 및 새로운 아키텍처에서 iOS와 Android 모두 빌드 시간을 개선하기 위해 assets를 Maven Central로 이전했다.
• Android 템플릿 개선: Android 템플릿을 대폭 정리했으며, 이제 React Native Gradle Plugin에 완전히 의존한다. 템플릿 내부나 웹사이트의 새로운 전용 페이지에서 설정 방법을 확인할 수 있다.

주요 변경 사항​

• 콘솔 로깅 변경 사항: LogBox.ignoreLog가 더 이상 콘솔 로그를 필터링하지 않는다. 이제 LogBox에서 무시하도록 설정한 로그도 콘솔에 표시된다. 자세한 내용은 이 코멘트를 참고한다.

• AsyncStorage와 MaskedViewIOS 제거: 이 두 컴포넌트는 0.59 버전부터 더 이상 사용되지 않았으며, 이제 완전히 제거된다. 대체제는 React Native Directory에서 커뮤니티 패키지를 확인한다.

• JSCRuntime가 react-jsc로 이동: react-jsi가 이제 react-jsc와 react-jsi로 분리된다. JSCRuntime을 사용한다면 react-jsc를 의존성으로 추가해야 한다 (facebook/react-native@6b129d8).

감사의 말​

이번 릴리즈는 70명 이상의 기여자가 1000개가 넘는 커밋을 추가한 덕분에 가능했다.

특히 다음과 같은 주요 React Native 프로젝트에 기여한 분들에게 감사의 말을 전한다:

• 플렉스 박스 갭 지원: @intergalacticspacehighway와 @jacobp100.
• 웹에서 영감을 받은 프로퍼티: @gabrieldonadel @dakshbhardwaj @dhruvtailor7 @ankit-tailor @madhav23bansal.
• 코드 생성기 개선: @AntoineDoubovetzky, @MaeIg, @Marcoo09, @Naturalclar, @Pranav-yadav, @ZihanChen-MSFT, @dakshbhardwaj, @dhruvtailor7, @gabrieldonadel, @harshsiri110, @ken0nek, @kylemacabasco, @matiassalles99, @mdaj06, @mohitcharkha, @tarunrajput, @vinayharwani13, @youedd, @byCedric.

마지막으로, 이번 릴리즈를 완성한 @cortinico, @kelset, @dmytrorykun, @cipolleschi, 그리고 @titozzz에게도 감사드린다!

지금 바로 0.71.0을 사용해 보세요!​

React Native CLI 사용자는 기존 프로젝트를 업데이트하거나 npx react-native init MyProject로 새 프로젝트를 생성하는 방법을 업그레이드 문서에서 확인할 수 있습니다.

React Native 버전 0.71은 Expo SDK 버전 48에서 지원됩니다.

React Native의 새로운 버전인 0.70.0을 발표하게 되어 기쁘게 생각한다. 이번 버전에서는 Codegen을 위한 새로운 통합 설정, 기본 엔진으로 Hermes 도입, Android 빌드를 위한 완전한 CMake 지원, 그리고 새로운 아키텍처를 위한 문서 업데이트 등 여러 가지 개선 사항이 포함되었다. 자세한 내용을 계속해서 확인해 보자!

섹션​

• 새로운 아키텍처의 새로운 문서
• 기본 엔진으로서의 Hermes
• Codegen을 위한 새로운 통합 설정
• 새로운 아키텍처 라이브러리를 위한 Android 자동 연결
• Android 빌드를 위한 완전한 CMake 지원
• 0.70 버전의 주요 특징

지난 10월, 우리는 모든 React Native 앱에서 Hermes를 기본 엔진으로 설정하기 위한 작업을 시작했다고 발표했다.

Hermes는 Meta 내부에서 React Native에 많은 가치를 제공해 왔으며, 오픈소스 커뮤니티도 이로부터 혜택을 받을 것이라고 믿는다. Hermes는 리소스가 제한된 장치를 위해 설계되었으며, 앱 시작 시간, 앱 크기, 메모리 소비를 최적화한다. Hermes와 다른 JS 엔진의 주요 차이점은 JavaScript 소스 코드를 사전에 바이트코드로 컴파일할 수 있다는 점이다. 이 사전 컴파일된 바이트코드는 바이너리 내부에 번들로 포함되며, 앱 시작 시 이 비용이 많이 드는 단계를 수행하지 않아도 된다.

발표 이후, Hermes를 더욱 개선하기 위해 많은 작업이 진행되었고, 오늘 우리는 React Native 0.70이 Hermes를 기본 엔진으로 제공하게 될 것임을 발표하게 되어 기쁘게 생각한다. 이는 v0.70부터 시작하는 모든 새 프로젝트에서 Hermes가 기본적으로 활성화됨을 의미한다. 7월에 출시될 이 롤아웃을 앞두고, 우리는 커뮤니티와 긴밀히 협력하여 전환이 원활하게 이루어지고 모든 사용자에게 가치를 제공할 수 있도록 하려 한다. 이 블로그 포스트에서는 이 변화로부터 기대할 수 있는 사항, 성능 벤치마크, 새로운 기능 등을 다룰 것이다. React Native 0.70을 기다리지 않고도 Hermes를 사용할 수 있다는 점을 기억하라. 이 가이드를 따라 기존 React Native 앱에서 Hermes를 활성화할 수 있다.

Hermes가 새 React Native 프로젝트에서 기본적으로 활성화되지만, 다른 엔진에 대한 지원은 계속될 것이다.

React Native의 새로운 버전인 0.69.0을 발표하게 되어 기쁘게 생각한다. 이번 버전에는 React Native의 새로운 아키텍처를 위한 여러 개선 사항과 새로운 기능들이 포함되어 있다. 주요 내용으로는 React 18 지원과 번들링된 Hermes가 있다. 더 자세한 내용을 확인해 보자!

섹션​

• React 18
• 번들링된 Hermes
• 0.69 버전의 주요 기능

안녕하세요, 여러분! 오늘 우리는 React Native 0.68.0 버전을 발표합니다. 이번 릴리스에는 새로운 React Native 아키텍처의 옵트인(opt-in), 버그 수정 등이 포함되어 있습니다.

섹션​

• 0.68 버전의 주요 특징
• 새로운 아키텍처 적용하기
• 웹사이트 업데이트
• React Native의 새로운 릴리즈 안정화를 도울 의향이 있나요?

여러분, 새해 복 많이 받으세요! 오늘 우리는 React Native의 최신 버전인 0.67.0을 발표하고, 지난 몇 달 동안 작업해 온 릴리스 프로세스에 대한 업데이트를 공유하려고 합니다.

주요 섹션​

• 0.67 버전의 주요 기능
• 릴리스 프로세스 개선 사항
• React Native의 새로운 릴리스 안정화에 기여하고 싶으신가요?