앵귤러 튜토리얼(Angular tutorial) - 19, with FireBase : 구성

저번시간까지 우리는 서비스와 가드, 그리고 Observable과 관련된 내용을 살펴보았습니다.
모듈, 컴포넌트, 서비스, 라우터 그리고 가드를 사용하면 왠만한 형태의 앱을 만들수가 있습니다.
파이어베이스와의 연동을 살펴보기 전 내용을 먼저 다시한번 살펴보겠습니다.

모듈의 주 목적은 컴포넌트를 관리하는 것 입니다.
모듈은 또한 각종 정보(서비스, 일반 객체 등)를 제공하기도 합니다.
다른 사용자가 만든 모듈을 등록(import)하여 사용하기 위해서는 내가 만든 모듈에 등록 해 주어야 합니다.

컴포넌트는 화면구성을 담당합니다. 
사용자가 바라보는 화면에 대한 모든 기능을 담당합니다.
컴포넌트간의 데이터를 주고받는 방법은, 컴포넌트에서 속성이나 Input 또는 Output같은 데코레이터를 통해서 가능 합니다.
또한 컴포넌트간의 데이터 공유는 서비스를 통해 구독(subscribe)하는 형태로도 공유하기도 합니다.

서비스는 비지니스 로직과 같은 형태의 기능을 담당 합니다.
자주 사용되는 함수나 데이터등을 서비스로 만든 뒤에 모듈에서 의존성 주입(Inject)을 통해서 컴포넌트에게 제공합니다.
컴포넌트는 생성자를 통해서 이러한 서비스를 받아서 사용 합니다.

라우터는 가장 먼저 동작하는(bootstrap) 모듈에서 가장 먼저 동작하는(bootstrap) 컴포넌트에 <router-outler> 노드를 붙여서 동작하게 합니다.
라우터는 사용자의 다양한 요청 경로에 따라서 지정된 컴포넌트로 이동하는 역할을 담당 합니다.

가드는 일종의 서비스의 형태이며, 모듈에서 라우터 정보에서 canActivate 에 추가하여 사용 가능합니다.
사용자의 요청이 컴포넌트에게 전달되기 전(pre) 동작을 하며 조건을 통해 해당 컴포넌트로 이동할지 말지를 결정하게 해 줍니다.

여기까지 정리가 끝난 것 같습니다.
부족한 부분은 다시한번 살펴보야 합니다. ^^

 

---

 

파이어베이스는 구글에서 운용하는 클라우드형태의 서버입니다.
여러 기능을 제공하지만, 우리가 사용할 기능은 파이어베이스의 데이터 베이스와의 연동 방법입니다.
가장 맨 첫시간에 설명하였던 것 처럼 앵귤러는 100% 클라이언트 코드 입니다(오직 브라우저에서만 동작 합니다)
그러므로 직접적으로 데이터베이스와의 연결같은 행위는 할 수 없습니다.
데이터베이스와 연동하려면 데이터베이스에 연결된 웹 서버에 ajax처럼 호출(http 또는 https)해야만 가능하다는 것 입니다.
* 왜냐하면 브라우저에서 일반적으로 허용하는 프로토콜은 http, https 2가지 종류이기 때문 입니다.
* 일반 브라우저에서 mysql, mssql 또는 몽고DB에 아이디 비밀번호를 get방식 또는 post방식을 통해서 직접 접속 못하는 것과 같은 의미 입니다.

그런데 파이어베이스라는 서버는 정해진 방법을 앵귤러에서 잘 맞추어 사용 한다면 마치 ajax를 통해 데이터를 CRUD 할 수 있게 하여 줍니다.
따로 데이터베이스에 연결된 웹 서버가 없어도 동작 가능하다는 뜻 입니다!
그래서 매우 Hot한 클라우드 서버라 할 수 있습니다..+ㅅ+

파이어베이스를 사용하려면 구글계정이 있어야합니다.
* 구글계정이 없으면 만들어주세요.
그리고 나서 구글에 "파이어베이스" 라고 검색을 한 뒤에 접속하여 봅니다.

이미 만들어둔 2개의 프로젝트가 보입니다.

 

접속한 뒤에 프로젝트를 생성합니다. (기존 프로젝트가 있더라도 가급적 생성하여줍니다)
프로젝트명에는 "test" 문구는 입력하면 프로젝트가 생성되지 않을 것 입니다. 유의하여 주세요.
문제되는 것이 없으면 가급적 추천하는 데로 선택하여 넘어가도록 합니다.

 

새로운 프로젝트가 만들어졌으면 상단의 톱니바퀴를 클릭합니다.
상단 맨 좌측의 "프로젝트 개요" 라는 부분의 옆의 모양을 의미 합니다.
톱니바퀴에서 프로젝트 설정을 눌러줍니다.

톱니바퀴를 누르면 3개의 선택문구가 나옵니다.(버전업이 되서 더 나올수도 있습니다..^^)

 

그리고나서 하단을 살펴보면 3번째 아이콘에 "웹(web)"과 관련된 앱을 만들 수 있는 아이콘이 존재합니다.
물론 툴팁 형식으로 해당 아이콘이 무슨 앱인지 설명이 나옵니다.
웹과 관련된 앱을 추가하여줍니다.

저기 html테그처럼 생긴녀석을 눌러줍니다.

 

#1.검색

잠시 기다려주면 어떠한 설정파일이 나타나게됩니다.
json형태로 되어 있으며 해당내용을 복사하여 둡니다.
* 하단의 콘솔로 이동을 누르게 되면 해당 설정파일을 다시 볼 수 있습니다.

firebaseConfig에 Json형식으로 데이터가 생겼습니다. 해당 데이터를 꼭 복사하여 둡니다.

 

파이어베이스에서 제공하는 데이터베이스의 형태는 2가지가 존재 합니다. * 2020.08 기준
리얼타임 데이터베이스(realtime database)가 가장 먼저 서비스가 시작되었으며 이어서 파이어스토어(cloud firestore) 형테의 데이터베이스가 나중에 등장 하였습니다.
여기서 소개할 내용은 파이어스토어(firestore)를 활용한 데이터베이스 관리 방법 입니다.

아주 중요한 탭 입니다!
우리가 사용할 데이터베이스를 만들기 위해 왼쪽 매뉴에서 Database를 클릭합니다.
여기서 클릭해야 될 버튼은 Cloud Firestore 에 존재하는 데이터베이스 만들기 입니다!

정면에 "데이터베이스 만들기" 문구가 보이시나요?

 

가끔 리얼타임 데이터베이스를 누르는 경우가 있습니다.
Firestore 데이터베이스를 사용할 예정이라면 가급적 누르지 않도록 합니다!
다음으로 파이어스토어 데이터베이스 만들기를 진행합니다.
데이터베이스를 만들 때 반드시 테스트모드이어야 합니다. 그렇지 않으면 권한과 관련된 내용에 직면하게 됩니다.

테스트 모드입니다!

 

위 단계까지 진행하였다면 아래사진처럼 빈 화면을 만날 수 있습니다.

짜잔~ 빈화면 등장입니다!

 

파이어스토어(firestore)라는 저장소는 컬렉션 - 도큐먼트 단위로 저장되어 집니다. (몽고DB와 매우 유사합니다)
컬렉션은 일반 관계형 데이터베이스의 테이블을 의미합니다.
도큐먼트는 저장되는 데이터(레코드, 튜플)를 의미합니다.
데이터를 추가한다는 것은 1개의 도큐먼트를 지정한 컬렉션에 넣는다는 의미입니다.조금 더 쉽게 이해하려면 json형식으로 데이터를 관리할 수 있다라고 생각하시면 좋을 것 같습니다.
아무것도 없으므로 데이터를 한번 넣어보겠습니다.

 

1. 컬렉션 생성(관계형데이터베이스에 비유하면 테이블 생성)  * 이름은 board로 꼭 해주세요!

맨처음 등록을 하면 컬렉션ID를 입력하라고 합니다. 관계형 DB로 비유하면 table을 의미 합니다.

 

2. 도큐먼트 생성(관계형데이터베이스에 비유하면 컬럼 추가, 컬럼 데이터 추가)

그리고나서 다음화면으로는 넣을 데이터를 입력합니다. 관계형 데이터베이스로 비유하면 컬럼과 값 입니다.

 

3. 문서ID 넣기(관계형데이터베이스에 비유하면 Primary key 생성)

문서ID는 고유 아이디 입니다. 여기서는 자동버튼을 눌러줍니다.

 

4. 데이터 완성

데이터 완성!

 

위 4단계를 통해서 데이터를 생성하여 보았습니다.

데이터 생성을 꼭 하고 난 다음에 아래내용을 진행하여 주세요.

 

---

 

이제 그러면 앵귤러에서의 연동을 위해 준비작업을 해 보겠습니다.
프로젝트는 저번과 동일한 thirdStudy 입니다.
그리고 아래 명령어를 입력합니다.

npm install firebase @angular/fire --save

 

위 명령어는 앵귤러 프로젝트에 파이어베이스 모듈을 설치하는 명령어 입니다.

설치하는데 시간이 좀 걸리므로 기다려 줍니다.
경고 같은 문구가 나오는데 신경쓰지 않아도 됩니다.   * 2020.08.14 기준
* ng add @angular/fire 라는 명령어를 통해서도 가능합니다만 여기서는 언급하지 않겠습니다.

 

설치가 완료되면 파이어베이스 기능을 사용하기 위해서 설정을 해 주어야합니다.
역시나 설정담당인 모듈에서 하여 봅니다.
아래 코드를 확인하여주세요.

* 대상 : 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: {
    /**저장소 만들 때 생성된 json 내용**/
  }
}

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 { }

 

모듈내용 입니다. 

설명은 다음에 하도록 하겠습니다. 일단 위 내용처럼 파이어베이스와 관련된 모듈을 등록하여 줍니다.

그리고 주석처리된 부분에 프로젝트를 만들 때 생성된 정보를 입력하여 줍니다.

* 무슨 값을 넣어야 되는지 모르면 해당 페이지에서 #1.검색 을 검색하여보세요.

* 데이터의 형태가 아래처럼 생성되었을 것 입니다.

    apiKey: "값",
    authDomain: "값",
    databaseURL: "주소",
    projectId: "값",
    storageBucket: "값",
    messagingSenderId: "값",
    appId: "값",
    measurementId: "값"

 

일단 되는지 안되는지를 확인하기 위해서 app컴포넌트를 조금 수정하여 보겠습니다.

app컴포넌트 입니다! 컴포넌트 명칭 확인하여 주세요.

* 대상 : app.component.ts

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

@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();  //리턴
  }
}

 

그리고 서버를 구동하여줍니다. * ng serve

아니! 저 데이터는!!!

 

이럴수가, 파이어베이스에 저장되어있던 데이터가 나타났습니다!
드디어 실제 데이터가 연동된 기능이 탄생 한 것 입니다..ㅠ

 

이번장에서의 내용은 일단 설정과 관련된 내용으로 마무리 하겠습니다.

여기서 중요한 점은 데이터베이스와의 연결이 제대로 되어 있는지, 오류가 없이 데이터가 잘 나오는지 입니다.

위 코드에 대한 언급은 다음번에 설명하겠습니다.
뭔지는 모르겠지만 subscribe 함수가 보입니다...^^

thirdStudy.zip

0.01MB

 

* 추가

앵귤러, 리엑트, 뷰js 등 프론트 프레임워크(라이브러리)는 대체적으로 버전이 자주 올라갑니다.

이에 따라 기존에 사용되었던 기능이 버전업에 따라 동작을 하지 않을수도 있습니다.

만약 동작을 원활하게 되지 않는다면 아래 package.json 내용에서의 의존성(dependencies) 버전을 맞추어 주세요.

  "dependencies": {
    "@angular/animations": "~9.1.4",
    "@angular/common": "~9.1.4",
    "@angular/compiler": "~9.1.4",
    "@angular/core": "~9.1.4",
    "@angular/forms": "~9.1.4",
    "@angular/platform-browser": "~9.1.4",
    "@angular/platform-browser-dynamic": "~9.1.4",
    "@angular/router": "~9.1.4",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.4",
    "@angular/cli": "~9.1.4",
    "@angular/compiler-cli": "~9.1.4",
    "@angular/language-service": "~9.1.4",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }