Angular Firebase 사용하기

개요

경우에 따라 다르겠지만 일반적으로 웹 또는 모바일 앱을 개발하고 운영하기 위해서는 애플리케이션의 배포, 데이터의 저장, 사용자의 인증 등의 서비스를 제공하기 위한 서버가 필요합니다. 파이어베이스는 웹과 모바일 앱 개발에 필요한 공통적이고 기본적인 기능을 제공하는 **BaaS(**Backend as a Service)입니다.

따라서 Angular 프로젝트에서도 이를 이용하여 개발을 한다면 클라이언트 측의 개발에만 집중하여 전체적인 애플리케이션의 완성을 앞당길 수 있습니다.

이를 위한 환경을 설정해보도록 하겠습니다.

Firebase 설정

파이어베이스를 앞선 과정을 통해 생성한 Angular 프로젝트에 연결하도록 하겠습니다.

두 단계로 나누어 진행하도록 하겠습니다.

• 새로운 Firebase 프로젝트를 생성하고, Angular Application에서 이용할 수 있도록 설정합니다.
• Firebase와 AngularFire2 라이브러리를 Angular 프로젝트에 추가합니다.

파이어베이스 프로젝트 생성

파이어베이스 프로젝트(Firebase Project)를 생성하기 위해서 파이어베이스 웹사이트 http://firebase.com로 이동합니다. ( 현재 가입되어 있지 않다면 회원가입을 진행합니다. ) 콘솔로 이동하기를 누르도록 합니다.

여기에서 프로젝트 추가 를 클릭하여 새로운 파이어베이스 프로젝트를 생성하도록 합니다.

프로젝트 추가 다이얼로그가 나옵니다. ① 프로젝트 이름을 설정하고, ② 위치는 대한민국으로 설정한 후, ③ 이용약관에 동의하여 프로젝트를 만들도록 합니다.

다음 화면(▼그림)에서 웹 앱에 Firebase 추가를 선택하도록 합니다.

다이얼로그의 내용은 파이어베이스의 초기화를 위한 설정들입니다. 다이얼로그의 지시사항에 따라 환경설정 파일을 생성한 후, 이를 복사해 넣도록 하겠습니다.

src/environments/environment.ts 파일을 열어, 앞서 다이얼로그에서 제공된 내용 중 필요한 부분(예시 화면의 붉은색 네모)만 발췌하여 아래와 같은 형식으로 복사하여 넣도록 합니다.

export const environment = {
	production: false,
	firebase: {
		apiKey: '<your-key>',
		authDomain: '<your-project-authdomain>',
		databaseURL: '<your-database-URL>',
		projectId: '<your-project-id>',
		storageBucket: '<your-storage-bucket>',
		messagingSenderId: '<your-messaging-sender-id>'
  }
};

동일한 내용을 environment.prod.ts 파일에도 넣어 줍니다.

export const environment = {
	production: true,							// ← 변경
	firebase: {
		apiKey: '<your-key>',
		authDomain: '<your-project-authdomain>',
		databaseURL: '<your-database-URL>',
		projectId: '<your-project-id>',
		storageBucket: '<your-storage-bucket>',
		messagingSenderId: '<your-messaging-sender-id>'
  }
};

두 파일을 통해 파이어베이스의 설정을 개발모드 및 제품모드로 빌드할지 여부를 결정할 수 있습니다.

파이어베이스 라이브러리 설치

다음으로는 파이어베이스를 Angular 에서 쉽게 사용할 수 있도록 지원하는 공식 라이브러리를 설치하도록 하겠습니다. 이 라이브러리를 설치하지 않더라도 파이어베이스를 사용하는데 문제는 없으나, 본 포스팅에서는 이를 이용하도록 하겠습니다. 다음의 명령어를 사용하여 쉽게 추가할 수 있습니다.

$ npm install firebase @angular/fire --save

참고 --save option은 npm을 통하여 설치하는 모듈을 프로젝트에서 사용하도록 package.json에 추가하겠다는 의미입니다.

설치한 라이브러리를 Angular에서 사용하도록 /src/app/app.module.ts 파일에 아래의 import 문을 추가합니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';			// ← 추가
import { environment } from '../environments/environment';	// ← 추가

@NgModule 데코레이터의 import array 에도 아래와 같이 AngularFireModule, AngularFireDatabaseModule, AngularFireAuthModule 을 추가합니다.

@NgModule({
	imports: [
		BrowserModule,
		AngularFireModule.initializeApp(environment.firebase)	// ← 추가
	],
	declarations: [ AppComponent ],
	bootstrap: [ AppComponent ]
})
export class AppModule {}

여기서 주의할 점은 AngularFirebase 모듈을 위하여 이전에 environment.firebase 에 복사했던 파이어베이스 구성값과 함께 initilizeApp 메서드를 호출한 부분입니다. app.module.ts 파일에서 해당 설정파일에 접근할 수 있도록 import 문을 추가하는 것을 잊지 말아야 합니다. 해당 부분은 아래와 같습니다.

import { environment } from '../environments/environment';

정리

본 포스트에서는 간단히 Angular 6 프로젝트에서 Firebase를 사용할 수 있도록 환경을 설정하여 보았습니다. 이를 위하여 필요한 라이브러리를 설치하고 이들이 함께 동작할 수 있도록 프로젝트에 설정을 해주었습니다.

참고

angularfire2/install-and-setup.md at master · angular/angularfire2