51 posts tagged with "announcement"

2018년 React Native 커뮤니티는 React Native 개발 및 커뮤니케이션 방식을 여러 가지로 개선했다. 몇 년 후 이 변화가 React Native의 전환점이었다고 회상할 것이라 믿는다.

많은 사람들이 React Native 아키텍처의 재작성, 즉 Fabric에 대해 기대하고 있다. 이는 React Native 아키텍처의 근본적인 한계를 해결하고, JSI와 TurboModules과 함께 React Native의 미래를 성공적으로 이끌어갈 것이다.

2018년의 가장 큰 변화는 React Native 커뮤니티의 역량 강화였다. 처음부터 Facebook은 전 세계 개발자들이 React Native 오픈소스 프로젝트에 참여하도록 장려했다. 이후 릴리스 프로세스 등을 담당하는 핵심 기여자들이 등장했다.

이 멤버들은 커뮤니티 전체가 프로젝트의 미래를 결정할 수 있도록 다음과 같은 리소스를 통해 상당한 진전을 이루었다:

react-native-releases 📬​

이 저장소는 1월에 만들어져 두 가지 주요 목적을 가지고 있다. 첫째, 모든 사람이 새로운 릴리즈를 더 협력적으로 따라갈 수 있게 하고, 둘째, 특정 릴리즈에 어떤 내용이 포함될지 논의할 수 있는 공간을 제공한다. 누구나 체리 픽을 제안할 수 있도록 열려 있다(예: 0.57.8 및 이전 버전들).

이러한 접근 방식은 월간 릴리즈 주기에서 벗어나게 하는 원동력이 되었으며, 현재 0.57.x 버전에 적용된 "장기 지원" 방식의 기반이 되었다.

이러한 결정에 이르게 된 데에는 올해 생성된 다른 저장소도 큰 역할을 했다.

discussions-and-proposals 🗣​

이 저장소는 7월에 만들어졌으며, React Native에 대한 논의를 더 개방적인 환경에서 진행하기 위한 아이디어를 확장했다. 이전에는 메인 저장소에서 For Discussion 라벨이 붙은 이슈로 이 필요를 처리했지만, 다른 라이브러리(예: React)에서 사용하는 RFC 접근 방식으로 이 전략을 확장하고자 했다.

이 실험은 즉시 React Native 생명주기에서 역할을 찾았다. Facebook 팀은 이제 커뮤니티 RFC 프로세스를 사용해 React Native에서 개선할 수 있는 부분을 논의하고, Lean Core 프로젝트를 중심으로 노력을 조율하며, 그 외에도 흥미로운 토론을 진행하고 있다.

@ReactNativeComm 🐣​

React Native 커뮤니티의 다양한 활동(릴리스부터 활발한 토론까지)을 더 쉽게 따라갈 수 있도록, 우리는 새로운 트위터 계정 @ReactNativeComm을 만들었다. 이전에는 이러한 소식을 전달하는 방식이 우리가 원하는 만큼 효과적이지 않았음을 인지하고 있다.

해당 소셜 네트워크를 사용하지 않더라도, GitHub를 통해 저장소를 구독할 수 있다. 지난 몇 달간 이 기능이 개선되어 릴리스 알림만 받을 수 있게 되었으므로, 이를 활용하는 것도 좋은 방법이다.

앞으로 기대할 점 🎓​

지난 7-8개월 동안 핵심 기여자들은 React Native Community GitHub 조직의 개발 주도권을 더 많이 확보하고, 페이스북과의 협업을 강화하기 위해 노력했다. 하지만 이 조직은 다른 유사 프로젝트들이 갖추고 있는 공식적인 구조가 부족했다.

이 조직은 여기에 호스팅된 모든 패키지와 저장소에 일련의 표준을 적용함으로써 더 큰 개발자 커뮤니티에 본보기가 될 수 있다. 또한, 관리자들이 서로 도우며 커뮤니티에서 합의한 표준에 부합하는 고품질 코드를 기여할 수 있는 단일 장소를 제공할 수 있다.

2019년 초, 우리는 이 새로운 가이드라인을 적용할 예정이다. 여러분의 의견을 전용 토론에서 공유해 주길 바란다.

우리는 이러한 변화를 통해 커뮤니티가 더 협력적이 될 것이라고 확신한다. 그리고 1.0 버전에 도달했을 때, 우리 모두가 이 공동의 노력을 통해 (더욱) 훌륭한 앱을 계속 작성할 수 있을 것이다 🤗

우리처럼 이 커뮤니티의 미래에 대해 기대가 크길 바란다. 위에 나열된 저장소에서 진행 중인 토론에 참여하거나, 여러분이 만들어낼 멋진 코드를 통해 모두가 함께하는 모습을 보게 되어 기쁘다.

즐거운 코딩 되길 바란다!

올해 React Native 팀은 React Native의 대규모 재구조화에 집중했다. Sophie가 State of React Native 글에서 언급했듯, Facebook 외부에서 활발히 활동하는 React Native 사용자와 기여자들을 더 잘 지원하기 위한 계획을 구체화했다. 이제 우리가 진행해 온 작업에 대해 더 자세히 공유할 때다. 그 전에, React Native의 오픈소스에 대한 장기적인 비전을 먼저 설명하고자 한다.

React Native에 대한 우리의 비전은 다음과 같다:

• 건강한 GitHub 저장소. 이슈와 풀 리퀘스트가 적절한 시간 내에 처리된다.
  • 테스트 커버리지가 증가한다.
  • Facebook 코드 저장소에서 동기화된 커밋이 오픈소스 테스트를 깨뜨리지 않는다.
  • 의미 있는 커뮤니티 기여가 더 큰 규모로 이루어진다.
• 안정적인 API, 오픈소스 의존성과의 인터페이스를 더 쉽게 만든다.
  • Facebook이 오픈소스와 동일한 공개 API를 사용한다.
  • React Native 릴리즈가 시맨틱 버저닝을 따른다.
• 활기찬 생태계. 커뮤니티가 관리하는 고품질 ViewManagers, 네이티브 모듈, 그리고 다중 플랫폼 지원.
• 탁월한 문서. 사용자가 고품질 경험을 만들 수 있도록 돕고, 최신 API 참조 문서를 제공한다.

이 비전을 달성하기 위해 다음과 같은 주요 영역에 집중할 계획이다.

✂️ 코어 경량화​

React Native의 표면적을 줄이는 것이 우리의 목표다. 이를 위해 핵심이 아니거나 사용되지 않는 컴포넌트를 제거할 예정이다. 핵심이 아닌 컴포넌트는 커뮤니티로 이관하여 더 빠르게 발전할 수 있도록 할 것이다. 표면적이 줄어들면 React Native에 기여하는 것이 더 쉬워질 것이다.

WebView는 커뮤니티로 이관한 컴포넌트의 대표적인 예이다. 리포지토리에서 제거한 후에도 내부 팀이 이러한 컴포넌트를 계속 사용할 수 있도록 하는 워크플로우를 구축 중이다. 우리는 수십 개의 추가 컴포넌트를 식별했으며, 이들에 대한 소유권을 커뮤니티에 넘길 예정이다.

🎁 내부 도구 오픈소스화와 🛠 도구 업데이트​

페이스북 내부 제품 팀의 React Native 개발 경험은 오픈소스 커뮤니티와 상당히 다를 수 있다. 오픈소스 커뮤니티에서 인기 있는 도구들이 페이스북 내부에서는 사용되지 않을 수 있다. 동일한 목적을 달성하는 내부 도구가 존재할 수도 있다. 어떤 경우에는 페이스북 팀들이 페이스북 외부에서는 존재하지 않는 도구들에 익숙해져 있다. 이러한 차이점들은 우리가 앞으로 공개할 아키텍처 작업을 오픈소스로 공개할 때 어려움을 초래할 수 있다.

우리는 이러한 내부 도구 중 일부를 공개하는 작업을 진행할 것이다. 또한 오픈소스 커뮤니티에서 인기 있는 도구들에 대한 지원을 강화할 것이다. 다음은 우리가 다룰 프로젝트들의 일부 목록이다:

• JSI를 오픈소스로 공개하고 커뮤니티가 자체 JavaScript VM을 가져올 수 있도록 지원한다. 이를 통해 RN 초기 릴리스부터 사용되던 JavaScriptCore를 대체할 수 있다. JSI가 무엇인지에 대해서는 향후 포스트에서 다룰 예정이며, 그 동안 Parashuram의 React Conf 발표에서 JSI에 대해 더 알아볼 수 있다.
• 안드로이드에서 64비트 라이브러리를 지원한다.
• 새로운 아키텍처 하에서 디버깅을 가능하게 한다.
• CocoaPods, Gradle, Maven, 그리고 새로운 Xcode 빌드 시스템에 대한 지원을 개선한다.

✅ 테스트 인프라 구축​

페이스북 엔지니어는 코드를 배포할 때 모든 테스트를 통과하면 안전하다고 판단한다. 이러한 테스트는 변경 사항이 자체 React Native 환경을 손상시킬 가능성이 있는지 확인한다. 그러나 페이스북이 React Native를 사용하는 방식에는 차이가 있다. 이로 인해 우리는 오픈소스에서 React Native를 의도치 않게 손상시킬 수 있었다.

우리는 내부 테스트를 강화해 오픈소스 환경과 최대한 유사한 환경에서 실행되도록 할 것이다. 이를 통해 테스트를 통과하지 못한 코드가 오픈소스에 유출되는 것을 방지할 수 있다. 또한 GitHub에서 코어 리포지토리를 더 효과적으로 테스트할 수 있는 인프라를 구축할 것이다. 이를 통해 향후 풀 리퀘스트에 테스트를 쉽게 포함시킬 수 있게 된다.

이러한 노력은 감소된 표면적과 결합되어 기여자들이 더 빠르고 자신 있게 풀 리퀘스트를 병합할 수 있게 한다.

📜 공개 API​

페이스북은 오픈소스와 동일한 방식으로 공개 API를 통해 React Native를 사용할 예정이다. 이는 의도치 않은 호환성 문제를 줄이기 위함이다. 이를 위해 내부 호출 사이트를 변환하는 작업을 시작했다. 목표는 안정적인 공개 API를 확립하고, 이를 통해 1.0 버전에서 시맨틱 버저닝을 도입하는 것이다.

📣 커뮤니케이션​

React Native는 GitHub에서 기여자 수 기준 상위 오픈소스 프로젝트 중 하나이다. 이는 우리에게 큰 기쁨을 주며, 이러한 성과를 계속 이어가고자 한다. 투명성 증대와 열린 토론과 같은 기여자 참여를 유도하는 이니셔티브를 지속적으로 진행할 계획이다. React Native를 처음 접하는 사람들이 가장 먼저 마주하게 되는 문서는 지금까지 우선순위에서 밀려 있었다. 이를 해결하기 위해 자동 생성 API 참조 문서를 다시 도입하고, 사용자 경험 개선에 초점을 맞춘 추가 콘텐츠를 제작하며, 릴리스 노트를 개선할 예정이다.

타임라인​

앞으로 약 1년 동안 이 프로젝트들을 단계적으로 진행할 계획이다. 이미 진행 중인 작업도 있다. 예를 들어 JSI는 오픈소스에 이미 반영되었다. 반면, 표면적 감소와 같은 작업은 완료까지 시간이 더 걸릴 것이다. 커뮤니티에 진행 상황을 최대한 공유하도록 노력할 것이다. Discussions and Proposals 저장소에 참여해 주길 바란다. 이 저장소는 React Native 커뮤니티가 주도하는 이니셔티브로, 이 로드맵에서 논의된 여러 작업의 시작점이 되었다.

오랜 기다림 끝에 React Native 0.56 버전이 드디어 출시되었다 🎉. 이 블로그 포스트는 이번 새 버전에서 소개된 주요 변경 사항을 요약한다. 또한 지난 3월 이후로 무엇을 준비해 왔는지 설명할 기회를 갖고자 한다.

호환성 문제의 딜레마, 또는 "언제 릴리스할 것인가?"​

기여자 가이드는 React Native에 적용되는 모든 변경 사항이 거치는 통합 과정을 설명한다. 이 프로젝트는 다양한 도구들로 구성되어 있어, 모든 기능이 정상적으로 작동하도록 조율과 지속적인 지원이 필요하다. 여기에 프로젝트에 기여하는 활발한 오픈소스 커뮤니티까지 더하면, 그 규모가 얼마나 방대한지 짐작할 수 있다.

React Native의 높은 채택률을 고려할 때, 호환성을 깨는 변경 사항은 신중하게 처리해야 하며, 이 과정은 항상 원활하지는 않다. 코어 팀이 새로운 호환성 변경 사항을 통합하고 테스트할 시간을 확보하기 위해 4월과 5월 릴리스를 건너뛰기로 결정했다. 이 과정에서 전용 커뮤니티 커뮤니케이션 채널을 활용해 2018년 6월(0.56.0) 릴리스를 최대한 문제 없이 적용할 수 있도록 노력했다.

0.56.0이 완벽한가? 그렇지 않다. 모든 소프트웨어가 그렇듯 완벽하지는 않다. 하지만 "더 많은 안정성을 기다리는 것"과 "테스트 결과가 성공적이므로 진행할 수 있다" 사이의 균형점에 도달했고, 이제 릴리스할 준비가 되었다고 판단했다. 또한, 최종 0.56.0 릴리스에서 해결되지 않은 몇 가지 문제들 이 존재한다는 점도 알고 있다. 대부분의 개발자는 0.56.0으로 업그레이드하는 데 문제가 없을 것이다. 앞서 언급한 문제로 차단된 개발자들의 경우, 토론에 참여해 함께 해결책을 모색하기를 기대한다.

0.56.0을 더 안정적인 프레임워크를 위한 기본 구성 요소로 생각할 수 있다. 모든 예외 사항이 해결되기까지는 아마도 1~2주 정도의 광범위한 적용이 필요하겠지만, 이는 2018년 7월(0.57.0) 릴리스를 더욱 향상시킬 것이다.

이 섹션을 마무리하며, 총 818개의 커밋에 기여한 67명의 기여자들에게 감사의 인사를 전한다. 그들의 노력이 여러분의 앱을 더 나은 방향으로 이끌 것이다 👏.

그럼 이제, 더 이상 미루지 않고...

주요 변경 사항​

Babel 7​

여러분도 아시다시피, 최신 자바스크립트 기능을 사용할 수 있게 해주는 트랜스파일러 도구인 Babel이 곧 v7 버전으로 업그레이드된다. 이번 새 버전은 몇 가지 중요한 변화를 가져오기 때문에, Metro가 이러한 개선 사항을 활용할 수 있도록 지금이 업그레이드하기에 적절한 시기라고 판단했다.

업그레이드 과정에서 문제가 발생한다면, 관련 문서 섹션을 참고하길 바란다.

Android 지원 현대화​

Android 환경에서 주변 도구들이 크게 변화했다. Gradle 3.5, Android SDK 26, Fresco 1.9.0, 그리고 OkHttp 3.10.0으로 업데이트했으며, 심지어 NDK API 타겟을 API 16로 조정했다. 이러한 변경 사항은 문제 없이 적용되며 더 빠른 빌드 속도를 제공할 것이다. 더 중요한 점은, 개발자들이 다음 달부터 시행될 새로운 Play Store 요구사항을 준수하는 데 도움이 될 것이다.

이와 관련하여, Dulmandakh에게 많은 PR을 제출해 준 것에 대해 특별히 감사드린다 👏.

이 방향으로 더 나아가기 위해 필요한 몇 가지 단계가 있으며, Android 지원 업데이트에 대한 미래 계획과 논의는 전용 이슈에서 확인할 수 있다. 또한 JSC에 대한 별도의 이슈도 참고할 수 있다.

새로운 Node, Xcode, React, Flow 소식​

이제 React Native의 표준은 Node 8이다. 사실 Node 8은 이미 테스트 중이었지만, Node 6이 유지보수 모드로 전환되면서 본격적으로 채택했다. React도 16.4로 업데이트되었으며, 이번 버전에는 많은 수정 사항이 포함되어 있다.

iOS 8 지원을 중단하고, 이제 iOS 9가 지원 가능한 가장 오래된 버전이 되었다. iOS 8을 실행할 수 있는 기기는 모두 iOS 9로 업그레이드가 가능하므로 이 변경이 문제가 되지 않을 것으로 예상한다. 이로 인해 iOS 8을 실행하는 구형 기기를 위한 우회 코드를 제거할 수 있었다.

지속적 통합(CI) 도구 체인도 Xcode 9.4를 사용하도록 업데이트했다. 이제 모든 iOS 테스트가 애플의 최신 개발 도구에서 실행된다.

Flow 0.75로 업그레이드하여 많은 개발자들이 선호하는 새로운 오류 형식을 사용할 수 있게 되었다. 또한 더 많은 컴포넌트에 대한 타입을 추가했다. 아직 프로젝트에서 정적 타입 검사를 적용하지 않았다면, 런타임이 아닌 코딩 중에 문제를 발견하기 위해 Flow 사용을 고려해 보길 바란다.

그리고 다른 여러 가지...​

예를 들어, YellowBox는 디버깅을 훨씬 더 개선한 새로운 구현체로 교체되었다.

전체 릴리스 노트는 여기에서 확인할 수 있다. 또한 이 새로운 버전으로 업그레이드할 때 문제를 피하려면 업그레이드 가이드를 꼭 참고하길 바란다.

마지막으로, 이번 주부터 React Native 코어 팀이 월간 회의를 다시 시작할 예정이다. 회의에서 다룬 내용을 모두가 알 수 있도록 최신 정보를 제공할 것이며, 여러분의 피드백을 다음 회의에 반영할 수 있도록 노력할 것이다.

모두 즐거운 코딩하길 바란다!

Lorenzo, Ryan, 그리고 React Native 코어 팀 모두

추가: 항상 그렇듯, React Native는 아직 0.x 버전으로 많은 변화가 진행 중임을 상기시킨다. 따라서 업그레이드할 때 무언가가 여전히 충돌하거나 고장날 가능성이 있다는 점을 기억하길 바란다. 이슈나 PR을 제출할 때 서로 도움을 주고받으며, CoC를 준수하길 바란다. 화면 너머에는 항상 사람이 있다는 것을 잊지 말자.

React Native가 처음 소개된 직후, 우리는 커뮤니티가 새로운 기능을 빠르게 도입할 수 있도록 매주 2주마다 릴리즈를 시작했다. 동시에 프로덕션 환경에서 사용할 수 있도록 버전을 안정적으로 유지했다. Facebook 내부에서는 프로덕션 iOS 앱을 출시하기 위해 매주 2주마다 코드베이스를 안정화해야 했기 때문에, 오픈소스 버전도 동일한 속도로 릴리즈하기로 결정했다. 현재 Facebook의 많은 앱들은 주 단위로 출시되며, 특히 Android에서 더욱 그렇다. 우리는 주 단위로 master 브랜치에서 출시하기 때문에, 이를 매우 안정적으로 유지해야 한다. 따라서 2주마다 릴리즈하는 방식은 더 이상 내부 기여자들에게도 이점이 없다.

커뮤니티에서는 릴리즈 속도가 따라가기 어렵다는 피드백을 자주 받는다. Expo와 같은 도구들은 버전 변경 속도를 관리하기 위해 매번 릴리즈를 건너뛰어야 했다. 따라서 2주마다 릴리즈하는 방식이 커뮤니티에 잘 맞지 않는다는 것이 분명해 보인다.

이제 매월 정기 릴리스 진행​

매월 정기 릴리스를 진행한다는 소식을 기쁜 마음으로 전한다. 2016년 12월 릴리스인 v0.40은 지난 한 달 동안 안정화 작업을 거쳤으며, 이제 도입할 준비가 됐다. (단, iOS 네이티브 모듈에서 헤더를 업데이트해야 한다는 점을 잊지 말자).

주말을 피하거나 예상치 못한 이슈를 처리하기 위해 며칠 정도 차이가 날 수 있지만, 이제 매월 첫째 날에 릴리스를 사용할 수 있고, 마지막 날에 공개될 것으로 기대해도 된다.

최신 릴리즈 후보 버전 사용 권장​

1월 릴리즈 후보 버전을 지금 바로 사용해 볼 수 있습니다. 새로운 기능을 여기서 확인하세요.

변경 사항을 미리 확인하고 React Native 기여자들에게 더 나은 피드백을 제공하려면, 가능한 한 매월 최신 릴리즈 후보 버전을 사용하는 것이 좋습니다. 매월 말에 정식 버전이 출시될 때쯤이면, 해당 버전에 포함된 변경 사항이 페이스북 앱에서 이미 2주 이상 운영 환경에서 테스트된 상태입니다.

새로운 react-native-git-upgrade 커맨드를 사용하면 앱을 쉽게 업그레이드할 수 있습니다:

npm install -g react-native-git-upgrade
react-native-git-upgrade 0.41.0-rc.0

이 간편한 접근 방식이 React Native 커뮤니티가 변경 사항을 더 쉽게 추적하고, 새로운 버전을 빠르게 적용하는 데 도움이 되길 바랍니다!

(이 계획을 고안한 Martin Konicek과 이를 실현한 Mike Grabowski에게 감사드립니다)

React Native의 새 버전으로 업그레이드하는 것은 항상 어려운 일이었다. 다음과 같은 상황을 경험해 본 적이 있을 것이다:

이러한 옵션 중 어느 것도 이상적이지 않다. 파일을 덮어쓰면 로컬 변경사항을 잃게 된다. 덮어쓰지 않으면 최신 업데이트를 적용할 수 없다.

오늘 이 문제를 해결할 수 있는 새로운 도구를 소개하게 되어 기쁘다. 이 도구는 react-native-git-upgrade라고 하며, 가능한 경우 Git을 사용해 자동으로 충돌을 해결한다.

사용법​

필수 조건: Git이 PATH에 설치되어 있어야 한다. 프로젝트가 Git으로 관리되지 않아도 된다.

react-native-git-upgrade를 전역으로 설치한다:

$ npm install -g react-native-git-upgrade

또는 Yarn을 사용한다:

$ yarn global add react-native-git-upgrade

그런 다음, 프로젝트 디렉터리 안에서 실행한다:

$ cd MyProject
$ react-native-git-upgrade 0.38.0

참고: react-native의 새 버전을 설치하기 위해 'npm install'을 실행하지 않는다. 이 도구는 이전과 새로운 프로젝트 템플릿을 비교할 수 있어야 정상적으로 작동한다. 위에서 보여준 대로 앱 폴더 안에서 실행하면 된다. 이때 아직 이전 버전에 머물러 있어야 한다.

예제 출력:

react-native-git-upgrade를 인수 없이 실행하면 React Native의 최신 버전으로 업그레이드한다.

Android와 iOS 빌드 파일에서 변경 사항을 보존하려고 노력하므로, 업그레이드 후 react-native link를 실행할 필요가 없다.

구현을 최대한 간섭하지 않도록 설계했다. 임시 디렉터리에 생성된 로컬 Git 저장소를 기반으로 작동한다. 프로젝트 저장소에 영향을 미치지 않는다 (Git, SVN, Mercurial 등 어떤 VCS를 사용하든 상관없다). 예기치 않은 오류가 발생하면 소스가 복원된다.

어떻게 동작하나요?​

핵심 단계는 Git 패치를 생성하는 것이다. 이 패치는 앱이 사용 중인 버전과 새로운 버전 사이의 React Native 템플릿에 적용된 모든 변경 사항을 포함한다.

이 패치를 얻으려면 node_modules 디렉토리 내부의 react-native 패키지에 포함된 템플릿으로 앱을 생성해야 한다. 이 템플릿은 react-native init 명령어가 사용하는 것과 동일하다. 그런 다음 현재 버전과 새 버전의 템플릿으로 각각 네이티브 앱을 생성한 후, Git은 프로젝트에 맞게 조정된 패치를 생성할 수 있다. 이 패치는 앱 이름과 같은 프로젝트별 정보를 포함한다.

[...]

diff --git a/ios/MyAwesomeApp/Info.plist b/ios/MyAwesomeApp/Info.plist
index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
        <dict>
            <key>localhost</key>
            <dict>
-               <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+               <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
[...]

이제 이 패치를 소스 파일에 적용하기만 하면 된다. 이전 react-native upgrade 프로세스는 작은 차이점도 사용자에게 물어보곤 했지만, Git은 3-way 병합 알고리즘을 사용해 대부분의 변경 사항을 자동으로 병합할 수 있다. 결국 익숙한 충돌 구분자를 남긴다.

    13B07F951A680F5B00A75B9A /* Release */ = {
      isa = XCBuildConfiguration;
      buildSettings = {
        ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
        CODE_SIGN_IDENTITY = "iPhone Developer";
        FRAMEWORK_SEARCH_PATHS = (
          "$(inherited)",
          "$(PROJECT_DIR)/HockeySDK.embeddedframework",
          "$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
        );
=======
        CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
        HEADER_SEARCH_PATHS = (
          "$(inherited)",
          /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
          "$(SRCROOT)/../node_modules/react-native/React/**",
          "$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
        );

이러한 충돌은 일반적으로 이해하기 쉽다. 구분자 ours는 "여러분의 팀"을 의미하고, theirs는 "React Native 팀"으로 볼 수 있다.

새로운 글로벌 패키지를 도입하는 이유​

React Native는 기본적으로 전역 CLI(react-native-cli 패키지)를 제공한다. 이 CLI는 node_modules/react-native/local-cli 디렉토리에 내장된 로컬 CLI로 명령을 위임한다.

앞서 언급했듯이, 이 프로세스는 현재 사용 중인 React Native 버전에서 시작해야 한다. 만약 이 기능을 로컬 CLI에 내장했다면, 이전 버전의 React Native를 사용할 때 이 기능을 활용할 수 없게 된다. 예를 들어, 0.29.2 버전에서 0.38.0 버전으로 업그레이드하려면 이 새로운 업그레이드 코드가 0.38.0 버전에서만 출시되었다면 업그레이드가 불가능하다.

Git 기반의 업그레이드는 개발자 경험을 크게 개선하며, 모든 사람이 이를 사용할 수 있도록 하는 것이 중요하다. 전역으로 설치되는 별도의 패키지인 react-native-git-upgrade를 사용하면 현재 프로젝트가 어떤 React Native 버전을 사용하든 상관없이 이 새로운 코드를 바로 활용할 수 있다.

또 다른 이유는 Martin Konicek의 최근 Yeoman 제거이다. 패치를 생성하기 위해 이전 템플릿을 평가하려면 react-native 패키지에 Yeoman 의존성을 다시 추가해야 하는데, 이를 원하지 않았다.

직접 사용해 보고 피드백을 제공하세요​

결론적으로, 이 기능을 즐기고 개선 사항을 제안하거나 문제를 보고하고 특히 풀 리퀘스트를 보내주세요. 각 환경은 조금씩 다르고, 각 React Native 프로젝트도 다릅니다. 여러분의 피드백이 필요하니, 이 기능이 모두에게 잘 동작할 수 있도록 도와주세요.

감사의 말​

이 모든 것이 가능하도록 도와주신 멋진 회사 Zenika와 M6 Web (archived)에게 깊은 감사를 드립니다!

많은 사람들이 React Native에서 활발히 진행 중인 작업을 따라잡기 어렵다고 이야기한다. 진행 중인 작업을 명확히 전달하기 위해, 이제 React Native 로드맵을 공개한다. 이 작업은 크게 세 가지 우선순위로 나뉜다:

• 코어 라이브러리. 가장 유용한 컴포넌트와 API에 더 많은 기능을 추가한다.
• 안정성. 기반 인프라를 개선해 버그를 줄이고 코드 품질을 높인다.
• 개발자 경험. React Native 개발자가 더 빠르게 작업할 수 있도록 돕는다.

로드맵에 추가할 만한 기능을 제안하고 싶다면 Canny를 확인해 보자. 여기서 새로운 기능을 제안하거나 기존 제안에 대해 논의할 수 있다.

React Native의 새로운 기능​

React Native 버전 0.37이 오늘 출시되며, 앱에 터치 가능한 버튼을 쉽게 추가할 수 있는 새로운 코어 컴포넌트가 도입되었다. 또한 새로운 패키지 관리자인 Yarn을 지원하여 앱의 의존성을 업데이트하는 전체 프로세스가 더 빨라질 것으로 기대된다.

버튼 컴포넌트 소개​

오늘 우리는 모든 플랫폼에서 훌륭하게 보이는 기본 <Button /> 컴포넌트를 소개한다. 이는 React Native가 즉시 사용할 수 있는 버튼을 제공하지 않는 유일한 모바일 개발 도구 중 하나라는 피드백에 대한 해결책이다.

<Button
  onPress={onPressMe}
  title="Press Me"
  accessibilityLabel="Learn more about this Simple Button"
/>

경험 많은 React Native 개발자들은 버튼을 만드는 방법을 알고 있다. iOS에서는 TouchableOpacity를, 안드로이드에서는 물결 효과를 위해 TouchableNativeFeedback을 사용한 뒤 몇 가지 스타일을 적용한다. 커스텀 버튼을 만들거나 설치하는 것이 특별히 어렵지는 않지만, 우리는 React Native를 배우기 쉽게 만드는 것을 목표로 한다. 코어에 기본 버튼을 추가함으로써, 초보자들은 첫날부터 멋진 것을 개발할 수 있게 되며 버튼 서식을 맞추거나 Touchable의 세부 사항을 배우는 데 시간을 쏟지 않아도 된다.

버튼은 모든 플랫폼에서 자연스럽게 작동하고 보이도록 설계되었기 때문에, 커스텀 버튼이 제공하는 모든 기능을 지원하지는 않는다. 이는 훌륭한 시작점이지만, 기존의 모든 버튼을 대체하기 위한 것은 아니다. 더 자세한 내용은 실행 가능한 예제가 포함된 새로운 버튼 문서를 확인하라!

Yarn을 사용해 react-native init 속도 높이기​

이제 자바스크립트의 새로운 패키지 매니저인 Yarn을 사용해 react-native init의 속도를 크게 높일 수 있다. 속도 향상을 확인하려면 Yarn을 설치하고 react-native-cli를 1.2.0 버전으로 업그레이드한다:

$ npm install -g react-native-cli

이제 새 앱을 설정할 때 "Using yarn" 메시지를 확인할 수 있다:

간단한 로컬 테스트에서 react-native init은 좋은 네트워크 환경에서 약 1분 내에 완료된다(npm 3.10.8을 사용할 때 약 3분 소요). Yarn 설치가 필수는 아니지만 강력히 권장한다.

감사합니다!​

이번 릴리스에 기여해 주신 모든 분들께 감사드립니다. 전체 릴리스 노트는 GitHub에서 확인할 수 있습니다. 수십 개의 버그 수정과 새로운 기능이 추가되면서 React Native는 여러분 덕분에 계속해서 발전하고 있습니다.

오늘 React Native 0.36을 출시한다. 새로운 기능에 대해 자세히 알아보자.

Headless JS​

Headless JS는 앱이 백그라운드에 있을 때 JavaScript로 작업을 실행하는 방법이다. 최신 데이터를 동기화하거나, 푸시 알림을 처리하거나, 음악을 재생하는 등의 용도로 사용할 수 있다. 현재는 Android에서만 사용 가능하다.

시작하려면 전용 파일(예: SomeTaskName.js)에 비동기 작업을 정의한다:

module.exports = async taskData => {
  // 여기서 작업을 수행한다.
};

그 다음, AppRegistry에 작업을 등록한다:

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
  require('SomeTaskName'),
);

Headless JS를 사용하려면 필요할 때 서비스를 시작할 수 있도록 네이티브 Java 코드를 작성해야 한다. 더 자세한 내용은 Headless JS 문서를 참고한다!

키보드 API​

Keyboard를 사용하면 화면 키보드를 더 쉽게 다룰 수 있다. 네이티브 키보드 이벤트를 감지하고 반응할 수 있다. 예를 들어, 활성화된 키보드를 닫으려면 Keyboard.dismiss()를 호출하면 된다:

import {Keyboard} from 'react-native';

// 키보드를 닫는다!
Keyboard.dismiss();

애니메이션 나눗셈​

React Native에서는 이미 두 애니메이션 값을 더하거나, 곱하거나, 모듈로 연산하는 기능을 지원한다. 버전 0.36부터는 두 애니메이션 값을 나누는 기능도 추가되었다. 특정 경우에는 계산을 위해 한 애니메이션 값을 다른 애니메이션 값으로 역수로 만들어야 할 때가 있다. 예를 들어 스케일을 역수로 만드는 경우가 있다 (2x --> 0.5x):

const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
  toValue: 2,
}).start();

b는 a의 스프링 애니메이션을 따라가며 1 / a 값을 생성한다.

기본 사용법은 다음과 같다:

<Animated.View style={{transform: [{scale: a}]}}>
  <Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>

이 예제에서 내부 이미지는 부모의 스케일링이 상쇄되기 때문에 전혀 늘어나지 않는다. 더 자세히 알고 싶다면 애니메이션 가이드를 참고한다.

다크 상태 바​

StatusBar에 새로운 barStyle 값인 dark-content가 추가되었다. 이제 barStyle을 Android와 iOS 모두에서 사용할 수 있다. 각 값의 동작 방식은 다음과 같다:

• default: 플랫폼 기본값을 사용한다(iOS에서는 밝은 색, Android에서는 어두운 색).
• light-content: 검은색 텍스트와 아이콘이 있는 밝은 상태 바를 사용한다.
• dark-content: 흰색 텍스트와 아이콘이 있는 어두운 상태 바를 사용한다.

그리고 더 많은 변화들​

위 내용은 0.36 버전에서 변경된 사항의 일부에 불과하다. 새로운 기능, 버그 수정, 주요 변경 사항의 전체 목록을 확인하려면 GitHub의 릴리스 노트를 참고한다.

터미널에서 다음 명령어를 실행해 0.36 버전으로 업그레이드할 수 있다:

$ npm install --save react-native@0.36
$ react-native upgrade

뛰어난 개발자 경험을 제공하려면 탄탄한 문서가 필수다. 좋은 문서를 만드는 데는 여러 요소가 필요하다. 이상적인 문서는 간결하고 유용하며 정확하고 완전해야 한다. 또한 사용자에게 즐거운 경험을 제공해야 한다. 최근 여러분의 피드백을 바탕으로 문서를 개선하기 위해 노력했고, 그 과정에서 이뤄진 몇 가지 개선 사항을 공유하고자 한다.

인라인 예제​

새로운 라이브러리, 프로그래밍 언어, 프레임워크를 배울 때 가장 아름다운 순간은 코드를 처음 작성하고 실행해 보며 실제로 작동하는 것을 확인하는 순간이다. 여러분이 실제로 무언가를 만들어냈을 때 느끼는 그 감동을 문서에 담고 싶었다. 다음과 같이 말이다:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class ScratchPad extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}>
          Isn't this cool?
        </Text>
        <Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}>
          👍
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('ScratchPad', () => ScratchPad);

Devin Abbott의 도움으로 react-native-web-player 모듈을 사용한 이 인라인 예제는 React Native의 기본을 배우는 데 매우 효과적인 방법이다. 우리는 React Native 초보자를 위한 튜토리얼을 가능한 한 이러한 예제를 사용하도록 업데이트했다. 예제 코드를 조금만 수정해도 어떤 결과가 나오는지 궁금하다면, 이 방법이 직접 실험해 보기에 매우 적합하다. 또한 개발자 도구를 만들고 있다면, 여러분의 사이트에 React Native 샘플을 라이브로 보여주고 싶을 때 react-native-web-player를 사용하면 간단히 구현할 수 있다.

코어 시뮬레이션 엔진은 Nicolas Gallagher의 react-native-web 프로젝트에서 제공된다. 이 프로젝트는 Text나 View와 같은 React Native 컴포넌트를 웹에서 표시할 수 있는 방법을 제공한다. 모바일과 웹 경험을 공유하는 코드베이스를 구축하고 싶다면 react-native-web을 확인해 보길 바란다.

더 나은 가이드​

React Native의 일부 영역에서는 다양한 방법으로 작업을 수행할 수 있다. 여러분의 피드백을 통해 더 나은 가이드가 필요하다는 것을 알게 되었다.

새로운 네비게이션 가이드를 제공한다. 이 가이드에서는 Navigator, NavigatorIOS, NavigationExperimental 등 다양한 접근 방식을 비교하고 어떤 것을 사용해야 하는지 조언한다. 중기적으로는 이러한 인터페이스를 개선하고 통합하는 작업을 진행 중이다. 단기적으로는 더 나은 가이드가 여러분의 작업을 더 쉽게 만들어 줄 것이다.

또한 새로운 터치 처리 가이드도 준비했다. 이 가이드는 버튼과 같은 인터페이스를 만드는 기본 개념과 터치 이벤트를 처리하는 다양한 방법에 대해 간략히 설명한다.

플렉스 박스(Flexbox) 영역도 개선했다. 플렉스 박스를 사용한 레이아웃 처리와 컴포넌트 크기 조절에 대한 튜토리얼을 포함한다. 또한, React Native에서 레이아웃을 제어하는 모든 props 목록도 제공한다. 이 목록은 간단하지만 유용한 정보를 담고 있다.

시작하기​

React Native 개발 환경을 컴퓨터에 설정할 때, 여러 가지 설치와 설정 작업이 필요하다. 설치 과정을 정말 재미있고 흥미롭게 만들기는 어렵지만, 최소한 빠르고 간편하게 만들 수는 있다.

우리는 새로운 시작하기 워크플로우를 구축했다. 이 워크플로우는 개발 운영체제와 모바일 운영체제를 미리 선택할 수 있게 해서, 모든 설정 지침을 한 곳에 간결하게 제공한다. 또한 설치 과정을 직접 테스트하여 모든 것이 작동하는지 확인하고, 각 결정 지점에 명확한 권장 사항을 제공하도록 했다. 동료들을 대상으로 테스트한 결과, 이 방법이 개선된 것임을 확신한다.

또한 기존 앱에 React Native 통합하기 가이드도 작업했다. Facebook 앱과 같은 가장 큰 규모의 앱들 중 많은 수가 React Native로 앱의 일부를 구축하고, 나머지 부분은 일반 개발 도구로 만든다. 이 가이드가 더 많은 사람들이 이런 방식으로 앱을 개발하는 데 도움이 되길 바란다.

여러분의 도움이 필요합니다​

여러분의 피드백은 우리가 무엇을 우선순위로 해야 할지 알려준다. 어떤 사람들은 이 글을 읽고 "더 나은 문서? 휴. X의 문서는 여전히 엉망이야!"라고 생각할지도 모른다. 그건 좋다. 우리는 그런 에너지가 필요하다. 피드백을 주는 가장 좋은 방법은 피드백의 종류에 따라 다르다.

문서에서 잘못된 설명이나 실제로 작동하지 않는 코드와 같은 오류를 발견하면 이슈를 제출해라. "Documentation" 태그를 붙여서 적절한 사람에게 쉽게 전달될 수 있도록 해라.

특정한 오류는 없지만 문서의 어떤 부분이 근본적으로 혼란스럽다면, GitHub 이슈로 제출하기보다는 Canny에 해당 문서 영역에 대한 도움이 필요한 부분을 게시해라. 이렇게 하면 가이드 작성과 같은 일반적인 작업을 할 때 우선순위를 정하는 데 도움이 된다.

여기까지 읽어줘서 고맙고, React Native를 사용해줘서 고맙다!

React Native를 오픈소스로 공개한 지 1년이 되었다. 소수의 엔지니어들이 시작한 아이디어는 이제 Facebook 내외의 제품 팀들이 사용하는 프레임워크로 성장했다. 오늘 F8에서 Microsoft가 React Native를 Windows 생태계로 가져온다고 발표했다. 이를 통해 개발자들은 Windows PC, Phone, Xbox에서 React Native를 구축할 수 있게 된다. 또한 Visual Studio Code용 React Native 확장과 CodePush 같은 오픈소스 도구와 서비스를 제공해 Windows 플랫폼에서 React Native 앱을 개발하는 데 도움을 줄 예정이다. 한편, Samsung은 하이브리드 플랫폼을 위해 React Native를 개발 중이다. 이를 통해 개발자들은 수백만 대의 SmartTV, 모바일, 웨어러블 기기를 위한 앱을 만들 수 있게 된다. 또한 React Native용 Facebook SDK를 공개해 개발자들이 로그인, 공유, 앱 분석, Graph API 같은 Facebook 소셜 기능을 앱에 쉽게 통합할 수 있게 했다. 1년 만에 React Native는 모든 주요 플랫폼에서 개발자들이 앱을 만드는 방식을 바꿔놓았다.

이것은 대단한 여정이었지만, 우리는 이제 막 시작한 것이다. 지난 1년간 React Native가 어떻게 성장하고 진화했는지, 그 과정에서 마주한 도전들, 그리고 앞으로 기대되는 점들을 돌아보자.

이 글은 발췌문이다. 전체 글은 Facebook Code에서 확인할 수 있다.

올해 초, 우리는 iOS용 React Native를 소개했다. React Native는 웹에서 React를 사용하던 개발자들에게 익숙한 선언적이고 독립적인 UI 컴포넌트와 빠른 개발 사이클을 모바일 플랫폼에 가져오면서도, 네이티브 애플리케이션의 속도, 정확성, 그리고 느낌을 유지한다. 오늘, 우리는 Android용 React Native를 출시하게 되어 기쁘게 생각한다.

Facebook에서는 이미 1년 넘게 React Native를 프로덕션 환경에서 사용해 왔다. 거의 정확히 1년 전, 우리 팀은 Ads Manager 앱을 개발하기 시작했다. 우리의 목표는 Facebook에서 광고를 하는 수백만 명의 사람들이 계정을 관리하고 이동 중에도 새로운 광고를 생성할 수 있는 새로운 앱을 만드는 것이었다. 이 앱은 Facebook의 첫 번째 완전한 React Native 앱이자 첫 번째 크로스 플랫폼 앱이 되었다. 이 글에서 우리는 이 앱을 어떻게 구축했는지, React Native가 어떻게 더 빠르게 개발할 수 있게 했는지, 그리고 우리가 배운 교훈을 공유하고자 한다.

이 글은 발췌문이다. 전체 글은 Facebook Code에서 확인할 수 있다.