React Native 66

[React Native / iOS 에러해결] 시뮬레이터 실행 에러 Unable to find a destination matching the provided destination specifier

1. 에러 상황 시뮬레이터 실행 중 위 에러가 발생했습니다. 에러 원인은 Xcode에서 설정한 iOS버전을 실행시킬 수 있는 시뮬레이터가 없어서 그렇습니다. 2. 에러 해결 시뮬레이터를 기동해보면 상단에 iOS 버전이 적혀있습니다. Xcode에서 프로젝트를 실행하고 좌측에 프로젝트명 클릭 > General 탭 > Deployment Info 메뉴의 iOS 버전을 시뮬레이터에 적힌 버전과 같거나 아래버전으로 설정합니다.

React Native/Error 2022.01.12

[React Native / iOS] iOS 14이상에서 추적 요청 팝업 띄우기 (일부 앱이 Apple의 SKAdNetwork를 사용하도록 구성되지 않았습니다 해결)

안녕하세요. 이번 포스팅에서는 iOS의 추적요청 동의를 받는 방법을 알아보겠습니다. iOS 14 이상에 광고를 추가하거나 사용자의 활동을 수집하기 위해서는 동의를 받아야 합니다. 제가 개발중인 앱에도 구글 애드몹 광고가 붙어있는데, 구글 애드몹을 추가할 때에도 추적 요청 팝업을 띄워야 한다고 하네요. 이렇게 경고 알림아 떴습니다. 그럼 바로 시작해볼게요! 0. 조건 Google Mobile Ads SDK 가 7.64.0 버전 이상이어야 합니다. 1. npm 설치 아래 코드를 입력해 관련 라이브러리를 설치합니다. npm install react-native-tracking-transparency cd ios pod install 2. info.plist 수정 info.plist에 아래 코드를 추가해주세요...

React Native/IOS 2022.01.12

[Firebase / firestore] 파이어스토어 collection, doc 기본 구조, 개념, 코드

안녕하세요. 이번 포스팅에서는 firebase의 firestore에서 컬렉션, 문서를 추가하는 방법을 알아보겠습니다. firestore는 NoSQL의 데이터베이스로써 key-value 형태의 데이터베이스를 제공하고 있습니다. 그리고 파이어스토어에서 디비 구조를 만들기 위한 핵심개념이 컬렉션(collection)과 문서(doc) 인데요. 공식 문서는 여기를 참조하시면 됩니다. 컬렉션? '폴더' 라고 생각하시면 됩니다. 데이터베이스들이 모여있는 뭉텅이, 하나의 스키마와 비슷합니다. 문서 폴더 안에 저장된 낱개의 정보입니다. 컴퓨터의 폴더 구조에 비교하면 이해가 조금 쉬울 것 같습니다. 유저의 정보를 저장하는 User라는 폴더(컬렉션)이 있습니다. 그리고 그 폴더 안에는 유저에 대한 실제 데이터가 적혀있는 한..

[React Native / Android 에러 해결] app:packageDebug FAILED

1. 에러 상황 firestore라이브러리 도입 이후에 packageDebug 에러가 발생했습니다. 찾아보니 위 에러는 다양한 이유에서 발생하는 것 같습니다. 에러 코드중 Waht went wrong을 보면, 저의 경우에는 heap space로 인해서 발생한 것으로 보입니다. 2. 해결 방법 android/app/src/main/AndroidManifes.xml 파일에서 태그 안에 아래 코드를 추가합니다. android:largeHeap="true" 이런 식으로 말이죠 만약 위에 방법이 안돼면 아래 링크를 따라해보세요 :) https://rnfirebase.io/enabling-multidex 참조 https://github.com/facebook/react-native/issues/6799

React Native/Error 2022.01.11

[React Native 에러 해결] 페이스북 로그인 에러: App ID not found. Add a string value with your app ID for the key FacebookAppID to the Info.plist or call [FBSDKSettings setAppID:].

1. 에러 상황 firebase를 통해 facebook로그인 기능을 개발하던 중에 App ID not found 에러를 만났습니다. info.plist에 분명히 추가했는데 왜 없다고 하는거야!!! 2. 해결 방법 라이브러리 readme에 해당 에러에 대한 해결법이 적혀있네요! https://github.com/thebergamo/react-native-fbsdk-next#installation 위 링크로 들어가보면 아주 명확 깔끔한 해결법이 적혀있습니다! AppDelegate.m에서 아래 코드를 추가하면 해결됩니다. [[FBSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOpt..

React Native/Error 2022.01.11

[React Native 에러 해결] Invariant Violation: Tried to register two views with the same name RNAdMobBannerView

1. 에러 상황 앱에 구글 애드몹 위해 2개의 라이브러리를 테스트하며 설치/삭제하던 중 위 에러를 만났습니다. 구글링을 해보니 외부 라이브러리를 쓰시는 분들께서 종종 만나는 에러로 보입니다. 2. 해결 방법 여러 방법이 있는 것 같습니다. 그 중에서도 저는 npm dudpe 를 통해 해결했습니다. (참조 링크) 지금까지 npm 명령어는 npm init / npm start / npm run android 이 정도만 써왔었는데.. 저건 뭘까...! 해서 찾아보니, 중복된 패키지들을 정리해주는 명령어라고 합니다. 가끔 사용해주면 용량도 줄어든다고 하네요!

React Native/Error 2022.01.11

[React Native / Android 에러해결] app:mergeDebugJavaResource, app:mergeDebugNativeLibs

1. 에러 상황 react-native-firebase/firestore 라이브러리를 설치하고 안드로이드 앱을 실행하니 아래의 에러가 발생했습니다. React Native Firebase의 공식 문서를 보면 아래처럼 app:mergeDexDebug 에러가 발생하면 링크를 참조해 해결하라고 알려줍니다. mergeDexDebug는 아니지만 일단 따라해봤습니다. 역시! 해결되지 않았습니다..ㅎㅎ 2. 해결방법 1) 안드로이드 캐시 삭제 https://lonelychicken.tistory.com/2 위 블로그를 보고 캐시 삭제를 해보았습니다. 안드로이드 스튜디오에서 프로젝트를 열고, File > Invalidate Cache를 눌러줍니다. 결과: 아쉽게도 제 에러는 해결되지 않았습니다 ㅠㅠ 2) app/bui..

React Native/Error 2022.01.10

[React Native / Android 에러 해결] INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package signatures do not match previously installed version; ignoring!

1. 에러 원인 테스트하려는 기기에 설치된 앱과 테스트하려고 실행한 앱의 signature가 맞지 않아서 그렇습니다. 제 경우, 설치된 앱은 플레이스토어에서 다운받은 앱이었습니다. 2. 해결 방법 설치된 앱을 삭제하고 다시 실행시키면 테스트앱이 잘 설치될에요 :)

[React Native] __DEV__ 개발 모드 활성화

개발 모드와 실제 서버와 구분해서 테스트해야할 때가 종종 있습니다. 저의 경우, 개발 모드에서 애드몹의 실제 광고 ID를 갖고 테스트하면 광고계정이 삭제되기때문에 테스트용 ID를 넣어줘야 하는데요. 개발할때 바꾸고, 출시용으로 번들 압축할 때 바꾸고하는게 여간 귀찮은 일이 아니었습니다. React Native에는 기본적으로 __DEV__ 를 입력하면 개발 모드를 true, false값으로 반환해줍니다. 따로 라이브러리를 import하거나 선언할 필요 없이 사용하고 싶은 곳에 __DEV__ 를 입력해주면 돼요. 개발 모드는 안드로이드&iOS 시뮬레이터, usb 연결한 실제 기기일때 true값을 반환해줍니다. 그리고 앱 번들로 제출한 배포버전에서는 false로 됩니다. 간단한 예시로 아래 코드처럼 테스트해보..

[React Native / Android] 안드로이드 뒤로가기, BackHandler

안녕하세요. 이번 포스팅에서는 안드로이드 뒤로가기 버튼에 대한 이벤트 핸들러를 다뤄보겠습니다. 저희 앱은 메인 화면에서 뒤로가기를 누르면 '앱을 종료할까요?' 라는 모달 팝업이 뜨는데요. 이번에 로그인 페이지를 새롭게 추가하니까, 로그인 페이지에서 뒤로가기를 눌러도 앱 종료 모달이 뜨는거 아니겠습니까? 메인화면에서 로그인 페이지로 이동했으니 스택이 쌓였고, 로그인페이지에서 뒤로가기를 누르면 다시 이전 스크린으로 가야 정상인데 말이죠. 이번 포스팅에서는 안드로이드 뒤로가기 버튼인 Backhandler 이벤트를 사용하는 방법과, 최상단 스크린이 아닌 곳에서는 뒤로가기가 되도록 하는 법을 알아보겠습니다. 1. BackHandler 사용법 아래 코드를 import 합니다. import {BackHandler} ..

[React Native] Firebase auth와 애플 로그인 연동하는 방법

안녕하세요. 이번 포스팅에는 firebase auth에 apple 로그인을 연동하는 방법을 알아볼게요. 2020년 4월부터 IOS 앱에 소셜로그인(구글, 페이스북, 카카오톡, 네이버, 트위터 등) 기능을 추가하려면 "반드시" 애플 로그인도 추가해야합니다. 제가 운영중인 앱(바로보카)도 소셜로그인 기능이 있어서 애플 버튼도 추가해주었습니다. 저는 아래 2개의 공식문서를 보면서 진행했어요. 언제나 그렇듯이, 공식 문서가 있다면 가장 먼저 공식 문서를 읽는게 좋습니다! 공식문서에 가장 최신 방법이 정확하게 나와있어요 :) React Native Firebase Apple Login 공식문서 > RN 애플 로그인 라이브러리 > 1. 환경설정 1단계 : 선행조건 확인 라이브러리 깃헙 사이트에 애플로그인 버튼 작업..

React Native/IOS 2022.01.09

[iOS] 애플 로그인을 위한 초기 개발환경 세팅

안녕하세요. 현재 서비스중인 앱에 애플 로그인 기능을 넣기 위한 초기 개발환경 세팅을 진행합니다. 저는 React Native로 개발을 진행중이며, 애플 로그인 라이브러리 깃헙 사이트의 가이드를 보고 따라했어요. RN이 아닌 Object-c , swift, flutter등 다른 언어도 개발셋팅은 똑같습니다 :) 1. Xcode 세팅 프로젝트 폴더에서 Xcode를 실행하고, Signing & Capabilities > +Capability > sign in with apple 을 따라 진행해주세요. 그럼 아래처럼 Sign in with Apple이 추가됩니다. 만약 추가가 안되고 에러가뜬다면 애플 개발자 등록이 안된 것이니 먼저 개발자등록(결제)를 해주셔야 합니다. 2. 애플 개발자센터 세팅 1) 애플 개..

React Native/IOS 2022.01.09

[Xcode] iOS 버전 설정하는 방법

안녕하세요. 앱에 애플 로그인 기능을 추가하기 위해서는 iOS 버전을 13 이상으로 설정해주어야 합니다. 1. project/ios 폴더에서 Xcode를 실행해주세요. 2. 좌측에 프로젝트명을 클릭하고 General 탭에서 빨강박스 부분을 눌러 iOS 버전을 변경해주면 됩니다! 3. 끝! 앱 홍보 RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명 가입중!) 아이폰> ‎캐시보카 - 돈버는 영단어 앱테크 ‎단어를 맞추면 1캐시가 적립돼요. 적립된 캐시는 네이버 포인트로 전환할 수 있어요. apps.apple.com RN로 만든 주식, 코인 물타기 계산기, 수익률 계산기 앱 안드로이드> 아이폰> UN인턴이 만든 영단어 퀴즈앱 안드로이드> 아이폰>

React Native/IOS 2022.01.09

[React Native/IOS] CompileC /Users/juzero/Library/Developer/Xcode/DerivedData/project-hbkrudqxtxdjkbcoxpmydzixlzqq/Build/Intermediates.noindex/project.build/Debug-iphonesimulator/project.build/Objects-normal/x86_64/AppDelegate.o /Users/juzero/project/iO..

1. 에러 상황 facebook 로그인기능을 구현하던 중에 loginManger 부분에서 에러를 만났고, 해결하는 과정에서 포스팅 제목에 있는 또다른 에러를 만났습니다. 에러를 많이 만나니 혼자 개발해도 외롭지 않아요. 페북 로그인 버튼이 작동하는 것만 보고 자려고했는데... 에러랑 놀아주느라고 벌써 잘시간이 훌쩍 넘어버렸습니다 ㅠ 처음에는 facebook sdk 적용 과정에서 잘못한 부분이 있는 줄 알고 하나씩 다 다시 훑어봤어요. 한두시간은 거기에 매달렸지만.. 찾지 못했습니다. 2. 해결 방법 시도 1) dody님의 블로그 참고 https://velog.io/@dody_/RN-에러노트-The-following-build-commands-failedCompileC-UsersdodyLibraryDeve..

React Native/Error 2022.01.09

[React Native] Facebook SDK 공식 라이브러리 업데이트 중단

안녕하세요. facebook에서 공식으로 지원하고 있던 RN 라이브러리가 더이상 업데이트 되지 않습니다. 아래 링크의 readme를 읽어보면 업데이트 중단된 것을 알 수 있고, 가장 최근 release가 2020년 11월 24일입니다. https://github.com/facebookarchive/react-native-fbsdk GitHub - facebookarchive/react-native-fbsdk: A React Native wrapper around the Facebook SDKs for Android and iOS. Provides acce A React Native wrapper around the Facebook SDKs for Android and iOS. Provides access..