앵귤러 & 파이어베이스 CRUD 하기

 

 

기존에 사용했던 샘플코드를 통해서...수정 삭제 및 조건절 검색을 해 보려 하였으나 왠걸? 잘 안되고 에러를 뿜뿜하는 것이다..

그러고보니 앵귤러 4, 5 , 6으로 넘어가면서 사용하는 문법 스타일이 조금씩 변해서 4에서 되는 코드가 6에서 안되는 경우가 있다. 대표적인 예로 Map 이라던지 filter라던지...이런 기능은 pipe를 통해서 사용해야 되는 것으로 바뀐것 처럼 말이다.

아무튼 간에..angularfire2를 활용해서 crud하는 예제를 앵귤러 6 기준으로 다시 작업하였고, 해당 기능은 서비르로 빼서 관리하는 형식으로 바꾸었다.

import { Injectable, Host, Optional } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class MyfireService {
  private DataBase : AngularFirestore;
  private itemsCollection: AngularFirestoreCollection<any>;
  private items: Observable<any[]>;
  public status : string;

  //의존성 주입, db인 앵귤러 파이어스토어는 모듈에서 의존성을 주입 받는다.
  constructor(@Host() @Optional() db : AngularFirestore) { 
    this.DataBase = db;
    if(this.DataBase != null && this.DataBase != undefined){
      this.status = 'OK';
    }
    else{
      this.status = 'NO'
    }
  }

  //데이터 가져오기, db_name이 컬렉션 이름, param이 파라미터, value는 값, operator는 조건이다.
  getItem(db_name : string, param : Array<any>, value: Array<any>, operator : Array<any>){
    this.itemsCollection = this.DataBase.collection<any>(db_name, ref =>{  
      let query : firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
      if(param != null){
        for(var p =0 ; p < param.length; p++){
          query = query.where(param[p], operator[p], value[p]);  //쿼리참조
        }
      }
      return query;  //쿼리 더하기
    });
    this.items = this.itemsCollection.valueChanges();
    return this.items;
  }

  //데이터 넣기
  setItem(db_name : string,item : any){
    this.DataBase.collection(db_name).valueChanges();    
    this.itemsCollection.add(item);  //item은 왠만하면 VO형식을 만들어서 넣어주자.
  }

  //가장 삽질 하였던 부분, 
  //데이터 수정/삭제
  alterItem(db_name : string, param : Array<any>, value: Array<any>, operator : Array<any>, changeItem : any){
    this.itemsCollection = this.DataBase.collection<any>(db_name, ref =>{
      let query : firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
      if(param != null){
        for(var p =0 ; p < param.length; p++){
          query = query.where(param[p], operator[p], value[p]);
        }
      }
      return query;
    });  //---> 여기까지가 수정 및 삭제할 대상을 찾는 부분

    this.itemsCollection.snapshotChanges().pipe(  //앵귤러 6부터는 map을 pipe안에 넣어서 호출해야한다...
      map(
          changes => { return changes.map(a => {
            const data = a.payload.doc.data() as any;
            const ID = a.payload.doc.id;  //이게 파이어베이스에서 가지고있는 해당 데이터의 고유 아이디 값.
            var datas = changeItem;  //여기가 아이템이다. 여따가 null값넣으면 삭제가 된다.
            this.itemsCollection.doc(ID).set(datas);
            return datas;
          });
        }
      )).subscribe(); 
  }
}

저 코드 작성하는데 왜이리 삽질을 하였는지..

그리고 왠만하면 메소드 사용하는 방법이 이렇게 뒤집어지지는 않는데..앵귤러4랑 6이랑은 좀 당황스럽게(?)바뀐감이 없지 않다.

아래 코드는 모듈에서의 의존성 주입부분이다.

주입된 의존성에 의해서 파이어베이스 접속 서비스를 만들고, 해당서비스를 앞으로 다른 콤포넌트나 모듈에서 사용하면 끝!

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RouterModule,Routes} from '@angular/router';
import { FormsModule} from '@angular/forms';
import {LoginComponent} from './login/login.component';
import {MainComponent} from './main/main.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestore, AngularFirestoreModule } from '@angular/fire/firestore';
import { MyfireService } from './myfire.service';

const router : Routes = [  //요건 라우터..
  {path : 'login',component : LoginComponent},
  {path : 'main',component : MainComponent},
  {path : '',redirectTo : 'login',pathMatch : 'full'}
]

const environment = {
  production: true,
  firebase: {
      apiKey: '파이어베이스에서받자',
      authDomain: '파이어베이스에서받자',
      databaseURL: 'https://파이어베이스에서받자',
      projectId: '파이어베이스에서받자',
      storageBucket: '파이어베이스에서받자',
      messagingSenderId: '파이어베이스에서받자'
  }
};

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(router,{enableTracing:false}), //라우터 설정
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase, '/'),  //파이어베이스에 접속할 위치
    AngularFirestoreModule //요고 꼭 넣어야 한다.   
  ],
  providers: [AngularFirestore, MyfireService],  
  bootstrap: [AppComponent]
})
export class AppModule { }