초보개발자의 소소한 기록

* react-native-table-component 사용하여 테이블 구현 시 발생한 에러 ERROR Warning: Failed prop type: Invalid prop `textStyle` of type `array` supplied to `Cell`, expected `object`. Cell@http://10.0.2.2:8081/index.bundle? ... in Row (at rows.js:55) in RCTView (at View.js:32) in View (at rows.js:51) in Rows (at Information.js:111) in RCTView (at View.js:32) ... # 해결 - node_modules > react-native-table-component >..

* firebase 설치 없이 간단하게 admob 적용이 가능해졌다. admob에서 app ID, ad unit ID는 생성했다는 전제 하에 정말 간단하게 적용이 가능하다. * reference : https://docs.page/invertase/react-native-google-mobile-ads 1. package 설치 yarn add react-native-google-mobile-ads 2. app ID 등록 - app.json 파일에 app id 등록 후 rebuild # project > app.json { ... "react-native-google-mobile-ads": { "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx", "ios_app_id":..

* android 에서만 앱 이름 변경 시, 정상적으로 빌드 성공 후 실행 시 app crashes without any error log # 원인 - '영문'에서 '한글'로 이름을 변경 했을 때, 휴대폰의 기본 언어 설정이 '한글'로 되어 있지 않으면 앱이 종료됨 # 해결 - strings.xml 변경 시 기본 앱이름은 영문으로 두고, 한글은 폴더를 별도로 추가해준다. # app.json { "name": "FindAnimal", "displayName": "한글 앱이름" } # android > app > srs > main > res > values > strings.xml english app name # android > app > srs > main > res > values-ko > str..

* react-native-webview 모듈 사용 시, dev 모드에서는 정상 호출되지만 release 모드에서 호출 시 에러 발생 # 원인 - android 에서만 에러 현상 발생 - https 호출은 정상이지만, http 호출 불가능 - dev 모드에서는 잘 되지만, release 모드로 앱 빌드 시 호출 불가능 즉, android는 release 모드에서 https 호출이 불가능했다. # 해결 - [android > app > src > main > AndroidManifest.xml] 파일에 android:usesCleartextTraffic="true" 옵션을 추가 ... ...

* 아래 블로그에 상세하게 설명되어 있으나, 몇 가지 추가 진행 사항을 통해 변경 완료함 # package 변경하기 - reference : http://asq.kr/ZWdfTnq1u - 블로그의 설명대로 변경하되, 그 외 기존 package 가 기재되어있는 모든 곳을 변경함 # Project 이름 변경하기 - reference : http://asq.kr/zwN4Cx58 - android 는 간단하게 변경 되었으나, ios 의 경우 아래 추가 절차가 필요함 1) schema 수정 시 Manage Scheme 에서 변경한 후, [Project > Scheme > Edit Scheme] 에서 Build 단계에 존재하는 기존 Targets 을 삭제한 후 새로운 Targets을 등록 ( 기존 Target 이름..

* react-native-webview 사용 시, android 에서만 app 이 죽어버리는 현상 # 원인 - 아래 소스 중 loading 을 추가하는 라인이 들어가지 않으면 정상적으로 ios / android 모두 잘 작동함 - loading 라인 추가 시, ios 는 정상적으로 동작하나, android 에서는 에러 로그 없이 앱이 충돌나서 종료됨 ... return ( {loading ? : null} // this line ); ... # 해결 - 특정 버튼을 클릭하면 navigation 을 통해 webview 를 띄워주는 화면으로 이동하는데, animationEnabled 옵션을 추가하여 해결 ...

* react-native-webview 를 사용하여 웹뷰 구현 시, 해당 웹뷰 내에서 신규 브라우저를 띄우고자 하는 경우 ios 는 default 값이 인앱으로 구현되나, android 는 default 값이 새로운 브라우저를 띄운다. 간단하게 setSupportMultipleWindows 옵션을 변경하는 것으로 인앱구동 가능 # 로딩 제어 관련 유용한 옵션들 - onLoad : Function that is invoked when the WebView has finished loading. - onLoadEnd : Function that is invoked when the WebView load succeeds or fails. - onLoadStart : Function that is invoke..

* rn-fetch-blob 설치 후 사용 시, 아래와 같은 warning 발생 WARN Require cycle: node_modules/rn-fetch-blob/index.js -> node_modules/rn-fetch-blob/polyfill/index.js -> node_modules/rn-fetch-blob/polyfill/Blob.js -> node_modules/rn-fetch-blob/index.js Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. WARN Require cycle: node_modules/rn-fetch-..

* RN에서 크롤링 기능을 구현하면서, 다양한 경우의 오류 해결 과정을 함께 기록함 * euc-kr to utf-8 방법은 맨 아래로 바로 이동 #1. fetch() 를 통해 호출 시, 'https' 프로토콜 및 'utf-8'로 인코딩된 웹페이지는 ios/android 모두 정상적으로 데이터를 잘 읽어왔다. 1) fetch() 를 통해 url 호출 시 응답 값 ... const Crawling = async () => { const res = await fetch(`https://bocoder.tistory.com/`); console.log(res); } ... 2) fetch().text 를 통해 url 호출 시 응답 값 ... const Crawling = async () => { const res..

* fetch() 를 사용해 api 를 호출 시, android 에서는 이상이 없었으나 ios 에서만 에러가 발생 TypeError: Network request failed # 원인 - 확인해보니 다양한 원인으로 발생할 수 있지만, 나의 경우는 호출 url 주소가 http 프로토콜을 사용하고 있어서 발생함 - iOS 9 버전 이후부터 적용된 보안 정책으로, 보안에 취약한 네트워크를 차단시킬 목적이라고 함 # 해결 - Info.plist 파일에서 NSAllowsArbitraryLoads 를 직접 코드를 추가하거나, xcode 에서 항목을 추가하여 해결 ... NSAppTransportSecurity NSAllowsArbitraryLoads NSExceptionDomains localhost NSExcep..