기본 콘텐츠로 건너뛰기

React Native 개발 도전 - 생성된 프로젝트에 Firebase 연동하기 (2)

+


개발장비 - mac book air

이전 블로깅한 내용을 통해 React Native 기본 개발환경을 구축했을 것이다
1강 : React Native 개발 도전 - 개발환경 구축 부터 프로젝트 생성 및 빌드까지 (1)

이제 Backoffice 역할을 해줄 Firebase를 연동하는 내용을 기록해보려한다

아래 홈페이지 내용을 기반으로 원샷에 구축할수있게 다시 기록했다
https://rnfirebase.io/ (리액트 네이티브 파이어베이스 공식홈페이지)

(저기 보고 따라하다가 다섯번 정도는 개발환경 구축만 하고.. 재시도..재시도... 하.. )


0. Firebase 프로젝트 생성

 - 아래 주소로 이동
https://console.firebase.google.com/

 - 우측상단 "콘솔로 이동" 클릭
 - 파이어베이스 콘솔화면에서 "프로젝트 추가" 클릭
 - 프로젝트 생성
 - 좌측상단 "Project Overview" 우측에 톱니바퀴 버튼 클릭 > 프로젝트 설정 클릭

 - IOS 앱 추가 진행 후 GoogleService-Info.plist 다운로드
 - Android 앱 추가 진행 후 google-services.json 다운로드
*** 앱 추가시 "IOS번들아이디" = "Android 패키지 이름"은 동일하게 하자
보통은 com.회사명.프로그램명, kr.co.회사명.프로그램명 과같은 식으로한다



1. IOS 파이어베이스 연동

 - 맥에서 터미널 실행후 프로젝트 경로로 이동
1강에서 생성한 프로젝트 폴더가 있을것이다
예상되는 경로는.. /Users/{username}/myapp 정도 ?

 - 아래 명령 수행
npm install --save react-native-firebase

 - 다운받은 GoogleService-Info.plist 파일은 프로젝트폴더/ios/앱이름/  하위에 저장

 - ios 디렉토리에 있는 myapp.xcodeproject 를 더블클릭해서 xcode 실행 

 - 저장했던 GoogleService-Info.plist 파일을 xcode 의 Info.plist 가 있는 같은경로에 add

 - 아래 이미지에서 보여지는것처럼 타겟이 여러게 있을탠데 tvOS, tvOSTests에 해당하는것들은 우클릭후 제거해주자 


 - AppDelegate.m  open 

 - 아래 코드 작성
#import <Firebase.h>

didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 함수 안에 
[FIRApp configure]; 작성 (주의 : RTCview 관련 내용보다 위에 작성해야함)

 - xcode 종료

 - 터미널을 열고 아래위치에 해당하는 경로로 이동
cd /Users/~~/프로젝트명/ios/

 - pod init  수행
  : Podfile 생성됨

 - Podfile 이 생성되어있을것이다, vi Podfile 명령으로 파일을 열고 아래내용 작성 
platform :ios, '9.0'  <<< # 으로 주석처리되어있을탠데 주석해제
pod 'Firebase/Core' <<< 가장 하단에 아래 명령줄을 추가

 - /Users/~~/프로젝트명/ios/ 경로에서 pod install 명령 수행
  : 프로젝트명.xcodeproj 외에 프로젝트명.xcworkspace 가 생겼을것이다 앞으로는 프로젝트명.xcworkspace로 열도록 하자

- 경로 이동
cd /Users/~~/프로젝트명/

- 아래 명령 수행
react-native link react-native-firebase

위 명령 수행결과는 아래와 같다 



2. Android 파이어베이스 연동

 - google-services.json 파일을 android/app/ 경로 아래에 저장
 - android studio 실행 (당연히.. android 디렉토리를 오픈해야겟죠?)

- android/build.gradle에 아래 내용 작성
buildscript {
  // ...
  dependencies {
    // ...
    classpath 'com.google.gms:google-services:3.1.2'
  }
}

- android/app/build.gradle 맨 아랫줄에 아래내용 작성
apply plugin: 'com.google.gms.google-services'

- android/app/build.gradle에 아래내용 작성
dependencies {
  // This should be here already
  compile(project(':react-native-firebase')) {
    transitive = false
  }

  // Firebase dependencies
  implementation "com.google.firebase:firebase-core:12.0.0"

 -   android/gradle/wrapper/gradle-wrapper.properties 파일에서 gradle-4.4-all.zip 로 그래들버전 업
 -  android/build.gradle 파일을 열고 아래와같이 google() 추가
buildscript {
    repositories {
        jcenter()
        google()  // <-- Check this line exists
        // ...
    }
    // ...
}

 -  android/build.gradle 파일을 열고 아래내용 작성 (기존내용을 3.1.0으로 버전업)
classpath 'com.android.tools.build:gradle:3.1.0'

 - android/app/build.gradle 파일을 열고 buildToolsVersion 을 27.0.3 으로 수정 

 - android/app/build.gradle 파일을 열고 아래내용에 해당하는 compile를 implementation으로 수정
compile(project(':react-native-firebase')) {
    transitive = false
}
implementation(project(':react-native-firebase')) {
    transitive = false
}

+ 추가적으로 android/app/build.gradle 파일의 dependencies 내에 compile를 모두 implementation로 수정 

 -  android/app/build.gradle 에 추가한 아래와같은 내용들의 버전을 12.0.1 로 수정
implementation "com.google.firebase:firebase-core:12.0.1"

 - android/build.gradle 파일에 아래와같이 google() 추가 
allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        // -------------------------------------------------
        // Add this below the existing maven property above
        // -------------------------------------------------
        google()
    }
}

 - android/app/build.gradle 파일에서 아래 내용과 동일하게 수정
compileSdkVersion : 26
buildToolsVersion : 27.0.3
minSdkVersion : 16
targetSdkVersion 22
implementation "com.android.support:appcompat-v:26.1.0"

이후 android studio 에서 pakage id 관련 오류가 난다 
나같은 경우는
com.cheonbrave.myapp 라고 지정해서 google-service.json 을 만들었지만
react-native 프로젝트는 com.myapp 로 지정되어있기 때문에 
ctrl+shift+f 명령으로 com.myapp 을 검색해서 
몇몇 패키지 아이디에 해당하는 영역에 대해 com.remember -> com.ersoft.remember 로 수정했다
수정 경로
 : app/BUCK - 2곳
 : remember/BuildConfig.java
 : app/build.gradle

 - build > clean project 수행
 - build > rebuild project 수행

 - 이후 에뮬레이터에 올려보려고 run 을 하면 
java.io.IOException ; Failed to find byte code for com/google/firebase/storage/StreamDownloadTask$StreamProcessor 오류 발생
위 오류는 아래 내용과 같이 android studio tools 3.1.0 버전에서 이미 알려진 오류라고 하며 
해결방법은 Instant Run 을 꺼야한다고 함
6) When running your app from within Android Studio, you may encounter Missing Byte Code errors. This is due to a known issue with version 3.1.0 of the android tools plugin: https://issuetracker.google.com/issues/72811718. You'll need to disable Instant Run to get past this error.

Instant Run 끄는 방법 ! 

<Windows 환경 Android studio 메뉴경로>
File > Settings > Build, Execution, Deployment > click Instant Run and uncheck Enable Instant Run

<Mac 환경 Android studio 메뉴경로>
Android Studio > preferences > Build, Execution, Deployment > click Instant Run and uncheck Enable Instant Run


ReactNative 개발환경에 Firebase 연동 끝 !

이제 App.js 파일 상단에
import firebase from 'react-native-firebase'; 
를 추가한뒤 정상적으로 빌드 및 실행이 되는지 확인! 






















라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

웹 개발하면서 보안을 유지하기 위한 기본지식

몇개월전에 만들었던 웹기반 (HTML5, CSS3, Flash Player(VideoJS)) VOD플레이어에서 보안이슈가 발생했다. 웹또한 서버를통해 통신을하지만 사용자의 PC에서 실행되는만큼 클라이언트의 개념이 있으며 Javascript 야말로 클라이언트에서 작업하게 되는 영역이라는 점에서 보안상에 이슈 발생.  이유인즉슨  무료로 제공되고 있는것과 유료로 제공되고있는 서비스에 대하여  javascript 단에서 서비스 허용여부를 결정하게될경우  해킹을 통해 이부분을 우회하여 서비스이용이 가능했다는점.. 모든 인증이나, 중요데이터는 java 로 코딩해서 서버단에서 결단이 나도록 했어야했는데 이건 너무 기본적이면서도 아쉬운 실수를 저지르고 말았다..  하하..  많은 분들이 이런 부분을 간과할수도있을듯하여 작성해봅니다.  요즘 보안이슈가 많을탠데 모두들 보안 화이팅 ! 
댓글 쓰기
자세한 내용 보기

tomcat 80포트 사용설정 및 GET방식 인코딩설정

톰캣 7.0 기준 server.xml 원본에 작성되어있는 내용중에서 아래와같은 내용이있다. <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />   1. 80포트 사용설정 외부에서 웹서버에 접근했을때 주소뒤에 www.xxx.com:8080   처럼 8080포트를 쓰지않는 방법은 두가지가 있는것같다.    - 첫번째 방법 - server.xml 수정 <Connector port="80" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />    - 두번째방법은 내가 작성한 리눅스 iptable를 수정하는것. 80포트로 들어온내용을 8080으로 리다이렉트시켜서 톰캣설정 변견없이 작동하게하는것이다. http://blog.naver.com/cyk7890/40189933263   2. GET 방식 한글인코딩 설정 - URIEncoding="UTF-8" 추가 <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" useBodyEncodingForURI="true" />
댓글 쓰기
자세한 내용 보기

Android 스마트폰 기본 웹브라우저(Chrome:크롬) 호출하는 스키마(URL Scheme)

신용카드결제 페이지 주소를 카톡으로 던졌을때 카톡 내부에서 결제가 이루어지다보니 결제완료까지 정상적으로 처리되지 않는 경우가 발생한다더라 그래서 생각해본게.. 1) 카카오통 채팅방  2) 링크 전송  3) 링크를 클릭하면 스마트폰애 내장된 웹브라우저를 실행하는 URL스키마 실행  4) 실행된 웹브라우저에서 결제페이지로 이동 이 절차를 거치면 카톡 외부로 나와서 독립적인 웹브라우저상에서 결제를 진행하기때문에 정상처리가 가능할것이라고 판단 찾다 찾다가.. 알아낸것이 안드로이드 (가능) - 롤리팝부터 크롬 브라우저가 기본앱이다 - 크롬을 호출방법 intent://www.naver.com#Intent;scheme=http;package=com.android.chrome;end  아이폰 (조건부 가능) - 사파리를 호출하는 앱스키마가 없으며, 사파리를 통해서 검색어를 입력한 검색기능만 가능 - 크롬브라우저 앱이 설치되어있을경우 아래와같이 호출 가능 googlechrome:////www.naver.com <사용법> < html > < body > < script >      var currentOS = "else" ;      var mobile = ( /iphone | ipad | ipod | android/ i .test(navigator.userAgent.toLowerCase()));      if (mobile) {          var userAgent = navigator.userAgent.toLowerCase();          if (userAgent.search( "android" ) > - 1 )             currentOS = "android" ;          else if
댓글 쓰기
자세한 내용 보기