Firebase Analytics는 사용자들이 앱을 어떻게 사용하는지, 어떤 기능이 인기 있는지, 앱 사용 중 어떤 행동들이 자주 일어나는지 등을 알 수 있게 해주는 도구입니다. 이 데이터를 기반으로 앱을 개선할 수 있고, 사용자 경험을 더 좋게 만들 수 있습니다.앱을 운영하면서 "사용자가 내 앱을 어떻게 사용할까?"라는 궁금증이 들 때, Firebase Analytics가 큰 도움이 됩니다. 예를 들어, "어떤 화면을 오래 보고, 어떤 버튼을 자주 클릭하는지" 등을 알 수 있습니다. 그래서 이 데이터를 통해 앱을 더 효과적으로 개선할 수 있게 됩니다. 1. Friebase/app, Firebase/analytics 설치https://rnfirebase.io/#install-react-native-fir..

Firebase Analytics는 사용자들이 앱을 어떻게 사용하는지, 어떤 기능이 인기 있는지, 앱 사용 중 어떤 행동들이 자주 일어나는지 등을 알 수 있게 해주는 도구입니다. 이 데이터를 기반으로 앱을 개선할 수 있고, 사용자 경험을 더 좋게 만들 수 있습니다.앱을 운영하면서 "사용자가 내 앱을 어떻게 사용할까?"라는 궁금증이 들 때, Firebase Analytics가 큰 도움이 됩니다. 예를 들어, "어떤 화면을 오래 보고, 어떤 버튼을 자주 클릭하는지" 등을 알 수 있습니다. 그래서 이 데이터를 통해 앱을 더 효과적으로 개선할 수 있게 됩니다. 1. Firebase/app, Firebase/analytics 설치https://rnfirebase.io/analytics/usage#installat..

앱을 구현하다 보면 다른 앱으로 연결을 해야 할 때가 있습니다.1. 전화 / 문자2. 인스타그램 프로필 / 페이스북 페이지 열기3. 지도앱으로 길찾기4. 카카오톡으로 공유하기 1. Linking그때 Expo에서 사용하는 메서드가 Linking입니다.https://reactnative.dev/docs/linking Linking · React NativeLinking gives you a general interface to interact with both incoming and outgoing app links.reactnative.dev사용법은 간단합니다. 특정 웹 페이지를 열고 싶다면 아래와 같이 작성하면 되고Linking.openURL("https://www.google.com")앱의 설정 페이..

본 포스팅에서 다뤄볼 것1. Firebase FCM2. FCM 서비스 계정 키 얻기3. FCM 서비스 키 얻기4. Expo, FCM push token 얻기5. push 알림 채널 및 설정6. 포그라운드 알림 설정7. 포그라운드 알림 처리8. 알림 클릭 처리 및 데이터 담아 보내기9. 프로덕션 배포를 위한 EAS 설정 FCM 푸시 알림 소개에 앞서 Expo 푸시 알림이 궁금하신 분들은 아래 링크의 공식문서를 확인하세요.https://docs.expo.dev/push-notifications/push-notifications-setup/ Expo push notifications setupLearn how to set up push notifications, get credentials for develo..

본 포스팅에서 다뤄볼 것1. expo google map 구현2. 지도 초기 위치 (고정/현재위치)3. 현재 위치 표시4. 현재 위치 이동 버튼 (커스텀)5. 지도 이동 시 동작 (예: 현재 위치 재검색)6. 지도에 마커 표시 (커스텀)7. 마커 선택 시 말풍선(callout) 표시 (커스텀)8. 검색 리스트 선택 시 해당 위치로 이동+마커+말풍선 1. expo google map 구현https://docs.expo.dev/versions/latest/sdk/map-view/ MapViewA library that provides a Map component that uses Google Maps on Android and Apple Maps or Google Maps on iOS.docs.expo.de..

1. react-native-google-adsexpo 앱에 google admob을 추가할 때 expo-ads-admob 라이브러리를 사용했지만, Expo SDK 46을 기준으로 더 이상 지원하지 않습니다.현재 포스팅일(2024.10) 기준 Expo SDK 버전은 51입니다.@Expo Versionhttps://github.com/expo/expo-ads-admob GitHub - expo/expo-ads-admobContribute to expo/expo-ads-admob development by creating an account on GitHub.github.com 공식 문서에서 추천하는 react-native-google-mobile-ads 라이브러리를 사용할 것입니다.https://githu..

지난번에 gesture handler, reanimated 라이브러리를 사용해 top sheet를 직접 구현해 보았는데, 오늘은 top sheet가 확장/축소 됐을 때 다른 컨텐츠를 보여주고 하단에 자연스럽게 스크롤이 생기게 적용했다. 1. 컨텐츠 배치top sheet 아래 부분에 메인 컨텐츠가 표시되어야 하므로 Section 컴포넌트를 ScrollView로 묶어주었다.   현재 상태(top sheet가 축소된 상태)에서는 Section에 스크롤이 생기지 않는다.하지만 확장되면 늘어난 top sheet의 높이만큼 스크롤이 생긴다.    2. 확장/축소 컨텐츠위 사진처럼 서로 다른 컨텐츠를 자연스럽게 변환하기 위해 몇 가지 기능을 추가해야 했다. 2-1. useSharedVa..

회사에서 진행하는 Kotlin 앱을 React Native로 컨버팅 하는 프로젝트 진행 중 기획 단계가 끝나고 어떤 라이브러리를 사용할지 설계 중이었다. 기존 앱의 메인 페이지에는 상단에 드래그 가능한 Top Sheet가 구현되어 있는데, 열심히 찾아보아도 RN에선 Botton Sheet 라이브러리만 있을 뿐 원하는 Top Sheet 라이브러리는 없었다. # 가장 많이 사용하는 Bottom Sheet 라이브러리https://ui.gorhom.dev/components/bottom-sheet/ React Native Bottom Sheet | Gorhom UIA performant interactive bottom sheet with fully configurable options 🚀ui.gorhom.d..

그동안 React로 CSR 방식의 프로젝트만 구현했었는데, SSR 방식을 알아보던 중 React 문법을 사용할 수 있는 Next.js를 직접 사용해 보면서 어떤 차이점이 있는지 알아보고 싶어 간단한 애플리케이션을 구현해보았다. 1. 애플리케이션 생성https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.jsCreate a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.nextjs.org기존에 React로 생성할 때 CRA(create-reac..