Vue.js X Firebase

kyj2471·2021년 1월 25일
0

Vue.js

목록 보기
7/8

Vue.js와 Firestore

지금까지 만든 페이지를 바탕으로 firestore를 이용해서 CRUD기능을 넣은 페이지를 구현해 보았다.
결과물은 위와 같으며 신청하기 버튼을 누르면 모달창이 나오게되고
그 모달창에서 값을 입력하면 테이블에 실시간 추가되며 새로고침을 하지 않아도 추가되며 Edit버튼에서 수정이나 삭제 기능을 넣어서 만들었습니다.

데이터 입력하기

import firebase, {firestore} from "firebase"

handelOk(e) {
  firebase.firestore().collection("boards").add({
    userName:this.userName,
    comName:this.comName,
    content:this.content,
    phoneNumber:this.phoneNumber,
  });
  this.visible = false;
  this.data = [];
};

위의 코드를 이용해서 데이터를 firestore에 담을 수 있습니다.
this.data = []를 이용해서 주입한 데이터가 바로 출력될 수 있도록 합니다.

데이터 불러오기

mounted(){
const fs = firebase.firestore();
fs.collection("boards").onSnapshot((qs) => {
	qs.foreEach((doc) => {
    const v = {
    	key:doc.id,
        comName: doc.data().comName || "undefined",
        phoneNumber: doc.data().phoneNumber || "undefined",
        content: doc.data().content || "undefined",
        userName: doc.data().userName || "undefined",
        };
        this.data.push(v);
        });
       });
     },

위의 코드에서 onSnapshot이 가장 중요하다.
계속해서 데이터를 추적해주는 역할을 합니다.
또한 unde값을 따로 조건부로 걸어주지 못하면 나중에 수정이 안됨으로 따로 undefined라는 스트링값이 나올 수 있게 해주었다.

실패한 데이터 불러오기...

이코드는 제가 실패했던 코드인데 분명 방법이 있을 것인데 결국 찾지못하였다.

created() {
    this.read();
   },

이렇게 걸어주고

 async read() {
      const snap = await firebase.firestore().collection("boards").get();
      this.data = snap.docs.map((v) => {
        const sdata = v.data();
    console.log(v.Vv.key.path.segments[6]);
    console.log(sdata);
    console.log(v.id);
        return {
          id: v.id,
          userName: sdata.userName,
          comName: sdata.comName,
          content: sdata.content,
          phoneNumber: v.phoneNumber,
        };
      });
    },

이런식으로 처음에 도전했었는데 고유한 id값을 줄수없다는 에러가 해결이 안되서 포기하였다.
console.log도 지우지 않았다.
this.data를 찍으면 키값이 있는데 한번더 벗기면서 키값이 뚝 떨어져 나가버렸다...
console.log(v.Vv.key.path.segments[6]);여기에 저의 소중한 키값이 있었는데.. 문제의 해결점이 앞에 보이는데 해결을 못해서 오랜시간을 허비하다 결국은 포기했다
하지만 분명 방법있을것이고 더좋은 방법이 있어서 우선 포기했지만 꼭 다시 개인 공부를하며 다시 찾아낼것이다

데이터 저장

save(key){
  const newData = [...this.data];
  const target = newData.filter((item) => key === item.key)[0];
  let newPostKey = firebase.firestore().collection(`boards`);
  if(target) {
    target.editable = false;
    this.data = newData;
  }
  firebase.firestore().collection("boards").doc(key).update({
    	userName: target.userName,
        comName: target.comName,
        content: target.content,
        phoneNumber: target.phoneNumber,
  })
  this.editingKey = "",
    this.data = [];
},

데이터 저장은 전에도 했던것이라 어려울게 없었다.
this.data = []을 주석처리 해놓고 데이터 바로 안나와서 혼자 머리 아프게 굴렸는데...그러지 말자!!
doc()안에 경로를 알려줘야하는것 정도 외에는 그렇게 어렵진 않았다.

profile
[ frontend-developer ]

0개의 댓글