Jion의 개발일지

오늘은 커스텀 폰트를 적용하는 방법에 대해 알아보겠습니다! 😊 커스텀 폰트는 iOS, Android 별로 설정을 각각 해줘야 합니다. 커스텀 폰트 설정은 적용하는 방법이 간단해서 따라하기 쉬울 거라고 생각합니다. 🌝 목차는 다음과 같습니다. 1. 폰트 다운로드 하기 2. iOS 설정하기 3. Android 설정하기 4. JavaScript 폰트 코드 추가 및 구현 결과 그럼 바로 시작해보겠습니다!!! :) 1. 폰트 다운로드 하기 폰트 다운을 위해 https://fonts.google.com/ 에 접속합니다. 원하는 폰트로 들어가 Download family를 클릭합니다. 2. iOS 설정하기 ios/Fonts 폴더를 만든 후, 다운로드 받은 폰트 파일을 그 안에 복사합니다. 그 후, xcode를 실행하..

오늘은 Release 모드로 APK 파일을 추출하는 방법에 대해 포스팅해보려 합니다! 😊 (Debug 모드로 APK 파일 추출을 원하시는 분들은 이전 게시글들을 참고해주시기 바랍니다.) 안드로이드 앱을 Play Store에 배포하기 위해서는 앱을 Relaese 모드로 추출해야 합니다. 지금 바로...!! Release 모드로 APK 파일을 추출하는 방법에 대해 알아보겠습니다!!! 🤩🤩 1. 안드로이드 서명 키 생성 Release 모드로 앱을 추출하기 위해서는, 안드로이드(Android)용 서명 키(Signing Key)가 필요합니다. 먼저 안드로이드 폴더로 들어갑니다. cd android 아래에 명령어를 통해 안드로이드(Android)용 서명 키(Signing Key)를 발급합니다. keytool -ge..

오늘은 지난 시간에 이어서 APK 파일을 추출하는 두번째 방법에 대해 포스팅 해보려 합니다. 🙂 지금 바로...!! 명령어로 추출하는 방법에 대해 알아보겠습니다~! 🤩🤩 명령어로 추출하기 1. 폴더 추가 프로젝트명/android/app/src/main/assets 폴더가 있는지 확인해 보고, 없다면 만들어 줍니다. 이 곳은 bundle 파일이 저장 될 곳입니다! 2. bundle 파일 생성 프로젝트 터미널에서 아래의 명령으로 번들 파일을 생성합니다. react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle react-..

오늘은 APK 파일을 추출하는 방법에 대해 포스팅 해보려 합니다. 🙂 debug 모드로 APK 파일을 추출 방법은 크게 Android Studio로 추출하는 방법과 명령어로 추출하는 방법 두가지가 있습니다. 먼저 Android Studio로 추출하는 방법에 대해 알아보겠습니다~! 🤩🤩 Android Studio로 추출하기 1. 폴더 추가 프로젝트명/android/app/src/main/assets 폴더가 있는지 확인해 보고, 없다면 만들어 줍니다. 이 곳은 bundle 파일이 저장 될 곳입니다! 2. bundle 파일 생성 아래 명령으로 번들 파일을 생성합니다. react-native bundle --platform android --dev false --entry-file index.js --bundl..

오늘은 Mac으로 React Native 개발 환경 세팅하는 방법에 대해 포스팅해보려고 합니다. 😄 먼저 React Native에 대해 간략히 알아보고, 초기 세팅하는 방법에 대해 소개해 드리겠습니다. 목차 React Native란? Homebrew 설치 Node.js 설치 Watchman 설치 React Native CLI 설치 Xcode 설치 (iOS 설정) Cocoapods 설치 (iOS 설정) JDK 설치 (android 설정) Android Studio 설치 (android 설정) React Native 프로젝트 생성 및 확인 React Native란? React Native는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크입니다. 하나의 프로그래밍 언어로 IOS와 Android 모바일..

🆘 😕 에러명 react-navigation v6 버전을 설치 후, 아래의 warning이 발생하였다. RCTBridge required dispatch_sync to load RNGestureHandlerModule. This may lead to deadlocks ❓ 🧐 원인 react-native (일부) 노드 모듈 패키지를 설치할 때 발생하는 에러로 짐작된다. 📌 😋 해결 ./ios/AppName/AppDelegate.m. 파일 내에 #import "AppDelegate.h". 문 바로 뒤에 다음을 추가한다. #if RCT_DEV #import #endif 참고 https://github.com/facebook/react-native/issues/16376 RCTBridge required dis..

🆘 😕 에러명 VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead. ❓ 🧐 원인 ScrollView와 FlatList를 중첩 사용하여 발생 먼저 ScrollView와 FlatList에 대해 알아보고, 둘을 중첩 사용하면 안 되는 이유에 대해 설명드리겠습니다! ScrollView와 FlatList란? 🧐 * ScrollView : 여러 구성 요소와 보기를 포함할 수 있는 일반 스크롤 컨테이너 * Flat..

에러명 : Execution failed for task ':app:installDebug' java.util.concurrent.ExecutionException: com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: 원인 : Android 에뮬레이터에 설치되어 있는 앱을 또 설치하여 발생 해결 : 에뮬레이터에 설치되어 있던 앱 삭제 후, 앱 재설치 1. 기존에 설치되어 있던 앱 삭제 2. Android 재 실행 react-native run-android

에러명 : Task :app:mergeDebugNativeLibs FAILED 원인 : Android에서 캐시에 생성된 구버전의 데이터와 새롭게 생성된 빌드 데이터가 충돌을 일으켜 발생 해결 : 구 버전의 캐시를 모두 삭제 1. Android에서 gradle의 캐시를 초기화 cd android && ./gradlew clean 2. Android 재 실행 react-native run-android

에러명 : No Permission handler detected 원인 : iOS에서 react native permission 권한을 인식하지 못 해 발생 해결 : 1. appname > ios > Podfile에 해당문 추가 (저는 카메라 라이브러리를 사용하려고 카메라 permission을 부여하였습니다. 권한이 필요한 라이브러리를 path에 맞게 추가하시면 됩니다.) permissions_path = '../node_modules/react-native-permissions/ios' pod 'Permission-Camera', :path => "../node_modules/react-native-permissions/ios/Camera" 2. 권한 라이브러리 설치 npm i react-native-..