기본 콘텐츠로 건너뛰기

4월, 2018의 게시물 표시

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 를 더블클릭해서 …

React Native 개발 도전 - 개발환경 구축 부터 프로젝트 생성 및 빌드까지 (1)

개발장비 - mac book air
작성일 : 2018.4.16
 - react native 공식홈페이지 및 제타위키 기준 최신내용으로 작성했습니다

1. xcode 설치
xcode > preferences > locations > "Command Line Tools:" 부분에 Xcode 로 설정
이걸 안해주면 아래 명령중에 npm start 후에 ios 에뮬레이터로 실행하기가 작동하지 않는다 
2. Android studio 설치


3. jdk 설치 curl -s "https://get.sdkman.io" | bash source "$HOME/.sdkman/bin/sdkman-init.sh" sdk version sdk install java
4. react native IDE 구성 4-1) homebrew 설치 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
4-2) nodejs 설치 brew install node
4-3) yarn 설치 brew install yarn
4-4) watchman 설치 brew install watchman
4-5) react-native-cli 설치 sudo npm install -g react-native-cli
5. visual studio code (에디터) 설치  (뭐.. 이건 RN 소스코딩할때 편하자고 설치한건데, Atom 이라는것도 있고 각자 편한걸 사용하세요, 근데 전 Atom도 써봤는데 VS code가 상당히 빠르게 동작하고 좋더라구요)
6. myapp 이라는 프로젝트 생성 맥북에서 콘솔을 열고 아래명령 입력 react-native init myapp
7. 실행하기 그럼 결과적으로  myapp 디렉토리가 생길것이다 이 디렉토리에서 앱을 개발하게되며 ios 와 android 디렉토리가 있는데

React Native 개발 도전

2018년 두번째 도전 React Native 로 앱 만들기!!

"React Native" 이하 RN이라고 표기하겠습니다

주저리 주저리..
2017년 4월 ~ 10월 IONIC을 사용해서 WILLY 소개팅 앱을 만들었었다

App store, Google play 둘 다 배포했으나
결과는 폭망...
뭐 워낙 레드오션이기도 하고..
결정적으로 Android 에서 앱 퍼포먼스가 엉망이었다 (너무 버벅이고.... 끊기고..)

왜 그때 React Native 로 할 생각을 안했을까 ?
왜 그때 IONIC 와 React Native 퍼포먼스 비교자료를 찾아보지 않았을까?

인디게임개발자들을 보고 unity로 게임을 만들까도 해봤지만
2주만에 포기..

괜찮다 싶은 아이템을 발견하게되어
이번엔 RN 으로 도전해볼까 한다

"이제 막 시작해서 레이아웃 잡아본 허접한 개발상태..쿠쿠.. "
열심히 개발 강좌를 보면서 한단계 한단계 공부해나가고 있는데
과연 언제 완성하게될런지.. ㅋㅋ

아무튼 이제 개발하면서 차근차근 정리하게되는 자료들을 블로깅해보려 한다

우선 바로 다음글은

React Native 개발환경 구축하기 !

Go Go !