React Native Core Contributor Summit 2022
몇 년간의 팬데믹과 온라인 전용 이벤트를 겪은 후, 이제는 React Native의 핵심 기여자들을 한자리에 모을 때라고 생각했다.
그래서 9월 초, 우리는 React Native의 주요 기여자들, 라이브러리 관리자들, 그리고 Meta의 React Native 및 Metro 팀을 Core Contributor Summit 2022에 초대했다. Callstack이 폴란드 브로츠와프 본사에서 이번 서밋을 주최했으며, 동시에 진행된 React Native EU 컨퍼런스의 일부로 진행되었다.
React Native 코어 팀과 함께 참가자들이 참여할 수 있는 여러 워크숍을 기획했다. 주제는 다음과 같았다:
- React Native Codegen 및 TypeScript 지원
- React Native 신규 아키텍처 라이브러리 마이그레이션
- React Native 모노레포
- Metro 웹 및 생태계 정렬
- Metro 간소화된 릴리스 워크플로
이틀 동안 진행된 지식 공유와 협업의 규모에 깊은 인상을 받았다. 이번 블로그 포스트에서는 이번 모임의 결과물을 미리 살펴볼 수 있도록 하겠다.
React Native Codegen & TypeScript 지원
React Native의 Codegen은 React Native의 새로운 아키텍처의 핵심 부분이다. 이를 지원하고 개선하는 것은 React Native의 미래를 위한 최우선 과제 중 하나다. 예를 들어, 올해 초에는 Flow 대신 TypeScript 스펙을 기반으로 제네릭 코드를 지원하는 기능을 추가했다.
이번 세션에서는 Codegen의 핵심 개념과 작동 방식을 설명하며 새로운 기여자를 온보딩할 기회를 가졌다. 이후 두 가지 주요 영역에 초점을 맞췄다:
1. Codegen에서 현재 지원하지 않는 새로운 타입을 지원하기. 가장 많이 요청된 기능 중 하나는 TypeScript의 문자열 유니온 타입이었다.
몇 명으로 구성된 팀이 이 작업을 해결하기 위해 회의실로 모였다. 그들은 Codegen의 단위 테스트를 실행하는 방법과 같은 몇 가지 어려움을 마주했고 이를 극복했다. 코드를 다루기 전에 코드 실행 흐름을 이해하는 데 상당한 시간을 보냈다. 몇 시간 동안의 협업 끝에, 문자열 유니온을 인식할 수 있는 첫 번째 프로토타입을 완성했다. 이 경험은 디자인 패턴과 미래에 원하는 이상적인 아키텍처를 논의하는 데 매우 유용했다.
2. iOS용 자동 링크 개선, 누락된 사용 사례 추가
특히, 라이브러리와 앱이 모노레포에서 함께 사용되는 시나리오에서 자동 링크가 제대로 동작하지 않았다. 안드로이드는 이미 이 사용 사례를 지원했지만 iOS에서는 누락된 상태였다.
Codegen 기여자들과 함께 작업하면서 코드베이스에서 작업하는 것이 쉽지 않다는 사실을 깨달았다. 예를 들어, 하나의 타입을 지원하기 위해 동일한 코드를 네 군데에 복사하여 붙여넣어야 했다: Flow로 작성된 스펙을 가진 모듈, TypeScript로 작성된 스펙을 가진 모듈, Flow로 작성된 스펙을 가진 컴포넌트, 그리고 TypeScript로 작성된 스펙을 가진 컴포넌트.
이러한 깨달음은 우리가 umbrella task를 만들어 커뮤니티에 도움을 요청하도록 이끌었다. 이를 통해 코드베이스를 더 유지보수하기 쉬운 상태로 개선하려고 했다.
커뮤니티의 참여는 놀라웠다: 첫 40개의 작업을 5일 만에 빠르게 할당할 수 있었다. 10월 말까지 커뮤니티는 47개의 작업을 완료했고, 다른 많은 작업들은 머지 준비가 완료된 상태로 기다리고 있다.
이러한 노력은 Hacktoberfest에도 기여했으며, 이 개선 작업에 참여한 모든 사람들에게도 도움이 되었다!
React Native 신규 아키텍처 라이브러리 마이그레이션
React Native 커뮤니티에서 가장 뜨거운 주제는 신규 아키텍처다. 신규 아키텍처를 지원하는 라이브러리는 전체 생태계의 마이그레이션에서 중요한 요소다. 따라서 라이브러리 관리자가 신규 아키텍처로 마이그레이션하는 과정을 지원하려 한다.
이 세션은 처음에 브레인스토밍으로 시작했다. 코어 기여자들이 React Native 팀에게 신규 아키텍처와 관련된 모든 질문을 할 수 있는 기회였다. 이 직접적인 피드백 루프는 코어 기여자들이 명확한 이해를 얻는 데 도움이 되었고, React Native 팀은 피드백을 수집할 수 있었다. 공유된 피드백과 우려 사항 중 일부는 React Native 0.71에 반영될 예정이다.
그 후 가능한 한 많은 라이브러리를 신규 아키텍처로 마이그레이션하는 실질적인 작업으로 넘어갔다. 이 세션에서 react-native-document-picker, react-native-store-review, react-native-orientation과 같은 여러 커뮤니티 패키지의 마이그레이션 프로세스를 시작했다.
참고로, 라이브러리를 마이그레이션 중이고 지원이 필요하다면 GitHub의 신규 아키텍처 작업 그룹에 문의하길 바란다.
React Native 모노레포
오늘날 React Native의 새 버전을 출시하는 것은 간단한 일이 아니다. React Native는 NPM에서 가장 많이 다운로드되는 패키지 중 하나이며, 출시 프로세스가 원활하게 진행되도록 해야 한다.
이런 이유로 react-native 저장소를 리팩토링하고 모노레포 RFC(#480)를 구현하려고 한다.
이 세션에서는 처음으로 모든 기여자로부터 의견을 수집하고 브레인스토밍을 진행했다. 저장소를 발전시켜 하위 종속성에 대한 주요 변경 사항을 줄이는 것이 중요하기 때문이다.
그런 다음 두 가지 방면으로 작업을 시작했다. 먼저 모노레포를 지원하기 위해 지속적 통합(CI) 인프라를 확장해야 했고, 테스트 인프라에 Verdaccio를 추가했다. 그 다음 여러 패키지의 이름을 변경하고 스코프를 추가하는 작업을 진행했으며, 이로 인해 6개의 독립적인 기여가 이루어졌다.
이 작업의 진행 상황은 umbrella issue에서 확인할 수 있으며, 가까운 시일 내에 이에 대한 더 많은 정보를 공유할 예정이다.
Metro 웹 및 생태계 정렬
Metro는 자바스크립트 번들러로, React Native 개발 환경의 핵심적인 부분이다. 우리는 Metro가 자바스크립트 생태계의 최신 표준과 잘 동작하도록 만드는 데 주력하고 있다.
이번 세션에서는 Metro의 기능을 개선하여 웹 사용 사례와 npm 및 번들러 생태계와 더 잘 호환되도록 하는 방법에 대해 논의했다. 주요 논의 주제는 두 가지였다:
1. "exports"(패키지 진입점) 스펙 도입
Node.js 문서에 따르면:
"exports" 스펙 도입은 많은 가능성을 열어준다. 이 세션에서는 "exports"와 함께 플랫폼별 코드를 어떻게 처리할지 논의했다. 여러 요소를 고려한 끝에, Metro 리졸버에 "strict" 모드와 "non-strict" 모드를 추가해 "exports"를 비교적 손쉽게 도입할 수 있는 계획을 세웠다. 또한 builder-bob을 활용하면 라이브러리 제작자가 strict 모드를 쉽게 도입할 수 있다는 점도 논의했다.
이 논의의 결과는 다음과 같다:
2. 웹과 번들러 생태계
Metro 팀은 Expo와의 협업 진행 상황을 공유했고, 향후 번들 분할과 트리 쉐이킹 지원을 위해 이 작업 모델을 계속 유지할 계획을 밝혔다. ES 모듈 지원에 대해 다시 논의했고, Yarn PnP와 웹에서의 출력 최적화와 같은 잠재적인 미래 기능을 고려했다. Metro의 핵심이 Jest와 로직과 데이터 구조를 공유하는 방식과 더 많은 재사용 기회에 대해 논의했다.
개발자들은 번들 분할과 타사 도구와의 상호 운용성에 대한 통찰력 있는 사용 사례를 제시했다. 이를 통해 Metro의 잠재적인 확장 지점과 현재 문서 개선에 대해 논의하게 되었다.
이 논의는 다음 날 릴리스 워크플로우 간소화에 대한 세션을 위한 좋은 기반을 제공했다.
Metro 간소화 릴리스 워크플로
앞서 언급했듯이, React Native를 릴리스하는 작업은 간단하지 않다. React Native, React Native CLI, 그리고 Metro를 모두 릴리스해야 하기 때문에 더 복잡해진다. 이 도구들은 서로 연결되어 있으며, React Native와 CLI 모두 Metro에 의존한다. 이로 인해 패키지 중 하나가 새 버전을 릴리스할 때마다 일부 마찰이 발생한다.
현재는 직접적인 커뮤니케이션과 동기화된 릴리스를 통해 이를 관리하고 있지만, 개선의 여지가 있다. 이 세션에서는 React Native, Metro, CLI 간의 의존성을 다시 검토했다. “Lean Core” 작업 당시 CLI를 React Native에서 분리하면서 내린 몇 가지 설계 결정이 두 프로젝트를 상호 의존적으로 만들고, 일부 기능이 중복되게 만들었다는 사실을 발견했다. 당시의 결정은 CLI 팀이 더 빠르게 반복할 수 있도록 했기 때문에 합리적이었다.
이제는 그 결정을 다시 검토하고, 두 팀의 경험을 바탕으로 해결 방안을 찾을 때가 됐다. 결과적으로 Metro 팀이 @react-native-community/cli-plugin-metro 개발을 인수하고, 이를 일시적으로 React Native 코어로 옮긴 후, 대부분 Metro 모노레포로 이동할 예정이다.
화이트보드에 패키지 간 의존성을 그리며 세 시간을 보낸 것 외에도, 가장 큰 수확은 CLI와 Metro 팀이 서로의 문제, 경험, 계획을 공유하며 상호 이해를 높였다는 점이다. 실제로 만나지 않고는 이 정도의 협력을 이룰 수 없었을 것이다.
몇 시간 동안 함께 시간을 보내며 이렇게 많은 지식 공유와 아이디어 교류가 가능했다는 사실에 여전히 감명받고 있다. 이번 서밋을 통해 React Native 생태계를 개선하고 재구성할 수 있는 여러 가지 계획의 씨앗을 심었다.
Callstack에 우리를 환대해 주셔서 다시 한번 감사드리며, Core Contributor Summit 2022에 참여해 주신 모든 분들께도 감사드린다. React Native 개발에 참여하고 싶다면, 우리의 오픈 이니셔티브에 참여하고 웹사이트의 기여 가이드를 읽어보길 바란다. 앞으로 직접 만나뵐 수 있기를 기대한다!