728x90 개발/RN19 [RN] Expo FCM 푸시알림 구현하기 (2) Expo FCM 푸시알림 구현하기! 설정은 여기서![RN] Expo FCM 푸시알림 구현하기 (1) (tistory.com) { const fcmToken = await messagi" data-og-host="devhooney.tistory.com" data-og-source-url="https://devhooney.tistory.com/315" data-og-url="https://devhooney.tistory.com/315" data-og-image="https://scrap.kakaocdn.net/dn/bMAZ1K/hyWg0oeflY/VmbYNkmYu3YeV5Jo4IJip0/img.jpg?width=500&height=500&face=0_0_500_500,https://scrap.kakaocd.. 2024. 6. 4. [RN] Expo FCM 푸시알림 구현하기 (1) Expo FCM 푸시알림 구현하기! 1. 라이브러리 설치npm i expo-notificationsnpm i @react-native-firebase/messaging 2. FCM 토큰 받기 /** * FCM 토큰을 받습니다. */ const getFcmToken = async () => { const fcmToken = await messaging().getToken(); console.log('[+] FCM Token :: ', fcmToken); }; /** * FCM 메시지를 앱이 foreground 상태일 경우 메시지를 수신합니다. */ const subscribe = messaging().onMessage(async remoteMessage => { console.log('.. 2024. 5. 30. [RN] WebView와 Web 통신하기 웹뷰와 웹브라우저 간 통신 방법 알아보기! 1. 웹뷰 -> 웹- RNconst webviewRef = useRef(null);// React Native에서 데이터를 웹뷰로 보내는 함수const sendDataToWebView = (data) => { console.log(data); const serializedData = JSON.stringify(data); // 객체를 문자열로 직렬화 webviewRef.current.postMessage(serializedData);}; - Web// 웹뷰에서 React Native로부터 데이터를 받는 함수window.addEventListener("message", (event) => { const receivedData = JSON.pa.. 2024. 5. 17. [RN] expo eas 관련 명령어 정리 eas 명령어 정리 ! eas login: EAS 계정에 로그인eas build: Expo 앱을 빌드하고 APK 또는 IPA 파일을 생성eas build -p android (안드로이드 빌드)eas build -p ios (iOS 빌드)eas submit: 빌드된 APK나 IPA 파일을 앱 스토어에 제출eas submit -p android (안드로이드 앱 제출)eas submit -p ios (iOS 앱 제출)eas update: 앱 스토어에 업데이트된 버전의 앱을 제출eas update -p android (안드로이드 앱 업데이트)eas update -p ios (iOS 앱 업데이트)eas device:create: 새로운 디바이스(iOS 또는 안드로이드)를 등록eas device:li.. 2024. 5. 9. [RN] expo 앱 테스트 하기 1. eas-cli 설치npm install -g eas-cli 2. expo 가입https://expo.dev/signup Sign Up — ExpoCreate an account for Expo here.expo.dev 3. eas 로그인npx eas login 4. eas 빌드npx eas build:configure 5. eas.json 수정- build 부분만 수정함 "build": { "development": { "android": { "buildType": "apk" }, "ios": { "simulator": true } }, "production": {} }, 6. android 빌드eas buil.. 2024. 4. 25. [RN] WebView 뒤로가기 구현하기 리액트 네이티브 버전 : "react-native": "0.73.2" 지난 포스팅에서 간단하게 웹뷰를 구현했는데 해봤으면 문제를 알 수 있다. 웹뷰 상에서 뒤로가기가 안되고 앱이 꺼져버리는 문제인데, 이를 처리해줘야 한다. 1. 코드 작성 import React, { useEffect, useRef, useCallback } from 'react'; import { StyleSheet, SafeAreaView, BackHandler } from 'react-native'; import { WebView } from 'react-native-webview'; export default function App() { const webviewRef = useRef(null); const backPress = .. 2024. 1. 30. [RN] WebView 구현하기 리액트 네이티브 버전 : "react-native": "0.73.2" 1. 웹뷰 라이브러리 설치! npm install react-native-webview 2. 코드 작성! import React from 'react'; import { StyleSheet, SafeAreaView } from 'react-native'; import { WebView } from 'react-native-webview'; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, }, }); SafeAreaView를 통해 아이폰 노치때문에 가리는것을 막아준다. 끝! 2024. 1. 24. [RN] React Native CLI vs Expo CLI 리엑트 네이티브 개발 시 Expo 사용하느냐 안하느냐 방식의 차이가 있다. 차이점을 알아보자 React Navie CLI 일반적인 React Native 개발 방식은 React Native를 사용하여 네이티브 모바일 앱을 개발하는 프로세스를 말한다. 환경 설정: Node.js 및 npm 또는 Yarn 설치: React Native 개발을 시작하려면 Node.js 및 관련 패키지 관리자 (npm 또는 Yarn)를 설치해야 한다. Android Studio 또는 Xcode 설치: Android 앱을 개발할 때는 Android Studio를, iOS 앱을 개발할 때는 Xcode를 설치해야 한다. React Native 프로젝트 생성: React Native CLI를 사용하여 새로운 프로젝트를 생성합니다. np.. 2023. 11. 5. [RN] 카카오톡 로그인 구현하기 리액트 네이티브 버전 : "react-native": "0.69.2" 카카오 로그인 라이브러리 사용하기 1. 라이브러리를 먼저 설치해준다. npm install @react-native-seoul/kakao-login 프로젝트 폴더 안에 ios 폴더로 이동 한 뒤 아래 명령어로 설치 마무리 pod install 2. 카카오 디벨로퍼에서 키 발급 (1) 내 애플리케이션 클릭 (2) 애플리케이션 추가하기 클릭 - 내용 입력 후 저장 - 네이티브 앱 키가 필요하다. 3. 플랫폼 등록 - 나는 iOS 플랫폼만 등록했다. - 번들ID를 잘 등록해야된다....이거 틀린지 모르고 왜 안되지 고민 2일 했다... - 번들ID는 xcode로 프로젝트명.xcworkspace을 실행한다. - 왼쪽 메뉴에서 프로젝트명을 클릭.. 2023. 1. 20. 이전 1 2 3 다음 728x90
