[React.js] 리액트에 파이어베이스 연동하기 / React + Firebase

파이어베이스는 구글에서 만든 모바일 및 웹 애플리케이션 개발 플랫폼으로, 굉장히 간단하게 애플리케이션을 위한 서버를 사용할 수 있다. authentication, database 등 애플리케이션 구현에 필요한 최소한의 필요를 가장 간편하게 만족시켜줄 수 있는 방법 중 하나이다. 파이어베이스는 작은 프로젝트에서 백엔드를 구현하지 않고 아이디어를 시험해본다거나, 프로토타입을 테스트해보는 경우에 적합하다. 다만 큰 프로젝트를 구현할 때는 백엔드를 직접 구현하여 사용하는 것이 올바른 방법이다.

 

1. <script> 태그 추가

기본적으로 웹 애플리케이션에 대해서 파이어베이스를 연동하는 방법은 html에 script 태그를 추가하는 것으로 가능하다.

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "*******************************",
    authDomain: "*********.firebaseapp.com",
    projectId: "*********",
    storageBucket: "*********.appspot.com",
    messagingSenderId: "*********",
    appId: "1:*********:web:*********"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

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

 

 

2. npm 설치 및 리액트 컴포넌트 추가 

npm install --save firebase

명령어를 사용하여 package에 firebase를 설치한다. 그럼 아래와 같이 정상적으로 파이어베이스 라이브러리가 설치된 것을 볼 수 있다.

 

 

파이어베이스가 정상적으로 설치되었으니 이를 사용하여 클래스를 만든다. 위의 <script> 태그 내의 내용을 복사하여 사용할 수 있다. firebase.js 파일을 src에 추가하고, index.js에서 컴포넌트로 firebase를 import 해준다.

 

 

그리고 정상적으로 연동이 되었는지 확인해보기 위해 콘솔창에 firebase를 찍어보면 아래와 같이 출력된다.

 

이제 연동은 완료되었고, 사용할 수 있는 firebase의 모든 API 기능은 아래 링크를 통해 확인할 수 있다.

firebase.google.com/docs/reference/js/?authuser=0#firebase.analytics

JavaScript SDK  |  Firebase