[React Naitve] 리액트 네이티브 앱에서 Firebase 시작하기 (인증, 데이터베이스, 스토리지)

리액트 네이티브 💬채팅앱에서 Firebase 시작하기

- 인증, 데이터베이스, 스토리지 -

---

리액트 네이티브로 채팅앱을 만드는데 별도의 서버 구축 없이 파이어베이스를 이용할 것이다. 파이어베이스는 인증, 데이터베이스 등의 다양한 기능을 제공하는 개발 플랫폼이다. 파이어베이스를 이용하면 서버와 데이터베이스를 직접 구축하지 않아도 개발이 가능하다. 

 

목차

1. 프로젝트 만들기

2. 앱 추가하기

3. 인증 (이메일 인증)

4. 데이터베이스

5. 스토리지

6. 라이브러리 설치

 

1. 프로젝트 만들기

파이어베이스 콘솔에서 먼저 프로젝트를 생성한다. 나는 react native 앱 폴더 이름과 같게 했다.

 

그다음은 Google 애널리틱스를 연동한다는 내용인데, Google 애널리틱스는 사용자가 앱에서 하는 행동이나 데이터 등을 수집할 수 있는 도구이다. 보통 기본으로 되어 있는 미국으로 많이 하는 것 같다.

 

2. 앱 추가하기

프로젝트 생성이 완료되면 프로젝트 화면으로 이동하여 사용할 플랫폼을 선택해서 앱을 추가해야 한다. 다음 그림에서 노랗게 표시한 "웹" 버튼을 선택해서 앱을 추가하면 된다.

 

이때 앱의 닉네임은 편의상 지정하는 내부용 식별자이므로 그냥 지정하고 싶은 이름을 입력하면 된다. 그리고 이후에 나오는 단계들에서는 그냥 확인 버튼을 눌러주면 된다.

 

앱 추가가 완료된 후 "프로젝트 설정▶일반▶내 앱"에서 Firebase SDK snippet을 확인하면 파이어베이스를 사용하기 위한 설정값을 확인할 수 있다. 이 값들은 외부에 노출되면 안 되는 중요한 값들이므로 잘 관리해야 한다. 

 

이제 프로젝트의 디렉터리에 firebase.json 파일을 생성한 후 이 코드를 다음과 같은 형태로 복사하고 .gitignore 파일에 firebase.json을 추가한다.

이제 파이어베이스를 사용하기 위한 준비는 모두 끝났다! 채팅앱에서 사용할 파이어베이스의 기능은 인증, 데이터베이스, 스토리지이다.

 

3. 인증 (이메일 인증)

파이어베이스의 인증 기능에서는 다양한 인증 방법을 제공한다. 나는 이메일과 비밀번호를 이용하여 인증할 수 있는 기능을 만들 것이다. 다음과 같이 "이메일/비밀번호" 부분만 활성화하면 된다.

 

4. 데이터베이스

앞으로 만들 채팅앱에서 생성되는 채널과 각 채널에서 발생하는 메시지를 파이어베이스의 데이터베이스를 이용하여 관리할 것이다. 데이터베이스의 경우 파이어스토어(Cloud Firestore)와 실시간 데이터베이스(Realtime Database) 두 가지 종류를 제공하는데, 나는 여기서 파이어스토어를 이용할 것이다. 

 

두 번째 단계에서 위치를 선택할 땐 자신이 서비스하는 지역과 가장 가까운 지역을 선택하는 것이 좋다. 한국에서 진행할 것이므로 서울인 asia-northeast3를 선택한다.

 

5. 스토리지

스토리지는 서버 코드 없이 사용자의 사진, 동영상 등을 저장할 수 있는 기능을 쉽게 개발할 수 있는 기능을 제공한다. 여기서는 스토리지를 이용해서 채팅 애플리케이션에 가입한 사용자의 사진을 저장하고 가져오는 기능을 만들 예정이다. 

 

6. 라이브러리 설치

리액트 네이티브에서 파이어베이스를 사용하기 위한 라이브러리를 설치해야 한다.

expo install firebase

 

라이브러리가 설치되면 utils 폴더 아래에 firebase.js 파일을 만들고 다음과 같이 작성한다.