파이어베이스 - 연결하기 (앵귤러, 리액트)

파이어베이스는 데이터 저장에 필요한 데이터베이스, 인증 및  호스팅 등 다양한 서버 측 기능을 제공하는 구글의 통합 서비스입니다. 이미 구축된 서버에 프론트 애플리케이션을 연동하고 파이어베이스에서 필요한 기능을 가져다 사용하기 때문에 백엔드 개발 없이 완전체의 애플리케이션을 개발할 수 있는 장점이 있습니다. 

 

파이어베이스는 파이어 스토어 기준으로 1GB의 총 데이터와 하루에 20,000번의 쓰기, 20,000번의 지우기, 50,000번의 읽기를 무료로 제공하므로 테스트 목적의 애플리케이션을 충분히 가동 가능합니다.

 

파이어베이스 사용을 위한 첫 단계인 파이어베이스와 개발하고자 하는 애플리케이션의 연동방법을 살펴보겠습니다.

목차

• 파이어베이스 설정
  • 프로젝트 생성
  • 웹앱 생성
• 앵귤러
• 리액트

파이어베이스 설정

프로젝트 생성

파이어베이스 계정에 로그인 후 새 프로젝트 생성 버튼을 누르고 프로젝트 이름 설정 -> 계속

구글 애널리틱스 연동여부를 결정하고 만들기 선택

웹앱 생성

프로젝트 메인에 세 번째 태그 아이콘 웹앱 선택

애플리케이션 이름 설정 -> 등록

등록이 완료되면 에이피아이 키를 포함한 구성코드도 생성됩니다.

앵귤러

먼저, 앵귤러 프로젝트 콘솔에서 아래와 같이 @angular/fire 모듈을 설치합니다.

ng add @angular/fire

설치를 계속할 건지 물어보는데 'y'를 선택합니다.

사용할 툴들을 물어보는데 필요한 기능을 선택 후 엔터를 누릅니다 (나중에도 따로 설치도 가능).

다음으로 파이어베이스의 계정을 선택하고 (없는 경우 만드는 것도 가능) 프로젝트를 선택합니다.

다음으로 구성 설정을 위한 코드가 필요한데 연결할 앱을  누르고

톱니바퀴를 눌러서 앱 세팅으로 이동합니다.

중간즈음까지 내려가면 아래와 같은 구성코드가 있는 데 값으로 설정된 객체를 복사

다시 앵귤러 프로젝트로 이동하여 'environments'와 'environments.prod' (외부 API 구성 설정하는 파일들로 prod는 프로덕션을 의미함) 파일에 키를 설정하고 위에서 복사한 객체를 붙여 넣습니다.

src/app/app.module.ts로 이동하여 모듈을 등록합니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

//firebase config
import { AngularFireModule } from '@angular/fire/compat'
import { environment } from 'src/environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // initializing the firebase core module
    AngularFireModule.initializeApp(environment.firebase)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

이후 필요한 기능들은 imports에 추가하여 사용합니다.

리액트

프로젝트 콘솔을 열고 아래 커맨드 실행

npm i firebase

톱니바퀴를 눌러서 앱 세팅으로 이동합니다.

중간즈음까지 내려가면 아래와 같은 구성코드가 있는 데 전체복사

src폴더에 파이어베이스 구성설정을 위한 파일 생성

파이어베이스에서 복사한 구성 코드 붙여 넣기

이후 필요한 기능들을 구성파일에 아래처럼 추가하고 내보내기를 해 주면 됩니다.

이상으로 구글의 통합 서비스인 파이어베이스와 각종 애플리케이션을 연결하는 방법을 살펴보았습니다.