Firebase 이미지+텍스트 동시 업데이트

과정 개요

처리 경우를
(1) 텍스트 정보만 변경 시, (2) 프로필이미지 + 텍스트 정보 변경 시 로 나눈다.

텍스트 정보만 변경 시, 바로 Firestore에 업데이트하고
프로필이미지 + 텍스트 정보 변경 시, storage 업로드 > 이미지 URL 포함한 유저 정보 데이터를 Firestore에 업데이트한다.

문제상황

---

1 커스텀 객체 할당 불가 오류

DB업데이트 하려는데 크롬 콘솔에 커스텀 객체는 필드값에 넣을 수 없다는 오류 뜸

원인
요소만 선택해서...undefined
해결
요소.val()로 선택하니 됨

2 비동기 함수 처리 문제

프로필이미지를 storage 업로드 후(가)에 DB에 저장(나)해야 하는데, (가) 가 비동기 코드라 (가) > (나) 순차 실행이 되지 않는다.

해결
(A)DB에 업로드하는 함수에 업로드 데이터 담은 변수를 파라미터로 집어 넣도록 한다.
storage 업로드 성공 후 실행 함수(then 이하)에 직접 (A)를 넣는다. 이 때 저장할 데이터에 이미지 URL을 저장 후에 파라미터에 넣는다.

전체 코드

1. 제출 버튼 클릭 시 처리 함수

// 제출 처리
function handleSubmit() {
  $('#submit').click(() => {
    dataToSave = {
      name: $('#username').val(),
      tel: $('#tel').val(),
    };

    if (ImgChanged) {
      uploadUserImg();
      return;
    }
    console.log('이미지 X');
    console.log(dataToSave);
    saveToDB(dataToSave);
  });
}

2.string 타입 데이터 업로드 함수.

변수를 파라미터로 넣어 상황에 따라 다른 변수 값을 넣을 수 있도록 처리한다.

   // 이미지 외 데이터 업로드
      function saveToDB(a) {
        console.log(a);
        db.collection('user')
          .doc(myUID)
          .update(a)
          .then(() => {
            console.log('success');
          })
          .catch((err) => {
            console.log('에러 ', err);
          });
      }

3. 이미지 업로드 함수

// 이미지를 storage에 업로드
function uploadUserImg() {
// ######### [2] DB에 파일 저장한다. ###########
const storage = firebase.storage();

// 저장할 DB 경로 지정
var storageRef = storage.ref();
var loc = storageRef.child('profile/' + file.name);

var uploading = loc.put(file);
uploading.on(
  'state_changed',
  // 변화시 동작하는 함수
  console.log('업로드중'),
  //에러시 동작하는 함수
  (error) => {
    console.error('실패사유는', error);
  },
  // 성공시 동작하는 함수
  () => {
    uploading.snapshot.ref.getDownloadURL().then((url) => {
      console.log('업로드된 경로는', url);
      console.log(url);
      const dataWithImg = {
        name: $('#username').val(),
        tel: $('#tel').val(),
        profile: url,
      };

      saveToDB(dataWithImg);
    });
  }
);
}