파이어베이스(firebase) 앱에 연결하기

1. 파이어베이스 란?

파이어베이스는 구글에서 만든 서버리스이다.

 

서버에 대한 깊은 지식이 없어도 서버적인 기능들을 할 수 있도록 도와주고있다.

https://firebase.google.com/?hl=ko 

Firebase

 

이런식으로 개발에 대한 모든 지식을 갖추지않아도 활용할 수 있는 응용력만있다면 

요즘에는 개발을 할 수 있도록 도와주는 라이브러리들이 많은 것 같다!

 

※ 파이어베이스 가입 후 프로젝트 생성할때 애널리틱스 사용설정은 활성화 시켜놓아야된다!  

   (추후 내가 만든 앱을 분석하기가 용이하기때문)

 

 

2. 프로젝트 내 앱생성하기

우선은 expo를 통해 앱을 만들고 있지만 react-native는 웹서비스에 해당 된다고 한다.

그렇기에 생성한 프로젝트에서 앱을 생성하는게 아니라 웹서비스로 생성을 해야한다!

 

※ 웹 서비스 생성 시 호스팅 설정은 체크 해제해야한다.

 

최종적으로, 

var firebaseconfig = {

     ....

}

 

위와같이 firebase를 사용하기위한 연결정보를 주며 이제 본격적으로 코드단에 추가해보자.

 

3. 파이어베이스 적용하기

 

▶ 파이어베이스를 사용하기위한 도구를 우선 설치해준다.

    expo install firebase

 

▶ 도구 설치 후 파이어베이스 적용을 위한 파일을 추가로 생성해 준다. (App.js와 동일선상에 생성해준다.)

    firebaseConfig.js 

 

파이어베이스에서 생성된 접속정보를 추가한 파일에 넣어줘야한다.

▶ firebaseConfig.js 코드 작성 내용 

    1) 설치한 도구를 통해 firebase 라는 이름으로 가져와서 사용할 수 있게 임포트 해준다.

        import * as firebase 'firebase/app';

     2) 파이어베이스에서 사용할 서비스를 임포트 해오자.

        import "firebase/database";

     3) 파이어베이스 사이트에서 받았던 연결정보를 입력해준다.

     4) 참고로, 파이어베이스에 연결할때 오류가 발생하는 경우를 대비한 코드도 알아두자. 

        if (!firebase.apps.length) {     

               firebase.initializeApp(firebaseConfig);

         }

      5) 마지막으로 firebase를 다른곳에서도 사용할 수 있도록 export 해주면된다.

          export const firebase_db = firebase.database()

 

※ 주의할점은

3) 연결정보를 넣어줄때 databaseUrl을 추가해줘야하는데 최근 파이어베이스에서 프로젝트를 생성하면 연결정보에 해당 정보를 넣어주지않고 있는경우가 있다. 그럴경우 수기로 리얼타임데이터베이스에 들어가서 데이터베이스 주소를 입력해줘야한다. 

(authDomain 아래에 추가해주자.)