토스: React Native의 미래 💙

토스 기술 블로그에 토스의 적극적인 Native 사용에 대한 글이 올라와서 요약하여 가져와 봅니다 :-) 토스 프론트엔드 챕터는 지난해부터 React Native에 적극적으로 투자하고 있다합니다.

왜 React Native..?

• React Native로 개발하면 Webview로 서비스를 만들 때보다 사용자 경험을 크게 개선할 수 있음. 파일 시스템에서 JavaScript를 읽어오기 때문에 네트워크로 인한 로딩 속도를 제거함

• JavaScript의 실행 속도도 매우 빠른 편임. 매년 두 자릿수 퍼센트로 빨라지고 있고, 로딩 시간도 그만큼 줄어들 것으로 보임

  
  

프론트엔드 개발자의 개발 생산성 개선

• WebViwe에서 생산성을 깎는 문제들을 근본적으로 해결함. Native 랜더러를 사용하고, 높은 자유도가 있어, 여러 제약들을 말끔히 해결할 수 있음. ex) iOS - display:fixed autoFocus 안드로이드 - 버전마다 웹 서비스가 다르게 동작

• 빌드와 배포 속도를 개선함. 배포 단계가 단순해서 정적인 JavaScript 파일 1개만 빌드하고, 업로드하면 배포가 끝남

  
  

코드의 복잡도를 낮춤

• SSR을 이용하면 로딩속도가 개선되지만, 서버와 클라이언트를 넘나드는 보편적인 코드를 작성해야 함. 두 환경을 고려하면, 코드의 복잡도가 상승함 React Native의 경우 클라이언트에서 실행하는 경우만 고려하면 됨

토스의 React Native 개발 환경은..?

• 마이크로 프론트엔드 아키텍쳐

  • 자체적으로 React Native 애플리케이션을 마이크로 프론트엔드 아키텍처로 관리하는 시스템을 만들어서 사용 중. 서비스마다 뷰가 나뉘어 있으며 화면이 독립적으로 실행돼 다른 화면에 영향을 주지 않음. 즉, 필요한 자바 스크립트 파일만 동적으로 로드에서 실행하는 형태.

  • React View를 그리기 위해 Shared 번들, Service 번들을 나눠 순차적으로 실행함. 따라서 일부 사용자들에게 원하는 만큼 배포를 하거나, 나만보는 배포를 할 수도 있음

• ESBuild를 활용한 신속한 배포

  • Metro 번들러는 빌드에 시간이 오래 걸리고 Tree-Shaking이 지원되지 않아 캐시를 리셋하지 않으면 일관적 동작을 보장하기가 어려움 따라서 ESBuild를 이용하여 빌드 시간을 1분 안쪽으로 줄였음

    
    

토스 프론트엔드 : "React Native의 기술은 밝다"

• React Native 애플리케이션은 시간이 갈수록 빨라지고 있다. 스마트폰이 Java Script를 실행하는 속도가 계속 빨라지기 때문!

요즘은 모든 OS에 React Native만을 적용하는 사례들이 많아지고 있는 것 같습니다. 토스도 점차 React Native로 개발하는 사례가 늘고 있다고 하니 참고해 보시면 좋을 듯 합니다!

본 아티클의 원문은 아래에서 보실 수 있으십니다!

https://toss.tech/article/react-native-2024