FrontEnd/ReactNative

[RN] 🚫에러일지 - iOS17에서 App Crash 생기는 이유

iOS 17 이상에서 UIGraphicsBeginImageContext()를 시도할 때, 이미지 사이즈가 (0, 0)인 경우 강제종료될 수 있으므로 UIGraphicsImageRenderer를 쓰는 것이 권장된다.문제 패키지: react-native-fast-image, react-native-linear-gradientreact-native-linear-gradient v2.6.2 → v.2.8.3 upgradereact-native-fast-image 는 현재 문제 메서드가 deprecated 되서는 안되는 환경 문제 이슈로 patch-package 사용해서 수정.iOS 내부에서 UIGraphicsBeginImageContext() 사용된 함수 수정

[RN] 🚫에러일지 - exception while building Json A problem occurred starting process 'command ...

m1 혹은 m2 칩 맥에서 빌드 시 발생하는 에러 빌드 충돌을 방지하기 위해 rosseta 설치하기 // 1. 라이센스 동의 필요 softwareupdate --install-rosetta // 2. 라이선스 자동 동의 /usr/sbin/softwareupdate --install-rosetta --agree-to-license

[RN] 🚫에러 일지 - SDK location not found. Define a valid SDK location with an ANDROID_HOME environment variable or by setting the sdk.

말 그대로 SDK 경로를 찾을 수 없어서 발생하며, 주로 맥 -> 윈도, 윈도 -> 맥으로 프로젝트를 옮길 때 자주 발생하는 에러입니다. 안드로이드 스튜디오에 내 프로젝트 디렉터리로 가셔서 local.properties 파일을 한번 찾아보세요! 존재하지 않거나 경로가 잘못되어있을 가능성이 큽니다. 경로가 잘못되어 있다면 내 PC에 맞게 변경해주시면 됩니다 보통 윈도의 경우 c:\Users\'사용자 이름'\AppData\Local\android\adk 그리고 맥의 경우 /Users/'사용자 이름'/Library/Android/sdk sdk.dir=/Users/luna/Library/Android/sdk 이런 식으로 변경해주시면 됩니다.

[ReactNative-Debugging] The linked library 'libPods-xxx.a' is missing one or more architectures required by this target: arm64.

The linked library 'libPods-xxx.a' is missing one or more architectures required by this target: arm64. Build Settings > Architectures로 이동하여 arm64를 추가해주고 다시 빌드하면 해결 가능 arm 64가 아니고 x86_64일 경우에도 같은 방식으로 추가해주면 된다. 출처: https://success206.tistory.com/156 [CaffeLatte의 Programming]

XCode Simulator를 변경하고 싶어요

내 경우에는 react native simulator 실행 시 default 로 iPhone 13 으로 실행이 되었다. 디자이너님께서는 default device가 iPhone 11 Pro가 되길 원하셔서 simulator 변경 방법에 대해서 알아봤다. 터미널을 실행시켜주고 프로젝트 폴더 내에서 xcrun simctl list devices위 명령어를 실행하면 사용 가능한 simulator list를 확인할 수 있다. 내가 원하는 device가 실행 가능한지 먼저 확인해준다. 이제 아래의 명령어를 통해 사용하고 싶은 slmulator로 react native를 실행한다. npx react-native run-ios --simulator="iPhone 11 Pro"이렇게 해주면 같은 프로젝트를 다른 디바이..

React Native 키보드로 세로길이가 바뀌는것을 막고싶어요!

mobile에서는 키보드를 화면에서 사용한다. 키보드가 팝업 될때 ios는 괜찮지만 android는 키보드의 세로 높이에 맞춰서 세로 화면의 길이가 달라진다. 그로 인해 애써 만들어놓은 디자인이 망가지고 하는경우가 있다. 그 문제 점을 해결하는방법은 의외로 간단하다. code change 우선 react-native project 안에서 android 폴더로 들어간다. 그곳에는 java로 작성된 안드로이드 네이티브 언어가 들어가 있다. 다음의 path로 이동! ./android/app/src/main/AndroidManifest.xml다음 파일을 실행하면 xml로 작성된 코드가 보일 것이다. android:windowSoftInputMode="adjustResize"그 안에서 activity 섹션에서 위..

React Navigation Tab Navigator를 사용하고 싶어요

yarn add @react-navigation/bottom-tabsimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; const Tab = createBottomTabNavigator(); function MyTabs() { return ( ( ), tabBarLabel: "홈" }}/> ); } 해당 탭 네이게이션에 아이콘으로 이미지를 넣어주고 싶다면 Image source로 똑같이 넣어주면 가능

앱에서는 브라우저 저장소를 어떻게 사용하나요? React Native로 개발하는 방법! Async-Storage, Debugging Tool

Async-Storage 모바일 앱에는 당연히 브라우저 저장소가 없겠죠? 모바일 개발환경에는 대신에 AsyncStorage가 LocalStorage 대신 사용됩니다. 기존에는 react-native에서 Async Storage를 가져올 수 있었는데요. 현재는 deprecated 되었습니다. 사용을 해도 되지만, 앞으로 업데이트 될 예정이 없다는 뜻입니다. 때문에 react-native docs를 읽어보시면 community package를 사용하라고 되어있는데요. 이 community package 안에 **@react-native-async-storage/async-storage**가 있습니다. 이 패키지는 npm에서도 확인할 수 있습니다. Installation # npm npm install @re..

React Native에서는 어떻게 페이지 이동을 하나요? React Navigation이 있어요!

React-Navigation React Native에서는 앱 내 화면 간 전환을 처리하기 위해 라이브러리로 react-navigation을 사용합니다. React-Navigaton 설치 react navigation 설치 링크 react navigation 설치 명령어 입니다. # npm npm install @react-navigation/native # yarn yarn add @react-navigation/native 또한, react-native-screens와 react-native-safe-area-context가 있습니다. 이 라이브러리는 react navigation을 통해 탐색된 컨테이너를 앱에 노출해주기 위해 사용해야하는 종속 라이브러리입니다. 이것들을 함께 설치해주도록 하겠습니다...

React-Native 작동원리와 WebView, 기본 태그 및 Styled Component

React-Native 작동원리 React Native의 작동원리를 이해하기 위해서 몇 가지 알아야할 것이 있습니다. React Native앱은 크게 두 가지 부분으로 구성되어 있는데요 Native부분과 JS 부분입니다. Native 부분은 Android/iOS Device(Java/Objective-C)가 담당하는 부분으로 UI를 렌더합니다. JS 부분은 React 관련 코드가 실행되는 스레드입니다. Native Bridge Main Thread와 JS Thread는 Native Bridge를 통해 소통합니다. 클라이언트-서버가 통신하는 것과 비슷한데, 각 부분에서 전달되는 정보가 JSON object 형태로 변환되어 전달됩니다. 이 부분에서 전달되는 양이 많아지면 병목현상이 생기면서 앱이 느려지겠죠?..