TIL : 프로젝트 4일차

오늘은 페이지 게시물에 사진을 업로드하는 기능을 구현하였다.

프로필사진 업로드를 응용하면 잘 해결될 것 같아서 가벼운 마음으로 시작했지만,
시작과 동시의 아래의 에러메시지가 뜨면서, 점점 마음이 무거워졌다.

FirebaseError: [code=invalid-argument]: Function addDoc() called with invalid data. Unsupported field value: undefined (found in field movieImage in document reviews/utb0irBuhweVr2TL2esd)

응용한다고 이것저것 적어보고 시도했는데, 만난 오류이니까 하나하나 고치다보면
해결될 것이라고 생각했다.
근데 저 오류는 고치다보면 다시 마주하게되고, 고치다보면 다시 마주하게 되었다...
아무래도 내가 코드를 너무 마음대로 써내려간 탓이라고 생각했다.
그래서 도저히 못고치고 구현도 안되어서 튜터님에게 찾아가서 해결했다.

import {
  doc,
  addDoc,
  updateDoc,
  deleteDoc,
  collection,
  orderBy,
  query,
  getDocs,
} from "https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js";
import {
  ref,
  getDownloadURL,
  uploadString // (1)
} from "https://www.gstatic.com/firebasejs/9.14.0/firebase-storage.js";
import { v4 as uuidv4 } from "https://jspm.dev/uuid"; // (5)
import { dbService, authService, storageService }  from "../firebase.js";

export const save_image = async () => {
  const imgRef = ref(
    storageService,    `movies/${authService.currentUser.uid}/${uuidv4()}`
  ); // (4) 
  const imgDataUrl = localStorage.getItem("imgDataUrl");
  console.log('imgdataurl:',imgDataUrl)
  let downloadUrl;
  if (imgDataUrl) {
    const response = await uploadString(imgRef, imgDataUrl, "data_url"); // (1)
    console.log('response :',response)
    downloadUrl = await getDownloadURL(response.ref); // (2)
    console.log(downloadUrl)
  }
  return downloadUrl; // (3)
};
 
export const uploadImage = (event) => {
        const theFile = event.target.files[0]; 
        const reader = new FileReader();
        reader.readAsDataURL(theFile); 
        reader.onloadend = (finishedEvent) => {
        const imgDataUrl = finishedEvent.currentTarget.result;
        console.log(imgDataUrl)
        localStorage.setItem("imgDataUrl", imgDataUrl);
        
 }; }

// Create API
export const save_review = async (event) => {
  event.preventDefault();
  const review = document.getElementById("review");
  const movieTitle = document.getElementById("movieTitle");
  let movieImage = await save_image();
  const { uid, photoURL, displayName } = authService.currentUser;
  try {
    await addDoc(collection(dbService, "reviews"), {
      movieTitle : movieTitle.value,
      review : review.value,
      movieImage : movieImage,
      createdAt: Date.now(),
      creatorId: uid,
      profileImg: photoURL,
      nickname: displayName,
    });
    review.value = "",
    movieTitle.value = "",
    movieImage = "",
    alert('리뷰를 저장했습니다.')
    getReviewList();
  } catch (error) {
    alert (error);
    console.log("error in addDoc")
  }
}

위는 완성된 코드이며, 오류를 일으킨 부분은 아래와 같다. ( 주석 표시된 부분이 수정한 부분 )

1. storage에서 uploadString을 import를 하지 않았다.
   url을 받아오는 uploadString을 쓰지 않아 url이 안받아진 것.
2. getdownloadUrl은 변수를 하나만 취급하는데 2개를 넣었다.
   ⭐️ API에 아무거나 넣지말고, 문서를 꼭 잘 찾아보자! ⭐️
3. saveImage라는 함수에 return값을 주지 않았다.
4. ref에 폴더를 넣지않고 파일만 올라가게 만들었다.
5. 피드백받은 후, 돌아와서 수정해보니 uid오류도 계속 떠서 확인해보니, uid도 import를 안했던 이유였다. 하하

개념정리
await : Promise를 기다리기 위해 사용되는 연산자, async function 내부에서만 사용할 수 있다.
async : 객체를 반환하는 하나의 비동기 함수를 정의하며, 이벤트 루프를 통해 비동기적으로 작동하는 함수, Promise를 사용하여 결과를 반환한다.

지금은 구현하고자하는 기능을 잘 구현해서 게시물과 함께 올리는 사진도 storage에 잘 올라가고, firestore에 사진URL도 다 잘 들어간다 !

오류해결과 동시에 다른 오류가 발견되어서 이제 다시 해결해야하지만, 팀원분들이랑 같이 머리맞대고 고민하며, 여러 오류들을 함께 헤쳐나가고 있어서 마음은 든든하다 !
오늘 오류도 잘 해결되었듯이, 어려워도 내일 팀원들과 같이 풀어보면 이번 오류도 잘 풀릴거라고 생각한다 !