토스가 꿈꾸는 React Native 기술의 미래
박서진 · 토스 · 토스 기술 블로그
소개
토스 프론트엔드 챕터는 어떻게 React Native 기술을 발전시켜 나갈 예정일까요?
AI 핵심 요약
토스는 WebView의 로딩 지연과 플랫폼별 제약, SSR의 복잡도를 줄이면서 사용자 경험과 개발 생산성을 높이기 위해 React Native를 도입했다. 서비스별 독립성과 빠른 배포를 위해 React Native 화면을 Shared·Service 번들로 나누는 마이크로 프론트엔드 구조를 만들고, ESBuild와 자체 CDN 배포 도구를 활용했다. 혜택 탭 등 여러 제품에서 로딩 시간을 줄이고 WebView보다 React Native 화면이 더 많이 실행되는 단계에 이르렀으며, 2024년부터 정식 기술로 확대하고 있다. 앞으로는 Web과 React Native에서 함께 쓰는 패키지와 플랫폼 개발환경을 발전시키고, 배포 모듈과 AWS 인프라를 오픈소스화하는 것을 목표로 한다.
- WebView의 제약을 해결하려면 렌더링 방식뿐 아니라 배포와 서비스 운영 구조까지 함께 설계해야 한다.
- Shared 번들과 Service 번들을 분리하면 공통 코드와 서비스별 코드를 독립적으로 관리하고 필요한 코드만 로드할 수 있다.
- Metro 대신 ESBuild를 사용해 빌드 시간을 줄이고 Tree-shaking으로 사용하지 않는 코드를 제거했다.
- 카나리 배포와 개인 확인용 배포를 제공하면 서비스별로 변경을 점진적으로 검증할 수 있다.
- React Native 플랫폼을 운영하려면 JavaScript와 iOS·Android 영역을 넘나드는 협업과 상호 온보딩이 중요하다.
비슷한 학습 자료
토스ㅣSLASH 24 - 잃어버린 생산성을 찾아서, React Native로 알아보는 디버깅
SLASH · YouTube
토스ㅣSLASH 23 - 달리는 토스 앱에 React Native 엔진 더하기
SLASH · YouTube
토스ㅣSLASH 22 - 미친 생산성을 위한 React Native
SLASH · YouTube
토스 프론트엔드 챕터가 오픈소스를 통해 꿈꾸는 미래
문동욱 · 토스 기술 블로그
프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다! | EP.9 모닥불
토스 프론트엔드 챕터 · 토스 기술 블로그
토스 프론트엔드 챕터를 소개합니다!
박서진 · 토스 기술 블로그