앵귤러 튜토리얼(Angular tutorial) - 20, with FireBase : select

저번시간에는 파이어베이스의 데이터베이스와 앵귤러가 연동하는 부분까지 해 보았습니다.
파이어베이스는 구글에서 제공하는 클라우드 형태의 서버로, 다양한 기능을 제공합니다.
우리가 사용하는 데이터베이스는 "파이어스토어" 라는 데이터 베이스이며 json형식으로 데이터를 관리하여 줍니다.
파이어베이스를 사용하면 따로 데이터베이스에 연결되는 웹 서버가 필요가 없습니다.

이번시간에는 저번에 작성한 내용을 천천히 살펴 보려고 합니다.
가장 먼저 입력하였던 명령어 입니다.

npm install firebase @angular/fire --save

위 명령어는 Node.js에서 제공하는 기능으로, Node.js의 라이브러리 인스톨러를 활용하여 앵귤러에서 사용하는 파이어베이스 라이브러리를 추가하는 명령어 입니다.
단순히 라이브러리(모듈)를 설치하는 방법으로 이해하시면 되겠습니다.
현재는 위 명령어 보다는 ng add @angular/fire 라는 명령어를 통해서 설치하는 방법을 조금 더 권장하고 있습니다.
ng serve, ng build, ng g component 등 ng로 시작하는 명령어답게 "add"의 의미는 앵귤러와 관련된 라이브러리를 추가할 때 사용합니다.
* 제 기억이 맞다면 아마 앵귤러 버전6 이후 부터 지원 하였던 것으로 기억 합니다.

다음으로 살펴볼 내용은 모듈입니다.
우리는 imports를 통해서 파이어 베이스와 관련된 내용 2개를 추가 하였습니다.

* 대상 : app.module.ts

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

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { BoardComponent } from './board/board.component';

import { RouterModule,Routes} from '@angular/router'; //라우터
import { AuthGuard } from './auth.guard';
import { AskService } from './ask.service';
import { FormsModule  } from '@angular/forms';

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

const fireEnvironment = {
  production: true,
  firebase: {
    /**설정 값**/
  }
}

const router : Routes = [  //라우팅
  {path : 'login' , component : LoginComponent},  
  {path : 'board' , component : BoardComponent, canActivate:[AuthGuard]},  //가드 추가
  {path : '', redirectTo : '/login',  pathMatch : 'full'}
]

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(router,{enableTracing:false}),
    FormsModule,
    AngularFireModule.initializeApp(fireEnvironment.firebase, '/'),   //파이어 베이스 모듈 사용
    AngularFirestoreModule,  //파이어베이스 데이터베이스와 관련된 모듈 사용
  ],
  providers: [AskService],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

모듈에서 imports 내부에 2개의 모듈을 추가하였습니다.
AngularFireModule에서의 initializeApp이라는 static 함수(정적 메소드)를 가장 먼저 호출하였습니다.
이 static함수를 호출하면 파이어베이스와의 설정 값을 등록하여 파이어베이스에 연결해주는 역할을 합니다.

initializeApp 함수에 첫번째 값은 우리가 파이어베이스 웹 콘솔을 통해서 생성한 json값을 넣어주면 됩니다.

두번째 값은 옵셔널 부분으로 설정 경로와 관련된 내용이며 굳이 값을주지 않아도 동작하는 데 문제는 없습니다.

 

AngularFirestoreModule은 파이어베이스가 연결되고 나서 실제 접속할 데이터베이스 모듈인 파이어스토어 모듈을 등록하는 부분입니다.
결국에는 파이어베이스 웹 콘솔에서의 설정값만 잘 만들어주고 앵귤러에서는 간단하게 imports만 해 준다면 연동은 손쉽게 끝난 것이라 볼 수 있습니다.

다음으로 살펴볼 내용은 app컴포넌트입니다.

* 대상 : app.component.ts

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';

@Component({
  selector: 'app-root',
  template : '<router-outlet></router-outlet>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'thirdStudy';

  private DataBase : AngularFirestore;
  private itemsCollection: AngularFirestoreCollection<any>;

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

  getItem(db_name : string){
    this.itemsCollection = this.DataBase.collection<any>(db_name, (ref) =>ref);  //컬렉션에 접속    
    return this.itemsCollection.valueChanges();  //리턴
  }
}

 

생성자(constructor)를 통해서 AngularFirestore라는 클래스(모듈)을 제공 받았습니다.
해당 클래스는 app모듈에서 imports를 통해 생성 되었으므로 따로 무언가 설정같은 행위를 할 필요가 없습니다.
getItem이라는 함수를 살펴보면, 컬렉션에 접속하여 무언가를 리턴하는 내용입니다.
해당 getItem함수를 생성자에서는 subscribe라는 함수를 호출하여 구독하고 있습니다.

 

이해를 위해서 ng serve를 입력하여 테스트 서버를 구동하여 줍니다.

* 반드시 먼저 구동해야 합니다!

서버를 구동한 뒤에 브라우저로 접속하여 콘솔을 열어줍니다.  * http://127.0.0.1:4200/login
기존의 데이터가 출력되는 것을 볼 수 있습니다.

파이어스토어에 저장된 반가운 데이터가 보이네요~

그리고 나서 파이어베이스 웹 콘솔에 접속합니다.
파이어베이스 웹 콘솔에 접속하면 좌측에 Database탭을 눌러 데이터를 추가하여 줍니다.
입력 값은 원하는 내용으로 입력해도 상관 없습니다.

원하는 데이터를 입력하여 줍니다.

 

데이터를 추가하고난 뒤에 접속하고 있는 페이지에서 갑자기 데이터가 1개 추가되어 출력되는 것을 볼 수 있습니다.

갑자기 데이터가 다시 출력되었습니다?!?

 

이제 getItem 함수를 다시한번 살펴보겠습니다.

* 대상 : app.component.ts

  //생략..
  getItem(db_name : string){
    this.itemsCollection = this.DataBase.collection<any>(db_name, (ref) =>ref);  //컬렉션에 접속    
    return this.itemsCollection.valueChanges();  //리턴
  }
  //생략..

 

getItem함수에서 맨 처음 호출하는 것은 DataBase 객체(AngularFirestore로 구성된) 입니다.
해당 객체에서 collection이라는 함수를 실행하는데 2개의 파라미터가 필요합니다.
첫번째 파라미터는 바라볼 컬렉션 이름, 두번째 파라미터는 옵셔널 형식의 람다식 입니다.
두번째 파라미터는 옵셔널 이므로 해당 내용을 지워도 실행되는데 문제는 없습니다.
* 두번째 파라미터와 관련된 내용은 다음 시간에 설명하겠습니다.

 

이렇게 collection이라는 함수를 통해서 생성된 객체는 AngularFirestoreCollection라는 클래스 형태를 지니고 있습니다.
* 여기서 <any>는 제네릭을 의미하며 받을수 있는 데이터의 형식을 의미 합니다.
이렇게 만들어진 AngularFirestoreCollection라는 형태의 클래스 객체는 valueChanges라는 함수를 실행하게 되면 구독 가능한 형태의 객체로 만들어지게 됩니다.
valueChanges함수는 해당 컬렉션에 대해서 내용이 바뀌는 경우에 구독자에게 내용을 발행하여 주는 함수 입니다.
내용이 어렵다면 ask서비스의  tryToLogin함수나 test1함수를 한번 살펴보시는 것을 추천 드립니다.

 

사용자는 getItem함수에서 만들어진 객체를 구독(subscribe)함으로써 컬렉션의 변경된 값을 계속해서 정의된 행동(console.log)을 할수 있게 된 것 입니다.

console.log이 정의되었으므로 데이터의 변화가 생기면 계속해서 실행됩니다.

 

위와 같은 방식으로 AngularFirestore라는 클래스는 아마도 파이어베이스 서버와 접속을 한 뒤에 우리가 알지 못하는 본인만의 구독을 통해서 우리에게 변경된 값을 전달해 주고 있을 것 입니다.

 

여기까지가 파이어베이스 데이터베이스와의 연결을 통한 데이터를 가져오는(READ) 부분에 대해서 살펴 보았습니다.
위 내용 처럼, 구독(subscribe)이라는 것은 호출한 함수 다음에 할 행동을 의미합니다.
이러한 구독(subsribe)이라는 개념은 내부에 1번만 정의하면 발행이 끝나지 않는 한, 구독이 끝나지 않는 한 지속적으로 동작을 할 수 있다는 점에 대해서 잊지 말아야 합니다.
* 발행이 끝난다는 것은 구독하는 ask서비스의 tryToLogin함수처럼 complete 같은 함수를 호출하는 것을 의미 합니다.

 

다음 시간에도 getItem함수와 관련된 내용에 대해서 좀 더 알아보겠습니다.