테크토크의 기술 블로그

Cloud Firestore 적용하기

Cloud Firestore란?

Firebase 및 Google Cloud Platform의 모바일, 웹, 서버 개발에 사용되는 유연하고 확장 가능한 데이터베이스입니다.

주요기능

• 유연성
• 표현형 쿼리
• 실시간 업데이트
• 오프라인 지원
• 확장형 설계

시작하기

Cloud Firestore 데이터베이스 만들기

1. Firebase 프로젝트를 만들지 않았다면 Firebase Console에서 프로젝트 추가를 클릭한 후 화면의 아낸에 따라 Firebase 프로젝트를 만듭니다.(firebase.google.com/)

2. Firebase Console에서 Firebase 프로젝트를 선택하고 Cloud Firestore 메뉴를 선택합니다.

3. 데이터베이스 만들기를 선택하고 진행합니다.

보안 규칙

- 프로덕션 모드 : 보안 규칙에 데이터 읽기/쓰기가 가능합니다. (기본 : 데이터 비공개)

- 테스트 모드 : 개발용으로 데이터가 공개되어있습니다. (오직 개발용으로 사용해야 합니다)

위치 설정

 - 이 위치 설정은 프로젝트의 기본 GCP(Google Cloud Platform) 리소스 위치입니다.

 - 경고 : 프로젝트의 기본 GCP 리소스 위치를 설정한 후에는 변경할 수 없습니다.

 - asia-east2 선택함.

공식문서에도 자세하게 설명되어 있으니 참고 부탁드립니다.

firebase.google.com/docs/firestore/quickstart?hl=ko

다음 편에서는 개발 환경 설정을 진행해보겠습니다.

ReactNative 개발 환경 설정을 진행할 때 사용하는 방법은 2가지가 있습니다.

1. Expo CLI Quickstart
2. React Native CLI Quickstart

Expo CLI Quickstart의 경우 쉽게 설정할 수 있지만, 몇가지 제약 사항으로

React Native CLI 를 이용해서 개발환경을 설정해보겠습니다.

우선 필요한 프로그램들을 설치합니다. 공식 문서에서 설치하라고 하는 프로그램은 아래와 같습니다.

• Node
• Watchman
• React Native command line interface
• JDK
• Android Studio

1. Node와 Watchman의 경우 Homebrew를 이용해서 설치하면 됩니다.
   Homebrew가 설치되어 있지 않으시면 https://brew.sh/ 에 방문하셔서 가이드에 따라 설치하시면 됩니다.

brew install node
brew install watchman

Node이 경우 10 버전 이상이 설치되어야 합니다.

2. Java Development Kit 을 설치합니다. Homebrew를 이용해서 설치합니다.

brew cask install adoptopenjdk/openjdk/adoptopenjdk8

3. Android 개발 환경 설정

https://developer.android.com/studio 사이트에서 Android Studio를 다운받아 설치합니다.

1. Android Studio를 설치합니다.

2. Android SDK 를 추가로 설치합니다.

• Android 10 (Q) SDK 필요
  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom_64 System Image
    (저는 Intel x86 Atom_64 System Image 를 설치했습니다.)

• SDK Tools 29.02 필요

3. ANDROID_HOME 환경 변수 설정

아래 경로의 config file에

$HOME/.bash_profile or $HOME/.bashrc

zsh 를 사용 중이라면 ~/.zprofile or ~/.zshrc

아래 코드를 추가합니다.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

이제 필요한 프로그램들 설치와 설정이 완료되었습니다.

다음 글에서는 ReactNative App을 생성하는 법을 다루겠습니다.

아래 내용은 안드로이드를 기준으로 테스트하였습니다.

react-native-rename : 

1. react-native-rename library를 설치한다.

yarn global add react-native-rename
or
npm install react-native-rename -g

2. 작업중인 코드에서 새로운 branch를 생성한다. (실패할 경우를 대비)

git checkout -b rename-app

3. 아래 명령어로 rename한다 <newName>에 원하는 name 입력

react-native-rename <newName>

4. 아래 파일들이 변경됩니다.

react-native-rename testRename
\android\app\src\main\res\values\strings.xml MODIFIED
\index.js MODIFIED
\package.json MODIFIED
\app.json MODIFIED
\android\settings.gradle MODIFIED
\ios\Podfile MODIFIED
\app.json MODIFIED
\android\app\build.gradle MODIFIED
\android\app\src\main\AndroidManifest.xml MODIFIED

Done removing previous bundle directory.
Done removing builds.
APP SUCCESSFULLY RENAMED TO "testRename"!
Podfile has been modified, please run "pod install" inside ios directory.
Please make sure to run "watchman watch-del-all" and "npm start --reset-cache" before running the app.

5. 추가로 아래 작업을 더 진행해야 합니다. (자동으로 바뀌지 않는 부분을 직접 수정)

5-1. 아래 파일들을 새로 생긴 [새로운Rename] 폴더 하위에 이동시켜줍니다.

\android\app\src\main\java\com\[이전Name]\MainActivity.java

\android\app\src\main\java\com\[이전Name]\MainApplication.java



\android\app\src\main\java\com\[새로운Name]\MainActivity.java

\android\app\src\main\java\com\[새로운Name]\MainApplication.java

5-2. 그리고 [이전Name]인 빈 폴더는 삭제합니다.

5-3. MainActivity.java, MainApplication.java 파일 안의 package 경로를 변경시켜줍니다.

package com.[이전Name];

package com.[새로운Name];

5-4. MainActivity.java 안에 값을 변경시켜줍니다.

@Override
  protected String getMainComponentName() {
    return "[이전Name]";
  }

@Override
  protected String getMainComponentName() {
    return "[새로운Name]";
  }

5-5. Androidmanifest.xml 파일에서 아래 내용을 변경합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="[이전Name]">
  ...

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="[새로운Name]">
  ...

[Trouble Shooting]

1. 위의 작업 후 실행 시 에러가 발생한다면 android 경로로 진입하여 아래 명령어 실행 후 다시 실행해보시기 바랍니다.

cd android
gradlew clean
cd ..
npm run android

2. 그래도 에러가 발생한다면 이전 APP을 디바이스에서 삭제 후 다시 실행시켜보시기 바랍니다.