on
앵귤러 튜토리얼(Angular tutorial) - 25, with FireBase : alter 정리
앵귤러 튜토리얼(Angular tutorial) - 25, with FireBase : alter 정리
반응형
저번시간까지 우리는 수정기능에 대해서 살펴보았습니다.
이어서 수정기능과, 삭제기능에 대해서 살펴보겠습니다.
사실 앵귤러와 파이어스토어에서 수정기능은 아주 간단하게 구현 할 수 있습니다.
ask 서비스에 아주 간단하게 수정기능을 만들어 보겠습니다.
* 대상 : ask.service.ts
//..생략 updateData2(db_name: string, parameter : any, target_id : any){ this.collectionArray[db_name].doc(target_id).update(parameter); } //..생략
자세히 보면 doc로 시작하여 update를 호출하는 함수는 updateData함수에서 이미 사용하였던 함수입니다!
사실 updateData함수처럼 복잡하게 만들 필요는 없습니다.
구독과 발행자의 개념을 위해서 조금 어렵게 기능을 만들어 본 것 뿐입니다.
이제 경량화된 updateData2를 사용하면 쉽게 데이터를 수정 할 수 있게 되었습니다.
그러면 수정과 관련된 내용 1개를 더 살펴보겠습니다.
* 대상 : ask.service.ts
//..생략 updateData2(db_name: string, parameter : any, target_id : any){ this.collectionArray[db_name].doc(target_id).update(parameter); } updateData3(db_name: string, parameter : any, target_id : any){ //새로 추가한 수정함수 this.collectionArray[db_name].doc(target_id).set(parameter); //set..? } //..생략
set이라는 함수가 들어간 updateData3함수를 만들었습니다.
이해를 위해 한번 실행하여보겠습니다.
app컴포넌트의 내용을 수정하여 줍니다.
* 대상 : app.component.ts
import { Component } from '@angular/core'; import { AskService } from './ask.service'; @Component({ selector: 'app-root', template : '', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'thirdStudy'; constructor(private service : AskService) { //1. 등록함수 //service.addItem("board",{number:6,hello:'hello',today:new Date()}); //2. 가져오는 함수 service.getItem("board").valueChanges({idField: 'idx'}).subscribe( arg => { console.log(arg); }); //3. 수정함수 //service.updateData('board',{number:10, new_text:'hello updater1'},'OHW97JhpZeCB6dEp7KXo'); //service.updateData('board',{number:10, new_text:'hello updater2'},'OHW97JhpZeCB6dEp7KXo'); //4. 수정함수 set 타입 service.updateData3('board',{new_text:'하이'},'OHW97JhpZeCB6dEp7KXo'); } }
데이터를 수정하기 전 모습입니다.
처음의 데이터 모습입니다. number와 text항목을 가지고 있습니다.
updateData3 함수를 동작시키고 난 수정된 데이터의 모습 입니다.
뭔가 단순해졌습니다...?
동작을 시키고나니 수정대상 데이터에서 number와 text항목이 사라져 버렸습니다.
그 이유는, set함수는 데이터를 전부 바꾸어버리는 기능입니다.
기존에 존재하였던 내용을 부정하고 key값을 토대로 그냥 덮어씌우기를 해 버립니다.
set함수를 사용하는 경우에는 이러한 현상이 발생합니다.
조회하는 키 값을 대상으로 데이터를 전부 교체할 때는 set을 사용하면 됩니다.
마지막으로 삭제기능도 살펴보겠습니다.
눈치가 빠르신 분들은 이미 만드셨을 것 같습니다.
* 대상 : ask.service.ts
//생략.. deleteData(db_name: string, target_id : any){ //삭제기능 입니다. this.collectionArray[db_name].doc(target_id).delete(); } //생략..
네 맞습니다. 저게 끝 입니다.
단순하게 delete를 호출하므로써 데이터가 삭제되는 것을 볼 수 있습니다.
여기까지 우리는 앵귤러와 파이어베이스의 파이어스토어의 데이터 처리방법에 대해서 살펴보았습니다.
파이어베이스에는 리얼타임 데이터베이스도 존재합니다.
해당 기능도 파이어스토어에서 사용한 방법과 거의 유사한 방법으로 데이터를 처리할 수 있습니다.
다음시간에는 파이어베이스에 파일을 업로드 하는 방법에 대해서 살펴 보겠습니다.
thirdStudy.zip 0.01MB
from http://lts0606.tistory.com/400 by ccl(A) rewrite - 2021-10-27 22:26:52