728x90 ReactNative14 [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 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] 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] 드랍다운(Dropdown) 사용하기 리액트 네이티브 버전 : "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'}, .. 2022. 11. 18. [RN] 현재 위치의 경도, 위도 가져오기 리액트 네이티브 버전 : "react-native": "0.69.2" 라이브러리를 활용하여 현재 위치의 경도, 위도를 가져와봤다. npm i @react-native-community/geolocation 로 설치하면 "@react-native-community/geolocation": "^3.0.3" 버전이 설치된다. 안드로이드와 iOS 설정을 해줘야 한다. - iOS ios 폴더에서 pod install 후 Info.plist에 NSLocationWhenInUseUsageDescription 을 찾아서 아래 코드를 넣어준다. NSLocationAlwaysAndWhenInUseUsageDescription NSLocationAlwaysUsageDescription - Android andriodMani.. 2022. 11. 13. [RN] AsyncStorage 사용하기 React Native AsyncStorage 사용하기 현재 개발하면서 사용하는데, 자꾸 console로 찍어 보면 이상하게 나와서 사용법을 정리해보려고 한다. 일단 AsyncStorage는 웹에서 사용하는 LocalStorage와 같은 기능을 한다고 생각하면 편하다. 리액트나 리액트 네이티브에서는 상태관리하는 라이브러리들이 있는데, 난 일단 Context를 사용한다. 그리고 로그인 토큰을 보관하기 위해서 AsyncStorage를 사용한다. 상태관리로 하면 앱이 종료되었을 때는 초기화가 되기 때문에 자동 로그인을 위해서 AsyncStorage를 사용한다. 1. 저장 AsyncStorage.setItem('key', value); 자바의 맵 처럼 키, 밸류 방식으로 저장하고 사용한다. 혹시 String 값.. 2022. 11. 6. [RN] Calendars 넣어보기 리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다. 리액트 네이티브 버전 : "react-native": "0.69.2" - 화면에서 달력을 그려보려고 한다. - 직접 만들 수도 있지만, 귀찮으니 사람들이 만들어놓은 라이브러리를 쓴다. - 기본 디자인이 심플하고 마음에 들어서 선택했다.(기능은 거기서 거기) npm i react-native-calendars - 라이브러리를 설치한다. - 코드 작성 { setSelectedDate(day.dateString); }} markedDates={markedSelectedDates} /> - 테마는 원하는 색으로 변경하면 된다. - 사실 github을 참고하는게 제일 좋지만... 그게 귀찮으면 이 코드를 복사해서 사용해도 된다. - 참고 https:.. 2022. 11. 2. 이전 1 2 다음 728x90
