hooney.log

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..

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('..

웹뷰와 웹브라우저 간 통신 방법 알아보기!        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..

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..

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..

리액트 네이티브 버전 : "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 = ..

리액트 네이티브 버전 : "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를 통해 아이폰 노치때문에 가리는것을 막아준다. 끝!

리엑트 네이티브 개발 시 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..

리액트 네이티브 버전 : "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을 실행한다. - 왼쪽 메뉴에서 프로젝트명을 클릭..

리액트 네이티브 버전 : "react-native": "0.69.2" 드랍다운(Dropdown) 사용하기 라이브러리를 활용하여 드랍다운을 사용해봤다. 웹개발을 할 때는 HTML에서 기본으로 제공하는 건데, 리액트 네이티브는 라이브러리를 설치해서 사용해야했다. npm i react-native-dropdown-picker 명령어로 설치하면 "react-native-dropdown-picker": "^5.4.3" 버전이 설치 된다. - 예시 코드 const [open, setOpen] = useState(false); const [value, setValue] = useState(null); const [items, setItems] = useState([ {label: '보기1', value: '1'}, ..