React & React Native

해당 글에서는 React Native 환경에서 aab 파일을 빌드하는 과정에서 발생하는 오류의 해결방법에 대해 알아봅니다.1) 문제점💡 문제점- 프로젝트를 .aab 파일로 빌드하는 과정 중에 아래와 같은 문제가 발생하였습니다.- 해당 문제점은 Android 앱을 AAB(Android App Bundle) 파일로 빌드하는 과정에서 발생한 오류입니다. - 구체적으로는 'lib/arm64' 디렉토리의 네이티브 아키텍처를 인식하지 못하는 문제가 발생했습니다.Task :app:packageDevReleaseBundle FAILEDFAILURE: Build failed with an exception.What went wrong: Execution failed for task ':app:packageDevRele..

해당 글에서는 reactotron-react-native 라이브러리를 활용하여 모니터링을 하는 방법에 대해 알아봅니다.1) reactotron-react-native💡 reactotron-react-native- React Native 애플리케이션을 디버깅하고 모니터링하기 위한 강력한 개발 도구입니다. - 이 도구는 애플리케이션의 상태, API 요청, Redux 액션, 콘솔 로그 등을 실시간으로 추적하고 분석할 수 있게 해 줍니다. 1. 주요 기능주요 기능설명API 모니터링네트워크 요청과 응답을 실시간으로 추적하고 검사할 수 있습니다.Redux 통합Redux 스토어의 상태 변화와 디스패치된 액션을 모니터링할 수 있습니다.AsyncStorage 검사AsyncStorage의 데이터를 실시간으로 확인하고 수..

해당 글에서는 thecodingmachine/react-native-boilerplate를 활용하여 React Native의 템플릿을 활용하는 방법과 각각의 디렉터리별 구조를 확인합니다. 1) react-native-boilerplate💡 react-native-boilerplate- React Native 애플리케이션 개발을 위한 초기 프로젝트 템플릿입니다. 프로젝트를 최초 생성할 때, 해당 react-native-boilerplate를 활용하여서 기본 틀이 되는 구조를 받아서 구성합니다. GitHub - thecodingmachine/react-native-boilerplate: A React Native template for building solid applications 🐙, using J..

해당 글에서는 디바이스 네트워크 연결 상태 관리를 위해 @react-native-community/netinfo 라이브러리를 활용하여, 특정 페이지에서만 제외하는 방법에 대해 알아봅니다. 💡 [참고] 해당 글을 읽어보기 전에 이전에 작성한 글을 읽어보시면 도움이 됩니다. [RN] React Native 디바이스 네트워크 연결 상태 관리 이해하고 설정하기 : @react-native-community/netinfo해당 글에서는 디바이스의 네트워크 상태가 연결/미연결 인지 확인을 하기 위한 목적으로 @react-native-community/netinfo 라이브러리를 설정하고 사용하는 방법에 대해서 확인합니다.    1) @react-nativadjh54.tistory.com 1) 모든 페이지에서 네트워크..

해당 글에서는 React에서 forwardRef, useImperativeHandle를 이해하고 활용하는 방법에 대해 알아봅니다.1) forwardRef💡forwardRef- React에서 제공하는 고차 컴포넌트(Higher-Order Component)로 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달할 수 있게 해줍니다.- 이는 주로 재사용 가능한 컴포넌트 라이브러리를 만들 때 유용하며, 특히 DOM 요소나 클래스 컴포넌트의 인스턴스에 직접 접근해야 할 때 사용됩니다. forwardRef – ReactThe library for web and native user interfacesko.react.dev [ 더 알아보기 ]💡 forwardRef 선언하는 곳은 부모 컴포넌트인가? 아니면 자식 컴포넌..

해당 글에서는 React Native 환경에서 발생하는 오류에 대해 해결 방법에 대해 알아봅니다.1) 문제점💡 문제점- React Native 프로젝트에서 업데이트 XCode를 통해서 실행을 할때, 아래와 같은 반복적인 오류가 발생하였습니다.- 'folly/system/atfork.h' file not found해당 경우는 Folly 라이브러리가 제대로 설치되지 않았거나 업데이트가 필요한 경우나 프로젝트의 빌드 설정이 올바르지 않은 경우에 발생한다고 합니다.     2) 해결방법💡해결방법- 이를 해결하기 위해 아래와 같은 방법으로 최종 해결을 하였습니다. - XCode 캐시에 대한 문제가 발생한다고 하여 Pod 캐시 초기화 > XCode 캐시 초기화 > Pod 재 설치 과정을 통해서 이를 해결하였습니..

해당 글에서는 React Native 개발 환경에서 XCode를 최신버전으로 업데이트 하였을때, 발생하는 오류중 하나를 해결하는 방법에 대해 알아봅니다.1) 문제점💡 문제점- 최근에 XCode 버전을 업데이트 한적이 있습니다. 그 이후 아래와 같은 오류가 발생하고 있습니다.- 해당 문제점은 TARGET으로 하는 버전이 11.0으로 설정되었는데, 이를 사용하려면 12.0 ~ 17.5.99 버전으로 지정해야 한다는 문제점입니다.- The iOS deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 11.0, but the range of supported deployment target versions is 12.0 to 17.5.99.   2) 해결 방법 ..

해당 글에서는 React Native에서 expo-sqlite를 이용하는 활용 방법 및 데이터베이스 데이터를 GUI 툴을 이용하여 확인하는 방법에 대해 알아봅니다 💡 [참고] 이전에 작성한 글을 참고하시면 도움이 됩니다. [RN] React Native expo-sqlite 이해 및 설정 방법 -1 : 환경 설정 및 DB, 테이블 생성, 기본 트랜잭션해당 글은 Expo-cli 프로젝트(React-native) 내에 데이터베이스로 사용되는 Sqlite에 대한 이해를 하고 환경설정을 위한 연결하기 위한 expo-sqlite 라이브러리를 적용하는 가이드입니다. 💡 필자는 해당adjh54.tistory.com  1) expo-sqlite💡 expo-sqlite- 설치나 설정이 필요하지 않은 내장형 파일 기..

해당 글에서는 expo-sqlite 설치 과정에서 발생하는 문제에 대해 해결방법에 대해 알아봅니다1) 문제점💡문제점- Cannot find native module 'ExpoSQLiteNext', js engine: hermes- What went wrong: A problem occurred evaluating project ':expo-sqlite'.Could not find method useCoreDependencies() for arguments [] on project ':expo-sqlite' of type org.gradle.api.Project. 아래와 같은 환경에서 실행했을 때 에러가 발생함이 확인되었습니다."dependencies": { "expo": "49.0.0", "expo-s..

해당 글에서는 React Native 중 iOS에서 XCode에서 발생하는 오류에 대한 해결방법을 알아봅니다.1) 오류내용💡 오류내용- XCode를 실행하는 중에 Command PhaseScriptExecution failed with a nonzero exit code와 같은 오류가 발생하였습니다.- 상세내용은 아래와 같고 결론적으로는 ‘경로의 문제’ 임을 확인되었습니다.The following build commands failed: PhaseScriptExecution [CP-User]\\ Generate\\ Specs /Users/xxx/Library/Developer/Xcode/DerivedData/tugboat_mobile-fwnvnpozjdbjvgbplpqrxtdpuvme/Bu..