앵귤러 튜토리얼 (Angular tutorial) -18 with 파이어 베이스

* 제가 다시 작성한 최신 튜토리얼 수정본 입니다. 아래 주소를 통해서 진행하시는 것을 권장 드립니다. ^^

lts0606.tistory.com/328

앵귤러 튜토리얼(Angular tutorial) - 1

 

저번시간에는 파이어베이스 계정을 추가하였고, 데이터베이스를 만들어 보았다.
이번시간에는 앵귤러를 통해서 파이어베이스에 연동을 하는 방법에 대해 알아 보겠다.
먼저 새롭게 프로젝트를 만들어준다. (현재 디렉토리는 E:/04_NODE이다.)
ng new testMyFire

 

이후에 아래 명령어를 통해서 파이어베이스에 접속 가능한 모듈을 추가한다.
npm install firebase @angular/fire --save

선택시 첫번째 값은 No, 스타일은 css

 

완료가 되었다면 파이어베이스 모듈을 사용하기 위한 준비를 마친 것 이다.
외부에서 연동하려는 모듈(라이브러리)을 사용하기 위해서는 어떤 파일을 수정해야 되는가?
그렇다. 모듈을 수정하면 된다. 메인 모듈인 app.module.ts를 아래처럼 수정하여 본다.

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

import { AppComponent } from './app.component';

//파이어베이스
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule, FirestoreSettingsToken  } from '@angular/fire/firestore';
import { AngularFireStorageModule, StorageBucket } from '@angular/fire/storage';
import { AngularFirestore } from '@angular/fire/firestore';

const fireEnvironment = {
  production: true,
  firebase: {
    apiKey: "key",
    authDomain: "도메인.firebaseapp.com",
    databaseURL: "https://데이터베이스유알엘.firebaseio.com",
    projectId: "프로젝트아이디",
    storageBucket: "스토리지.appspot.com",
    messagingSenderId: "메시징센더아이디"
  }
};
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(fireEnvironment.firebase, '/'),   //파이어 베이스 모듈 사용
    AngularFirestoreModule,  //파이어베이스 데이터베이스와 관련된 모듈 사용
    AngularFireStorageModule,//파이어베이스 파일 저장소 관련된 모듈 사용
  ],
  providers: [ 
    AngularFirestore,  //파이어베이스의 데이터베이스 접속과 관련된 객체
    { provide: FirestoreSettingsToken, useValue: {} },  //저장 토큰 객체
    { provide: StorageBucket, useValue: fireEnvironment.firebase.storageBucket }], //파이어베이스 파일 저장소와 관련된 객체
  bootstrap: [AppComponent]
})
export class AppModule { }

 

신이어....당췌 어떤 뜻 인지 도저히 모르는 용어가 남발하였습니다..
솔직히 모듈에서의 세팅은 지금 당장 알기 어렵다. 
이곳에서는 간단하게 "파이어베이스를 사용하려면 이런 세팅이 필요하구나~" 정도로만 이해하자.
상단에 const fireEnvironment 라는 내용은 이전 시간에 보았던 json파일의 내용이다.
설정과 관련된 json내용을 그대로 입력하면 된다.

파이어베이스 콘솔에서 톱니바퀴 모양을 클릭한 뒤에 프로젝트 설정을 누르면 된다.

 

입력이 완료되고 난 이후에 app.component.ts파일을 수정하여 보자.

import { Component } from '@angular/core';

import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { BehaviorSubject } from 'rxjs';
import { AngularFireStorage} from '@angular/fire/storage';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'testFire';
  //데이터 베이스 관련 객체
  private DataBase : AngularFirestore;
  private itemsCollection: AngularFirestoreCollection<any>;
  private items : BehaviorSubject<any[]> = new BehaviorSubject([]);

  //나중에 쓸 저장소 관련 객체
  private storage : AngularFireStorage;

  //의존성 주입
  constructor(db : AngularFirestore,strg : AngularFireStorage) {   //모듈에서 만들어진 파이어 베이스 접속관련 객체
    this.DataBase = db;
    this.storage = strg;
    this.getItem('board').subscribe((res)=>{  //board 컬렉션에 대해서 구독행위 시작
      console.log(res);
    });
  }  

  getItem(db_name : string){
    this.itemsCollection = this.DataBase.collection<any>(db_name, (ref) =>ref);  //컬렉션에 접속
    this.itemsCollection.valueChanges().forEach((val)=>{  //데이터를 가져오기
      this.items.next(val);  // 구독중인 대상에 데이터를 밀어주기
    });    
    return this.items;  //리턴
  }
}

 

와..마찬가지로 이해 안된다. 알수 없는 코드들이 난무하고 있다.
대략적으로 module에서의 providers를 통해 파이어 베이스 접속과 관련한 객체가 공급되고 있기 때문에 이미 설정이 잘 끝난 파이어베이스 객체를 사용하는 것에 집중하자.

사실..우리는 생성자에 데이터베이스의 연결 객체가 넘어온다라는 것만 이해하면된다.

 

그러므로 일단 getItem 부분을 이해하는 것이 중요 하다.
getItem에서 생성자를 통해 받은 파이어베이스 객체의 컬렉션에 먼저 접속한 뒤에, 데이터를 가져와서 구독중인 객체에 넣어주는 방식으로 되어 있다.

 

위 단계를 정리하면, 

1. 컴포넌트에서 파이어 베이스 데이터베이스 객체를 공급 받는다.
2. 컴포넌트에서 데이터베이스 객체에서 컬렉션에 접근한다.
3. 컴포넌트에서 접근한 컬렉션에서 데이터를 가져온다.
4. 컴포넌트에서 가져온 데이터를 구독한다.

 

모듈 세팅을 이해하는 것 보다도 데이터를 가져오는 단계를 이해하는 것이 중요하다.
동작중인 모습이다.

나름 잘 나온다.

 

그러면 미루어둔 getItem을 조금 더 살펴보자.

  getItem(db_name : string){
    this.itemsCollection = this.DataBase.collection<any>(db_name, (ref) =>ref);  //컬렉션에 접속
    this.itemsCollection.valueChanges().forEach((val)=>{  //데이터를 가져오기
      this.items.next(val);  // 구독중인 대상에 데이터를 밀어주기
    });    
    return this.items;  //리턴
  }

 

여기서 <any> 표현된 내용은 초반에 살펴보았던 제네릭이다.  * 의미가 기억나지 않았다면 찾아보자!

any라는 것은 모두 허용의 의미이며, 결국 저 내용은 어떤데이터형태든 모두 허용하겠다는 의미이다.

 

생성자를 통해서 DataBase의 객체가 생성이되고난 뒤에 collection이라는 함수를 통해서 연결하는 행위가 첫번째 줄 이다.

자세히 보면 두번째 파라미터로 (ref)=>ref 라는 람다식이 보이는데..저기에 각종 조건을 주어 쿼리처럼 사용이 가능하다.

 

두번째 줄은 그렇게 만들어진 itemsCollection의 데이터를 valueChanges 함수를 통해 가져와서 글로벌 변수인 items에 밀어넣는 내용이다.

items의 형태는 BehaviorSubject로 subscribe을 통해서 계속해서 구독하여 변화된 내용을 감시할 수 있다.

 

와...정말 말을쓰면서도 어렵다.

소스코드가 눈에 익을 때 까지 살펴보는것이 나을 것 같다.

또는 아래 사이트를 통해서 API를 살펴보도록 하자.

https://www.npmjs.com/package/@angular/fire

 

 

다음시간에는 몇개의 컬렉션을 더 만들어 보고 데이터를 가져오는 행위에 대해 숙달하여 보자.

앵귤러 파이어베이스 모듈의 깃 주소
https://github.com/angular/angularfire2

angular/angularfire2

src.zip

0.01MB