본문 바로가기

react native5

Expo 알림(Notification) 구현하기 Expo 알림(Notification) 구현하기📍구현 목표- 앱 실행 시 위치 및 알림 권한 요청- 하루에 세 번 운동 알림 보내기 (오전 10시, 오후 2시, 저녁 8시)- (테스트용) 즉시 알림을 보내는 테스트 버튼1. expo-notifications 설치npx expo install expo-notifications2. 앱 실행 시 권한 요청시작 화면에서 권한 요청을 해야한다! 기존코드 위치 권한 아래에 알림 설정 코드를 넣었돠.Notifications.setNotificationHandler({ handleNotification: async () => ({ shouldShowAlert: true, shouldPlaySound: true, shouldSetBadg.. 2025. 2. 25.
Expo 앱 배포하기(웹 링크 + Expo QR 코드) Expo 앱을 배포하고 싶어서 여러 가지 방법을 찾아봤는데, Apple Developer 계정이 12만 9천 원이라 너무 비쌈,, 🥲 그래서 앱스토어에 올리지 않고 웹 링크와 QR 코드로 배포하는 방법을 시도해봤다...!웹 링크로 Expo 앱 배포하기🌐 npx expo publish 가 기존 방법이었는데 더 이상 지원하지 않아 EAS (Expo Application Services) 를 사용해야한다!https://expo.dev/eas Expo Application Services (EAS)Deeply integrated cloud services for Expo and React Native apps, from the team behind Expo.expo.devhttps://docs.expo.de.. 2025. 2. 15.
react native에 kakao map 연동하기(feat. 현재 위치 띄우기 + 키워드 검색) 🗺️react native에 kakao map 연동하기(feat. 현재 위치 띄우기 + 키워드 검색)1. 아래 카카오 콘솔에 접속해 애플리케이션 추가하기https://developers.kakao.com/console/app2. 카카오맵 ON 해주기3. 앱 키에서 JS 키 저장해두기.env파일에 넣어줄거임!4. 필요 라이브러리 설치하기(웹뷰 & dotenv)전에 아래 명령어로 웹뷰 라이브러리를 설치하자.pnpm add react-native-webview 그리고 Expo가 기본적으로 .env 파일을 지원하지 않기 때문에, react-native-dotenv와 같은 패키지를 사용해야 한다...pnpm add react-native-dotenv 위 명령어 설치후 env파일에 아까 위에서 저장한 JS키를 넣.. 2025. 2. 10.
React Native에 React Query 적용하기 React Native에 React Query 적용하기React Query란?React Query는 서버 상태 관리 라이브러리로 아래와 같은 기능을 제공한다!데이터 페칭, 캐싱, 동기화, 업데이트 관리네트워크 요청 상태(로딩, 에러, 성공) 추적서버 데이터 캐싱 및 리패칭 최적화이번 프로젝트에서 회원가입 기능을 구현하면서, React Query를 도입했는데 연습용으로 사용해봤다. React Query는 서버와의 비동기 통신을 효율적으로 관리하고, 상태 관리가 복잡하지 않게 해주는 도구로 잘 알려져 있다. 기존에는 서버와의 비동기 통신을 처리하기 위해 fetch나 axios를 사용했었지만, React Query는 비동기 상태를 자동으로 관리해줘서 상태 변화에 따른 처리 로직을 더욱 깔끔하게 작성할 수 있었.. 2025. 2. 8.
React Native와 Expo로 간편하게 앱 개발하기 React Native와 Expo로 간편하게 앱 개발하기❓왜 ExpoReact Native를 사용해 모바일 앱을 개발할 때, Expo는 특히 개발 초기 단계에서 많은 장점을 제공하는 툴이다. 내 개발 환경은 Windows이고, 테스트용으로 아이폰을 사용해야 하는 상황이라, 별도의 복잡한 설정 없이 바로 프로젝트를 시작할 수 있는 Expo를 선택했다. Expo는 빠르게 앱을 실행하고 실시간으로 테스트할 수 있어 매우 유용하다. Expo Go 앱을 통해 모바일에서 바로 변화를 확인할 수 있기 때문에, 코드 작성 후 앱을 다시 빌드하거나 재시작하는 번거로운 과정을 크게 줄일 수 있다. 또한, Expo는 파일 기반 라우팅을 지원하는 점에서 Next.js의 App Router와 유사한 구조를 가지고 있어, 처음 .. 2025. 2. 4.