[WIL] 드디어 사진저장 완성!!! / 오늘의 개발일지

 

 

파이어베이스 스토리지에 사진을 저장하는 것까지는 완료했는데,

getDownloadURL를 하려고 하니, promise 문법으로 인해 실행되는 시점이 데이터를 제이슨서버에 저장시키는 시점보다 늦게 실행되서데이터에는 undefined가 계속 찍히고 있었다

처음에는, 그게 늦게 실행이 되고 있다는 사실을 생각할 수도 없었고 튜터님께 여쭤보고 그 해답을 찾을 수 있었다. 

(콘솔창에 데이터가 찍히니까 왜 안넣어지는지가 너무 의문이었는데, 알고보니 콘솔창에 찍힌 데이터는 나중에 프로미스 문법으로 받아온 데이터를 표시해준 것이었다(한마디로 안불러와진게 맞앗음)

 

튜터님께서 이건 promise문법이라 데이터를 저장하는 시점보다 더 늦게 함수가 실행되서, 빈 데이터가 저장된거라고

state를 사용하면 될거라고 힌트를 주셨고 난 아래와 같은 작업을 해서 성공시켜보았당

 

먼저, 데이터 저장시점보다 먼저 실행되길 바라는 promise문법이 담긴 함수를 바깥으로 빼냈다.

const uploadImg = () => {
    const imgRef = ref(storage, `images/${uuidv4()}`);
    const imgDataUrl = localStorage.getItem("imgDataUrl");
    let downloadUrl;
    if (imgDataUrl) {
      uploadString(imgRef, imgDataUrl, "data_url")
        .then((response) => {
          downloadUrl = getDownloadURL(response.ref).then((response) => {
            setFireURL(response);
            console.log("FireURL : ", fireURL);
          });
        })
        .catch((error) => {
          console.log("error", error);
        });
    }
  };

 

 

그리고 실제 '저장'버튼 클릭했을때 실행되는 메소드에 위 함수를 호출해주는걸 중간에 껴넣었고, 

 

const onSubmitHandler = (e) => {
    e.preventDefault();
    if (!title || !content || !user || !pw) {
      alert("제목과 내용 모두 입력하세요");
      return;
    }

    // ----- 이미지url 가져오기 바뀐 부분 ------
    uploadImg();

    const newBoard = {
      id: uuidv4(),
      user: user,
      pw: pw,
      title: title,
      content: content,
      // ImgUrl 추가
      ImgUrl: fireURL,
    };

    dispatch(__postBoards(newBoard));
    setTitle("");
    setContent("");
    setUser("");
    setPW("");
    navigator("/");
  };

 

매우 중요한 뽀인트!!!

가장 바깥에 요렇게 내가 데이터에 저장하고 싶은 url을 state로 만들었당

  // fireURL는 state를 만들어주기
  const [fireURL, setFireURL] = useState("");
  //------------------------------------
  // useEffect를 사용해서 최초 uploadImg를 실행해준다.
  useEffect(() => {
    uploadImg();
  }, []);
  //------------------------------------

 

 

useEffect는 저렇게 따로빼낸 함수를 넣어서 설정해놨는데, (데이터 저장하는건 문제없이 잘 나와서)

솔직히 왜 저렇게 하니 작동이 되는지 확실하게 설명을 할 수 없어서

오늘 중으로 연구해보다 해결이 안나면 다른 분들에게 같이 물어봐야겠당ㅇㅅㅇ

 

 

오늘의 개발일지 끄읕

 

https://github.com/react-teamProject/react-teamproject/tree/feature/board-img

GitHub - react-teamProject/react-teamproject