네이티브 모듈? 그게 뭔데요?: React Native로 만드는 배민커넥트 앱 두 번째 이야기 #우아콘2024 #우아한형제들
우아콘 2024 우아한형제들 · YouTube
AI 핵심 요약
배민커넥트 앱은 국내 지도 SDK를 React Native에서 충분히 활용할 라이브러리가 없고, 기존 라이브러리의 기능 부족이나 충돌·유지보수 위험도 있어 네이티브 컴포넌트와 모듈을 직접 만들었다. 지도 UI는 네이티브 SDK를 React 컴포넌트 형태로 감싸고 비즈니스 로직은 JavaScript에 모았으며, Android 알림 채널은 별도 네이티브 모듈로 구현했다. 알림 소리가 업데이트 후 재생되지 않는 문제는 리소스 ID가 빌드마다 달라질 수 있다는 점을 찾아내고, 리소스 이름으로 URI를 지정해 해결했다. 직접 구현은 문제 원인을 파악하고 수정할 수 있는 범위를 넓혀 주지만, 플랫폼별 차이와 모듈 생명주기, 트러블슈팅 부담을 함께 고려해야 한다.
- 네이티브 모듈은 네이티브 API를 JavaScript에서 호출하게 하고, 네이티브 컴포넌트는 네이티브 UI를 React 컴포넌트처럼 다루게 한다.
- 네이티브 컴포넌트에서는 Android 액티비티 생명주기와 React Native 화면 전환이 다를 수 있으므로 뷰 생성·소멸과 SDK 정리를 직접 확인해야 한다.
- Android 리소스 ID는 빌드 중 바뀔 수 있으므로 알림 소리 URI를 만들 때 ID 대신 리소스 이름을 사용하면 해당 문제를 피할 수 있다.
- iOS와 Android는 같은 기능도 메서드, 옵션, 초기화 제약이 다를 수 있으니 공통 인터페이스를 설계하기 전에 플랫폼별 동작을 확인한다.
- 기능이 단순하면 직접 모듈을 만들 수 있지만, 범위가 크거나 네이티브 코드 변경이 부담스러우면 패치 패키지나 JavaScript 구현 변경도 대안으로 검토한다.
소개
[WOOWACON2024 세션 다시보기] 👉 세션 설명 ㅤ 배민의 React Native는 '네이티브'와 어떻게 지내고 있을까요? React Native의 주요 기술인 '네이티브 모듈'과 '네이티브 컴포넌트'에 대한 소개와 함께, 배민커넥트 앱의 네이티브 모듈 및 컴포넌트 활용법을 공유합니다. ㅤ 👉 발표자 소개ㅤ 박지성, 웹프런트엔드 개발자
비슷한 학습 자료
컨퍼런스 우아콘 2024
WebRTC를 활용한 안심콜 개발기 #우아콘2024 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 네! 배민도 React Native 해요! 라이더의 안전한 배달을 위해 쉼없이 달려온 배민커넥트앱의 과거와 현재, 그리고 더 나은 앱을 위한 고민까지. 전사 유일의 React Native 프로덕트를 가꾸어 나가는 웹개발자들의 이야기를 들려드립니다.ㅤ ㅤ 👉 발표자 소개 라이더서비스팀 박지성 배민커넥트앱과, 이를 지탱하는 백오피스들의 프론트엔드 개발을 담당하고 있습니다. 지금처럼, 앞으로도 나보다 더 나은 사람들과 지금보다 더 나은 프로덕트를 만들어나가고 싶습니다. 👍 추천 대상 React Native 개발에 관심이 있거나, 이제 막 React Native 개발을 시작한 웹프론트엔드 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan.com 으로 문의주시기 바랍니다.
모바일 앱 개발
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 우아한공방으로 새롭게 단장한 디자인 시스템의 계층 구조와 이를 컴포넌트로 빚어낸 과정을 소개합니다. 그리고 컴포넌트 구현에 집중하기 위해 어떤 개발 환경을 갖췄는지, 운영 과정에서 정답이 없는 문제들을 어떻게 다뤄왔는지 공유드릴게요. 앞으로 더 확장해 나갈 디자인 시스템의 미래도 엿볼 수 있어요. ㅤ 👉 발표자 소개 배민커머스웹프론트개발팀 마광휘 배민커머스웹프론트개발팀에서 23명의 엔지니어가 조화롭게 좋은 프로덕트를 만들 수 있도록 팀 문화 고민과 시스템 아키텍처링을 진행하고 있는 챙김이 입니다. 최근에는 배민 전사의 웹 프론트 미래를 그리고 있어요. 배민커머스웹프론트개발팀 이상현 지속 가능한 디자인 시스템을 만들어나가는 프론트엔드 개발자입니다. 👍 추천 대상 - 사내 디자인 시스템을 운영하는 개발자 - 확장 가능하고 유연한 React UI 컴포넌트 구현에 관심 있는 분 🙋🏻♀️ 세션에 대해 궁금한 점이 ...
프론트엔드 UI/UX
컨퍼런스 우아콘 2022
리액트 네이티브 리팩토링 #우아콘2022 #Day3_함께하고성장하는우리
컨퍼런스 우아콘 2022
수년간 여러 엔지니어들의 손을 거치면서, 배민 사장님용 앱의 소스코드는 일반적인 개발 트렌드에 비해 파편화되고 뒤쳐져 있었습니다. 이제는 소스코드를 업데이트하고 정리해서 최신 라이브러리 버전의 새로운 기능들을 사용해볼 때라고 생각하게 되었는데요, 장단점을 비교해본 끝에 리팩토링 프로젝트를 시작하게 되었습니다. 그 경험을 여러분께 공유드립니다. [발표자 소개] 안 윈(Huan Huynh, Jake) | Woowa Vietnam 후안 윈(제이크)는 2022년 우아한형제들에 입사하기 전까지 약 10년 가량 주로 안드로이드와 플러터를 다루는 모바일 소프트웨어 엔지니어이자 모바일 팀 리더로 경력을 쌓아왔습니다. 제이크는 모바일 클라이언트 엔지니어링 팀에서 리액트 네이티브(React Native) 엔지니어로 근무하고 있으며 입점 업주들에게 유용한 기능을 제공하는 동시에 입점 업주용 앱을 사용하는 사람들에게 최고의 유저 경험을 제공할 수 있도록 노력하고 있습니다. 트루옹 트란(Truong ...
모바일 앱 개발
컨퍼런스 INFCON 2024
React Native와 함께 인프런 앱 새로 만들기│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 React Native와 함께 인프런 앱 새로 만들기 - 권건우, 이문기 왜 React Native를 사용했는지, 플레이어는 어떻게 만들었는지 등 인프런 앱을 만들면서 했던 선택들을 공유합니다. 그리고 React Native와 Native를 함께 다루면서 미리 알았다면 좋았을 문제들을 나눕니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
모바일 앱 개발