Vue.js X Firebase

kyj2471·2021년 1월 28일
0

Vue.js

목록 보기
8/8

2번째 미션

  • bbs/user data => realtime database
  • C.R.U.D => firestore
    이렇게 첫번째 미션을 받고 전의 velog에 정리를 하였다.
    2번째 미션으로는
  • 라이브러리를 사용해서 테이블 excel로 출력하기
  • 이미지 업로드(firestore) 입니다.

엑셀로 데이터 받기

처음엔 이걸 어떻게 하지? 생각을 했지만 XLSX라는 라이브러리를 사용해야한다는걸 알고 XLSX 를 설치하였다.
그리고나서 사용법을 그대로 따라하면 된다!

getMySheetExcel() {
      const data = XLSX.utils.json_to_sheet(this.data);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, data, "apply");
      XLSX.writeFile(workbook, "test.xlsx");
    },

이렇게하고 저 함수를 excel down이라는 버튼을 하나 만들어 온클릭 이벤트만 주면 된다.

사진 업로드하기

이부분이 좀 고생한 부분입니다.

previewImage(e) {
      this.uploadValue = 0;
      this.picture = null;
      this.imageData = e.target.files[0];
    },
    onUpload() {
      this.picture = null;
      const storageRef = firebase
        .storage()
        .ref(`${this.imageData.name}`)
        .put(this.imageData);
      storageRef.on(
        `state_changed`,
        (snapshot) => {
          this.uploadValue =
            (snapshot.bytesTransffered / snapshot.totalbytes) * 100;
        },
        (error) => {
          console.log(error.message);
        },
        () => {
          this.uploadValue = 100;
          storageRef.snapshot.ref.getDownloadURL().then((url) => {
            this.picture = url;
          });
        }
      );
    },
 handleOk(e) {
      firebase.firestore().collection("boards").add({
        userName: this.userName,
        comName: this.comName,
        content: this.content,
        phoneNumber: this.phoneNumber,
        url: this.picture,
      });
      console.log(this.picture);
      this.visible = false;
      this.data = [];
    },

html부분

 <template slot="url" slot-scope="url">
          <img class="urlimg" :src="url" />
 </template>

이런식으로 해결했다.
처음 했을때 사진이 50개가 넘게 올라가는 버그가 있었습니다
저는 받아주는 함수에서 문제가 있는줄 알고 수정하려고 엄청 노력을 했는데 잘 되지 않았다.
그런데 알고보니 html부분에서 어차피 받아오는 url은 하나이고 맵을 돌릴필요없이 각각의 url만 들어가면되는것이였다.
이런 사소한 문제 때문에 좀 오래걸렸다.

위 코드의 단점

오늘 CTO님께 코드 리뷰를 받으면서 배운점인데
저의 위코드는 onSnapshot을 통해서 받아오는데 이 메서드는 항시 수신대기를 해준다.
사실 이 메서드를 사용한 이유도 이것 때문이다.
하지만 onSnapshot이란 메서드는 수신대기를 계속해서 하고있다는 이유로 많은 코스트가 들게되어 비용이 크게 발생한다.
그럼으로 받을때는 get이란 메서드로 받고 삭제하는 메서드또한 수정해야한다!
지금부터 코드 리팩토링과 추가 미션받은걸 진행하면서 계속해서 많이 배워야한다!! 할게많지만 기대되는 주말이 될것같다

결과물

profile
[ frontend-developer ]

0개의 댓글