Authentication & Authorization 패턴을 위한 Token과 첫 진입을 판단하는 DeviceID 등, 앱이 종료되어도 유지되는 데이터를 관리하기 위해 로컬 스토리지를 사용했다. Expo의 경우, 로컬에 데이터를 저장하는 방식이 두가지 존재하는데, 두 저장 방식을 알아보도록 하자! 📍 Async Storage key-value 기반의 데이터를 암호화하지 않고, 저장하고 불러올 수 있도록 하는 라이브러리이다. 설치 npx expo install @react-native-async-storage/async-storage 사용법 AsyncStorage.setItem() , AsyncStorage.getItem() API를 통해 데이터를 저장, 불러올 수 있다. 비동기적으로 동작하기 때문에 P..
expo
❗️ 문제 EAS 빌드 이후 iOS와 Android 테스트 하던 중, iOS에서만 외부 API가 전혀 동작하지 않았다. ( Postman이나 Android에서는 잘 동작했다. ) Sentry로 에러 추적 결과, https://semi-calories.sentry.io/share/issue/d67573a9a86a465e8a7a4f971fe5a156/ AxiosError: Network Error Network Error AxiosError /Users/mac/Projects/Semi-Calories/Frontend/node_modules/axios/lib/adapters/xhr.js handleError handleError(/Users/mac/Projects/Semi-Calories/Frontend/no..
❗️문제 EAS 내부 빌드하여 iOS와 Android 테스트하던 중, Android에서만 외부 API가 전혀 동작하지 않았다. ( Postman이나 iOS에서는 잘 동작했다.. iOS는 앱 제출 심사도 통과한 상태 ) Sentry.captureException(err) 로 에러 추적한 결과, https://semi-calories.sentry.io/share/issue/fcbbd537992e4c229cdb3a05d2fec47e/ AxiosError: Network Error Network Error AxiosError app:///index.android.bundle handleError handleError(index.android) semi-calories.sentry.io 이러한 Axios Erro..
📍 디버깅이란? 개발 단계에서 발생하는 버그의 원인을 찾아내고 수정하는 작업 📍 Expo 환경에서 디버깅 할 수 있는 방법 앱 시작 후 j 눌러 Chrome DevTools로 디버깅 VS Code 확장을 통한 디버깅 Expo Tools (2024.03.06 기준) Expo SDK 49, 50인 경우 Expo Tools에서 오류 (2024.03.07 기준) 해당 오류 수정 React Native Tools Expo 시작된 터미널에서 shift+m 눌러서 React DevTools로 디버깅 개발자 메뉴 react-native-debugger 설치하여 디버깅 📍 Expo Tools Visual Studio Code에서 Expo 프로젝트를 쉽게 관리하고 디버깅하는 데 도움을 주는 확장 프로그램. Expo Go와..
❗️문제 babel-preset 패키지와 @babel/core가 old version이기 때문에 생기는 문제 💡해결 babel-preset-expo Expo 환경이므로 babel-preset-expo를 업데이트 babel-preset-expo란? Expo 애플리케이션을 위한 Babel 프리셋으로, 필요한 Babel 플러그인과 설정을 포함. 최신 JavaScript 문법, React JSX 변환, 클래스 프로퍼티 등을 지원하며, React Native, React, Expo와 관련된 다양한 기능을 지원 // npm npm i babel-preset-expo // yarn yarn add babel-preset-expo // babel.config.js module.exports = function (api..
📍 EXPO React Native 개발을 보다 쉽게 만들어주는 React Native 프레임워크 프로젝트를 설정하고 구성하는 것과 관련한 복잡성을 추상화함으로써 단순화된 개발 경험을 제공 ++ React Native CLI와 차이점 📍 Managed Workflow vs Bare Workflow Managed Workflow Expo가 전적으로 관리하는 개발 환경에서의 작업 방식 개발과 빌드가 훨씬 더 간단해지며, Expo의 많은 기능을 활용할 수 있다. Expo Go 앱을 사용하여 실시간 테스트할 수 있다. Expo 서버를 사용하여 iOS 및 Android 앱을 빌드할 수 있다. Expo SDK를 통해 제공되는 기능만 사용할 수 있다. 네이티브 코드에 접근할 수 없으므로 네이티브 모듈을 직접 추가하거..
📍 React Native Facebook에서 개발한 오픈 소스 모바일 애플리케이션 프레임워크 개발 방식에 따라 React Native CLI, EXPO CLI로 나뉜다. 📍 React Native CLI React Native 앱을 위한 전통적인 방식 프로젝트 구성과 설정에 최대한의 유연성과 제어가 가능하다. 장점 네이티브 모듈을 사용할 수 있고, 다양한 라이브러리를 활용할 수 있다. 앱의 성능, 크기 등을 제어할 수 있도록 빌드 구성을 할 수 있다. 강력한 커뮤니티와 생태계를 가지고 있다. 단점 초기 구성과 설정이 더 많아 까다로울 수 있다. 네이티브 종속성과 빌드 도구를 수동으로 구성해야 한다. (네이티브 지식이 필요) Android 및 iOS에서 앱을 테스트하기 위해 특정 장치가 있어야 한다. (..
Google Play Store 또는 Apple App Store용 앱의 제출 https://appstoreconnect.apple.com https://appstoreconnect.apple.com appstoreconnect.apple.com https://play.google.com/console/u/0/developers/6816120339051254900/app-list Google Play Console 이메일 또는 휴대전화 accounts.google.com EAS - CLI Expo Application Service Expo 와 ReactNative 앱을 위한 클라우드 서비스 EAS Build Google Play Store 또는 Apple App Store용 앱의 제출할 준비가 된 바이..
