React Native에 현대적인 빌드 도구 더하기: Rollipop 구현기

FECONF 2026에서 진행한 본 세션 발표 자료입니다.

Transcript

1. React Native 에 현대적인 빌드 도구 더하기: Rollipop 구현기
2. 이근혁 Geunhyeok LEE Frontend Platform Engineer leegeunhyeok https://lgh.dev
3. 토스에서 만드는 제품의 개발 환경은 어떨까요?
4. Product 1 Product 2 Product 3 Product N Monorepo
5. Product 1 Product 2 Yarn + Plug'n'Play Product 3 Product N Monorepo
6. 수십 개 이상의 React Native 기반 제품들 Point Shopping Benefit Pay Car
7. 제품이 유저에게 닿기까지 Product Bundle CDN Users
8. 제품이 유저에게 닿기까지 Metro Bundle
9. 제품이 유저에게 닿기까지 Hermes Toss App Bundle
10. 하루에 수십, 수백 번 빌드 & 배포, 날이 갈 수록 늘어나는 빌드 커스터마이징
11. Metro의 한계 - 느린 빌드 속도 - 트리셰이킹(Tree-Shaking) 미지원 - 느슨한 모듈 Resolution, Yarn PnP 미지원 - Exports field 등 미흡한 Node 표준 사양 지원 - 번들러 확장의 어려움
12. 번들러를 만들자: esbuild - Go 언어 기반 빠른 성능 - 트리셰이킹(Tree-Shaking) 등 번들 최적화 지원 - 엄격한 모듈 Resolution, Yarn PnP 지원 - Exports field 등 Node 표준 사양 지원 - 확장 가능한 플러그인 API 지원
13. 번들러를 만들자: esbuild - Go 언어 기반 - 트리셰이킹(Tree-Shaking) 등 번들 최적화 지원 - 엄격한 모듈 Resolution, Yarn PnP 지원 - Exports field 등 Node 표준 Slash사양 23 | 지원 달리는 토스 앱에 React Native 엔진 더하기 FEConf 2023 | React Native, Metro를 넘어서 - 확장 가능한 플러그인 지원
14. 번들러를 만들자: esbuild Metro esbuild 90s 10s
15. 그러나,
16. HMR(Hot Module그러나, Replacement) 기능 미지원
17. 첫 구현 번들러의 한계 Product Development ≠ Production
18. 첫 구현 번들러의 한계 점점 늘어나는 빌드 커스터마이징 코드 변환 파이프라인의 확장 …
19. 새로운 대안 Rust 기반 Native HMR 지원 풍부한 기능 그리고 활발한 지원
21. 빌드 속도 대규모 모노리포 호환성 손쉬운 확장
22. Rollipop 구현기 Resolver Transformer Serializer 모듈 위치를 찾고 코드를 변형하고 최종 번들 생성
23. Rollipop 구현기 foo.android.js foo.ios.js foo.js
24. Rollipop 구현기
25. Rollipop 구현기 Flow
26. Rollipop 구현기 Codegen
27. Rollipop 구현기 Syntax Lowering
28. Rollipop 구현기 Code TS? Flow? JavaScript Parser Syntax Lowering Executable Code Y TypeScript Parser Y Flow Parser Transform Specs Y Codegen?
29. Rollipop 구현기 TypeScript, JSX, Flow, Codegen, … Hot Path 최적화가 빌드 성능의 핵심 포인트
30. Rollipop 구현기
31. Rollipop 구현기
32. Rollipop 구현기 Flow 타입 정보가 남아있어야 Codegen 변환 가능 그 외에는 Flow 구문 제거 (= 순수 JavaScript)
33. Rollipop 구현기 비용이 비싼 코드 파싱, 변환 작업은 모아서 한 번만 수행
34. Rollipop 구현기 Syntax Lowering 같은 고비용 변환은 Babel 대신 SWC 활용
35. Rollipop 구현기 초기 구현 후 실제 제품에 적용하면서 마주한 다양한 문제들
36. Rollipop 구현기: 발견한 문제 1 - 엄청나게 많은 의존성 정보 - 다양한 타입(HARD, SOFT)으로 링크된 패키지들 - 수 십 MB & 수 십만 라인의 거대한 Manifest (.pnp.cjs) Manifest 내부 데이터 순서가 유지되지 않아 의존성을 찾지 못하는 치명적인 버그 발견
37. Rollipop 구현기: 발견한 문제 1 yarnpkg/pnp-rs (#86) rolldown oxc-resolver Dependency Graph pnp-rs
38. Rollipop 구현기: 발견한 문제 2 ???
39. Rollipop 구현기: 발견한 문제 2 rolldown/rolldown (#7544)
40. Rollipop 구현기: 발견한 문제 3 - 실행하면 10초 이상 흰 화면에 머물러 있는 현상 - 런타임이 멈춘 것은 아니고 느리게 실행되는 문제 반드시 해결해야 하는 성능 문제
41. Rollipop 구현기: 발견한 문제 3 1. Hermes clone 후 직접 빌드 ( facebook/hermes ) 2. 실행시켜 볼 수 있는 최소 JavaScript 번들 작성 3. 로컬에서 직접 실행하며 병목 구간 프로파일링 $ hermes -Og source.js $ /usr/bin/sample "$PID" 10 1 -mayDie -file sample.txt
42. Rollipop 구현기: 발견한 문제 3 최상위 Scope에서 모듈 초기화 함수, 내보내는 값이 모두 바인딩
43. Rollipop 구현기: 발견한 문제 3 G (바인딩 수) F (초기화 함수 수) 모듈 초기화 함수 호출에 소요되는 시간 = O(G · F)
44. Rollipop 구현기: 발견한 문제 3 G (바인딩 수) 번들 안에는 수천, 수만 개의 모듈이 포함 모듈 초기화 함수 호출에 소요되는 시간 = O(G · F) F (초기화 함수 수)
45. Rollipop 구현기: 발견한 문제 3
46. Rollipop 구현기: 발견한 문제 3 Problem React Native Specific? Contribute to Upstream Y ???
47. Rollipop 구현기: 발견한 문제 3 Problem React Native 특화 기능들을 구현하기 위해 Y React Native Rolldown을 Hard Fork 하는 전략을 선택 Specific? Contribute to Upstream ???
48. Rollipop 구현기 rollipop-dev/rolldown 네이티브 구현 커스터마이징 가능 Upstream과 주기적인 Sync
49. Rollipop 구현기 TypeScript, JSX, Flow, Codegen, … 네이티브 구현으로 옮길 수 있지 않을까?
50. Rollipop 구현기 @babel/core JavaScript based implement (Codegen, Strip Flow) @swc/core (Syntax Lowering) Plugins N-API call sites overheads
51. Rollipop 구현기 @babel/core JavaScript based implement (Codegen, Strip Flow) @swc/core (Syntax Lowering) Plugins N-API call sites overheads
52. Rollipop 구현기 - Rust swc_core 기반 구현 - Codegen Babel 플러그인은 SWC Visitor 로 포팅 - Strip Flow, Syntax Lowering 네이티브 Layer에서 구현 추가로 React Compiler, Reanimated Worklets 변환 등 지원
53. Rollipop 구현기 - Rust swc_core 기반 구현 - Codegen Babel 플러그인은 SWC Visitor 로 포팅 - Strip Flow, Syntax Lowering 네이티브 Layer에서 구현 추가로 React Compiler, Reanimated Worklets 변환 등 지원
54. Interfaces Dev Server Bundler Serve Bundles & Sourcemap CLI React Native Middlewares React Native CLI Commands Rolldown Core Serve Assets Programmatic APIs Symbolication Reporter Events Logs SSE MCP Diagnostics & Controls Custom Native Implements React Native Debugger Integration Dashboard DevFrame DevTools
55. react-native.config.js
56. rollipop.config.ts
61. HMR CLI Analyzer Blazing Fast Complete Type Safety DevTools Caching System Full-Featured Dev Server Bundle Optimizations Frontend Ecosystem First Drop-In Metro Replacement React Compiler Easy To Migrate Plugin System AI Friendly
62. Rollipop 적용 성과
63. Rollipop 적용 성과
64. Rollipop 적용 성과 Metro 90s esbuild Rollipop 10s 1.5s
65. GitHub: https://github.com/rollipop-dev/rollipop Docs: https://rollipop.dev All contributions welcome and give me a star!
66. 감사합니다