[Angular] Angular와 Firebase 연동(Cloud Firestore)

이전 포스팅에서는 Angular와 Firebase Authentication(인증)을 연동했습니다.

자세한건 이전 포스팅을 참고 해주세요.

Angulre와 Firebase 연동(Firebase Login)

 

이번에는 Angular와 Firebase의 Cloud Firestore를 연동해보겠습니다.

Cloud Firestore는 MongoDB와 AWS의 DynamoDB와 비슷한 NoSQL입니다. 다만 실시간으로 변경된 데이터를 받아오는걸 따로 작업을 하지 않아도 된다는 좋은 점이 있습니다.

먼저 Firebase 콘솔로 가서 Cloud Firestore를 사용하도록 설정을 합니다.

좌측 메뉴에서 Cloud Firestore를 선택 해주고 화면에 보이는 데이터베이스 만들기를 클릭해줍니다.

그러면 아래와 같이 어떤 데이터 베이스를 만들지를 설정하는 창이 나옵니다. 프로덕션 모드에서 시작의 경우에는 제일 처음에 만들면 모든 접속이 불가능 하도록 되어 있습니다.

allow read, write: if false;

위 코드가 Cloud Firestore에 프로덕션으로 설정했을 때 기본으로 설정이 되어 있는 룰입니다.

모든 접속을 허용을 하게 하기 위해서는 아래와 같이 코드를 변경해주면 됩니다. 룰 설정하는 방법은 나중에 추가로 포스팅을 하도록 하겠습니다.

allow read, write: if true;

테스트 모드의 경우에는 생성일로 부터 약 2달 동안 제한 없이 접속이 가능하도록 설정이 됩니다. 저는 여기서 룰을 따로 설정을 하지 않을 거기 때문에 테스트 모드에서 시작으로 선택을 하고 다음을 눌러 시작을 하도록 하겠습니다.

그리고 다음에 Cloud Firestore의 위치를 설정하는 창이 나옵니다.

아래와 같이 서울 리전인 asia-northeast3로 설정을 하고 사용 설정을 해주면됩니다.

사용 설정이 완료 되면 아래와 같이 보입니다.

그리고 전 포스팅에서 작성을 한 FirebaseModule에 Cloud Firestore를 사용하기 위한 라이브러리를 추가해줍니다.

AngularFirestoreModule에 enablePersistence의 synchronizeTabs는 모든탭에 Cloud Firestore의 데이터를 공유할지를 정하는 옵션입니다.

// firebase.module.ts
import {NgModule} from '@angular/core';
import {AngularFireModule} from '@angular/fire';

import {environment} from '../environments/environment';
import {AngularFireAuthModule} from '@angular/fire/auth';
import {AngularFirestoreModule} from '@angular/fire/firestore';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule.enablePersistence({
      synchronizeTabs: true  // 모든 탭에 데이터를 공유할지를 설정하는 옵션
    })
  ],
  exports: [
    AngularFireModule,
    AngularFireAuthModule,
    AngularFirestoreModule
  ]
})
export class FirebaseModule {
}

그리고 Cloud Firestore의 데이터를 처리해줄 DataService를 생성해줍니다.

$ ng g s services/data --skipTests true

간단하게 user Collection을 만들고 사용자의 uid를 이용하여 document를 만든 다음에 name이라는 데이터를 저장하는 코드를 작성해주겠습니다.

valueChanges()의 경우 해당 Collection의 데이터가 변경될때 마다 데이터를 가져옵니다. 여기서는 user Collection의 데이터가 변경될때 마다 데이터를 가져옵니다.

collection에 add는 document의 uid를 자동으로 생성을 해서 데이터를 저장해줍니다.

// data.service.ts
import {Injectable} from '@angular/core';
import {AngularFirestore} from '@angular/fire/firestore';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(
    private afs: AngularFirestore
  ) {
  }

  // user Collection에 데이터를 추가
  addName(name: string): Promise<void> {
    return this.afs.collection('user')
      .add({name});
  }

  // user Collection의 데이터를 가져옴
  fetchUsers(): Observable<{ name: string }[]> {
    return this.afs.collection<{ name: string }>('user').valueChanges();
  }
}

그리고 이전에 작성을 했던 HomeComponent에서 사용을 하는 코드를 작성하도록 하겠습니다.

먼저 home.component.ts를 작성해줍니다.

// home.component.ts
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormControl, Validators} from '@angular/forms';
import {Observable} from 'rxjs';
import {AngularFireAuth} from '@angular/fire/auth';
import {DataService} from '../services/data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
  users: Observable<{ name: string }[]>;

  formGroup = this.formBuilder.group({
    name: this.formBuilder.control('', [
      Validators.required
    ])
  });

  get name(): FormControl {
    return this.formGroup.get('name') as FormControl;
  }

  constructor(
    public afAuth: AngularFireAuth,
    private dataService: DataService,
    private formBuilder: FormBuilder
  ) {
  }

  ngOnInit(): void {
    this.getUsers();
  }

  getUsers(): void {
    this.users = this.dataService.getUsers();
  }

  addUser(): void {
    this.dataService.addName(this.name.value)
      .then()
      .catch(err => {
        console.error(err);
        alert(err.message);
      });
  }

}

그리고 home.component.html을 작성해줍니다.

<h1>Hello, {{(afAuth.authState | async).displayName}}!!</h1>

<div>
  <form
    [formGroup]="formGroup"
    (ngSubmit)="addUser()"
  >
    <input placeholder="이름을 입력해주세요"/>

    <button
      type="submit"
      [disabled]="formGroup.invalid"
    >
      등록
    </button>
  </form>
</div>
<div>
  <ul>
    <li *ngFor="let user of users | async">
      {{user.name}}
    </li>
  </ul>
</div>

데이터를 추가를 하게되면 아래와 같이 Firebase 콘솔에서도 데이터가 등록된걸 확인할 수 있습니다.

좀더 자세한 내용을 보고 싶으시면 Angularfire Github에 가시면 보실 수 있습니다.

angular/angularfire