Angular 11 + firebase(firestore) 프로젝트 #04 - 데이터 CRUD - C addItem 구현해보기

이제까지 Read 기능에 대해서 알아보았다. 현재는 Collection 에 접근을 하는 것을 했는데 나중에 데이터가 깊어지면(하부로 쭉쭉 들어가게 되는 구조) 또 알아보자.

ex) Collection/document/collection/document ... 이런 구조 나올 때.

 

일단 aaddItem 함수를 짜보자

서비스로 넣는게 맞다고 생각한다. 그러면 일단 

ask.service.ts 파일을 가지고 작업을 한다

 private collectionArray = {};	// itemCollection 대신 사용할 변수
 
 // 중간 내용 생략
 
  getItem(db_name: string) {
    if(this.collectionArray[db_name]){
      this.collectionArray[db_name] = null;
    }
    this.collectionArray[db_name] = this.database.collection<any>(db_name, (ref: CollectionReference) => {
      return ref;
    });
    return this.collectionArray[db_name];
  }

  // CRUD : Create 기능
  addItem(db_name: string, data: any){  // 인자로 받는 데이터를 
    if(this.collectionArray[db_name] == null){	// 지금 추가할거 없으면 이걸 넣는다고
      this.collectionArray[db_name] = this.database.collection<any>(db_name);
    }
    this.collectionArray[db_name].add(data);   // Collection에 넣는다.
  }

일단 addItem을 db의 collection의 이름 쓰고 넣는데, 지금 일단 이러면 중복 데이터가 들어가고, 전혀 관리가 없이 constroct 하는 동시에 만들어지니까 일단 고칠거야. 이렇게 하고 저장 누르자마자 바로 데이터가 삽입이 된 것은 확인 간으함. 이것도 바꿔야지. getItem도 트리거를 하나 넣어야겠어. 일단은 이정도는 해놓고. 

 

app.zip

0.01MB

자 뭐가 하나 둘 추가되니까 슬슬 살짝만 잘못해도 ㅈ됨을 감지한거지. 일단 내가 급해서 github에 올리진 못했으니 일단 여기에 박제.

 

 

나는 모든 이런 기능을 다 ask에 집어넣는거에 대해 좋지 못하다고 생각함. 고로 나는 addUser 하는거를 User 컴포넌트에 넣을 것이다.

  // html에서 input으로 이 녀석들을 설정할거임
  email: string;
  passwd: string;
  full_name: string;
  phone_number: string;
  grade: number;
  
  // 저 녀석들을 담아 넣을거임
  private collectionArray = {};
  
  /*생략*/
  
  // 구현한 함수를 부를 녀석. 인자 없이 해야 html에서 부르기 편해서 그냥 만듬.
  // created_time 추가.
  addItem(){
    this.addUser("user", {email: this.email, passwd: this.passwd, full_name: this.full_name, grade: this.grade, phone_number: this.phone_number, created_time: Date()});
  }

  // CRUD : Create 기능 구현
  addUser(db_name: string, data: any){  // 인자로 받는 데이터를 
    if(this.collectionArray[db_name] == null){
      this.collectionArray[db_name] = this.database.collection<any>(db_name);
    }
    this.collectionArray[db_name].add(data);   // Collection에 넣는다.
  }