Angular 11 + firebase(firestore) 프로젝트 #01 - firestore 연결

앞서 진행했던 내용들이 있는데 이거랑 상관 없으니까 쫄지 말고. 이 게시물만 봐도 Angular 최신 버전이랑 firebase 연동함. 처음 내용은 개념 다시 복습하고 넘어가는거임

 

일단 짚고 넘어가자

 

모듈

: 컴포넌트 관리.
: 각종 정보(서비스, 일반 객체 등)를 제공.
: 다른 사용자가 만든 모듈을 등록(import)하여 사용하기 위해서는 내가 만든 모듈에 등록.

 -> 기억 나지? imports: [] 안에 쓰면 자동으로 맨 위에 import {} from 추가 되던거

컴포넌트 (ng g c 컴포넌트이름)

: 화면구성. 
: 화면에 대한 모든 기능을 담당.
: 컴포넌트간의 데이터 - 컴포넌트에서 속성이나 Input 또는 Output같은 데코레이터 사용.
: 컴포넌트간의 데이터 공유는 서비스를 통해 구독(subscribe)하는 형태로도 공유.

ex)

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

서비스 (ng g s 서비스 이름)

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

: 컴포넌트는 생성자를 통해서 이러한 서비스를 받아서 사용.

ex)

beforeEach(() => {
	TestBed.configureTestingModule({});
	service = TestBed.inject(AskService);
});

라우터

: 가장 먼저 동작하는(bootstrap) 모듈에서 가장 먼저 동작하는(bootstrap) 컴포넌트에 <router-outler> 노드를 붙여서 동작.

   -> 이거로 templateUrl 대체해버렸었지
: 라우터는 사용자의 다양한 요청 경로에 따라서 지정된 컴포넌트로 이동하는 역할.

ex)

const router : Routes = [  //라우팅
  {path : 'login' , component : LoginComponent},  
  {path : 'board' , component : BoardComponent, canActivate: [AuthGuard]},  // board 갈 때에 guard 한 번 넣자
  {path : '', redirectTo : '/login',  pathMatch : 'full'}
]

가드 (ng g g 가드 이름)

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

ex)

import { TestBed } from '@angular/core/testing';
import { AuthGuard } from './auth.guard';

describe('AuthGuard', () => {
  let guard: AuthGuard;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    guard = TestBed.inject(AuthGuard);
  });

  it('should be created', () => {
    expect(guard).toBeTruthy();
  });
});

 

나 파이어베이스 연결하는거는 또 새로운 프로젝트 만들어서 할거다. 말했어. 만들어놔. 그리고 거기 들어가놔. 비주얼스튜디오 상에서.

terminal: ng new 만들려는프로젝트이름

ex) ng new bearbookclub

이라고 했음 난. 상관 없어요. ng new myProject 이런 식으로 해도 됨.

 

ng : 앵귤러 명령어

new : 새로운 프로젝트를 만든다

 

 

firebase 만드는건 진짜 쉬움. 만드는 과정은 텍스트로 대체함. 개인정보가 들어감.

1. chrome 이라면 구글 계정에 로그인 되어있으면 편하게 진행되니까 제발 그냥 좀 했으면... 아니 그냥 해야됨. 꼭 하셈

firebase.google.com/

Firebase

시작하기 누르면 됨.

프로젝트를 만들자. Add project.

test 버전으로 만들고 나머지는 default로 먼저 뭐가 설정이 되어있을거야 그걸 만들어 그냥 그냥 진짜 쭉 쭉 진행하셈. 이건 못하면 아픈거임.

에이 아픈 사람도 있을 수 있지. 나도 만들자! 그냥 새로 만들어서 함

프로젝트 이름은 맘대로 ㄱ

구글 분석 흠 일단 난 해봄

계정 선택은 그냥 default Account for Firebase 함

create pproject 하면서 기다리자. 오래는 안걸림

완료되면 continue 누르고 web app 을 선택하자 </> 된걸로.

firebase hosting 할래? 하는데 음 난 놉 

시간 좀 지나면 SDK 쪽에 문서가 뭐가 쭉 나올거야. 그 중에서 var firebaseConfig라고 묶인 곳 그곳을 싹 복사한다. 그 새부 내용은 개인적인 것이기 때문에 안보여줌ㅋ 하여튼 복사나 해놓고 완료 하고 Cloud Firestore 가자

근데, 물론 이것도 선택이다. Realtime Database를 할 수도 있고 Firestore을 사용할 수도 있다.

Realtime 저거는 진짜 json처럼 한 번에 쭉 쓰는거고 오래되고 그러긴 함

Firestore은 최근에 나온건데 맘에 드는게 있어.멍청하게 맨날 어레이 어레이 이런게 아니라 쉽게 구조를 말하면

collector가 있어 그 안에 개체 하나씩 생길거 아냐 걔네가 다 하나하나가 document. document는 또 안에 collection 만들 수 있고. document 안에 document가 바로 있는 구조는 아니다

test용으로 만들어 밑에꺼.

다 만들면 나는 

이렇게 만들거야 그냥 위에 + 버튼 눌러서 해보면 암. 이건 설명 ㄴ필요 일단 그래도 다들 UID 는 있어야될거 같아서 id를 넣었고, 로그인을 하는 과정은 어차피 email, passwd로 할거임

 

그런데 아직! 학생이라면 괜찮은데 진짜 비밀번호를 생으로 string으로 넣으면 그거 불법입니다ㅋㅋㅋ 면접이나 인턴이나 신입때 passwd필드를 있는 그대로 넣어봐요. 한시간동안 욕먹기 가능 .(학생 인턴때 경험담)

변환하는 걸 써서 해야됨. 이건 일단 실험용 개인 프로젝트라 바로 감.

 

어차피 지금 실무용이라 나중에 하긴 할건데 그때 뭐 시간 되면 하고.

 

일단 연동을 하려면 파이어베이스 firebase CLI를 설치해야지

npm install firebase-tools

다른 사이트들 보면 백날 저기에 -g 옵션을 줘서 에러를 한참 띄우던데 그냥 글로벌 옵션 지우고 프로젝트 안에서만 하면 문제 없음. 물론 이 포스트 전체를 mac 유저 기준으로 썻지만...이제와서 미안하지만 뭐 다른 거 사용자라면

firebase.google.com/docs/cli#install-cli-windows

Firebase CLI 참조

자세히 나와있으니 참조.

 

나는 좀 신박한 방법으로 간다.

일단 ctrl + shift + ~ 로 비주얼 스튜디오에서 터미널을 연다

 

terminal : firebase login

하면 바로 하고있던 그거가 firebase 사이트에서 하던 구글 계정으로 로그인이 된다. 이거때문에 좀 제발 하라한거.

그 다음에는

terminal : ng add @angular/fire --save 하고 목록 중 만들었던 프로젝트를 가져온다.

--save를 한다는건 무냐면 angular/fire 을  angular에 import했다는 사실을 나중에 너가 프로젝트를 build 하고 publish 할 때에 내용이 추가가 된다는 소리야. local에만 남는다는게 아니라.

그러면 적용하는 코드들을 작성해야지.

app.module.ts에 추가하자

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

const firebaseConfig = {
  production: true,
  firebase: {
    apiKey: "AIzaSyA2ju8CWsuWSqUJotQ_As9u_91u8Mo0Z0U",
    authDomain: "bearbookclub-d1c67.firebaseapp.com",
    projectId: "bearbookclub-d1c67",
    storageBucket: "bearbookclub-d1c67.appspot.com",
    messagingSenderId: "340144213750",
    appId: "1:340144213750:web:3621045a84924cadc7a6d7",
    measurementId: "G-CPKK7JV2X0"
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    AngularFireModule.initializeApp(firebaseConfig.firebase, '/'),
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

말했었지 그대로 복붙하면 죽인다고 imports에 들여오면 상단에 import {} from 추가 된다고. 그런데 AngularFirestoreModule은 그게 잘 안될때가 있어서 상단에 import{} from 을 먼저 써야하는 경우도 있음. 참고.

 

추가하고 띄워봐야지.

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'bearbookclub';

  private database : AngularFirestore;  // 파이어스토어를 쓸건데 그건 private해야겠지 당연히. database는 내가 지은 이름이고.
  private itemCollection: AngularFirestoreCollection<any>;  //collection을 가져올건데 일단 다 가져와

  constructor(db : AngularFirestore) {  // AngularFirestore을 db라는 이름으로 가져올거고
    this.database = db; // this.database 가 AngularFirestore 이라는 걸 알려주고
    this.getItem('user').subscribe((res)=> {  // 아까 firestore페이지에서 user 라는 collection 만들었었잖아. 그거 구독하자.
      console.log(res);
    });
  }

  getItem(db_name : string){  // 이건 이제 가져오는 행위 하는 함수를 만드는거야
    this.itemCollection = this.database.collection<any>(db_name, (ref) => ref); // 이건 collection에 접속하는 코드. 위에서 이 함수를 쓰지
    return this.itemCollection.valueChanges(); // 구독한걸 퉤 뱉는거야
  }

}

ng serve -o 로 웹페이지에서 봐보자.

아까 console.log로 뱉어보라 했으니까 F12 키 눌러서 보자

솔직히 ㅈㄴ 감동 ㅇㅈ? 데이터 바꿔서 함 보자

음 지렸고.

 

다음엔 데이터베이스에서 CRUD 하는거 보자. 데이터베이스라 하기도 좀 그렇긴 하다..