개요
경우에 따라 다르겠지만 일반적으로 웹 또는 모바일 앱을 개발하고 운영하기 위해서는 애플리케이션의 배포, 데이터의 저장, 사용자의 인증 등의 서비스를 제공하기 위한 서버가 필요합니다. 파이어베이스는 웹과 모바일 앱 개발에 필요한 공통적이고 기본적인 기능을 제공하는 **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
'모듈, 프레임웍 > Firebase' 카테고리의 다른 글
Firebase 호스팅 사용하기 (0) | 2020.07.02 |
---|---|
Firebase 사용자 정보 저장 (0) | 2018.12.21 |
Angular Firebase - 사용자 인증 (이메일) (0) | 2018.11.09 |
Angular Firebase - 사용자 인증 (2/2) (0) | 2018.10.19 |
Angular Firebase - 사용자 인증 (1/2) (0) | 2018.09.27 |