DAY 21 프로젝트 발표 D-DAY

DAY21 <프로젝트 발표 D-DAY>

막판 금요일부터 월요일 발표 당일까지 하루종일 팀원들 대부분 잠도 자지 않으며 완성해낸 프로젝트 발표가 드디어 오늘! 발표하기 한시간 전에 모든 준비를 끝냈다.

컨셉시안부터 차근차근 막힘없이 진행됐던 우리조는 (어쩌면 나만) 이런 프로젝트를 처음 진행해봐서 개인 작업을 하며 막히기 시작했고 자발적으로 잠도 자지 않으며 대부분이 하루에 15시간 이상 작업했고 그 결과 시안이랑 비슷한 결과를 만들어 냈다. 내가 만들어서 그런지 너무 애착가고 우리조가 제일 예쁘게 잘 만들었던것 같고 너무 좋다...😭😭

마지막까지 우리를 힘들게 했던 aync 와 await 가 있었고

export const save_writing = async (event) => {
  event.preventDefault();

  const imgRef = ref(
    storageService,
    `${authService.currentUser.uid}/${uuidv4()}`
  );

  const imgDataUrl = localStorage.getItem("imgDataUrl");
  let downloadUrl;
  if (imgDataUrl) {
    const response = await uploadString(imgRef, imgDataUrl, "data_url");
    downloadUrl = await getDownloadURL(response.ref);
  }

  const coverInput = downloadUrl ? downloadUrl : null;
  const artistName = document.getElementById("artistName");
  const songName = document.getElementById("songName");
  const title = document.getElementById("title");
  const hashTag = document.getElementById("hashTag");
  const bodyText = document.getElementById("bodyText");
  const emojiSelect = document.querySelector("input[name='emoji']:checked");

  const { uid, photoURL, displayName } = authService.currentUser;
  try {
    await addDoc(collection(dbService, "Writings"), {
      coverInput: coverInput,
      artistName: artistName.value,
      songName: songName.value,
      emotion: emojiSelect.value,
      // emotion: emojiSelect.val()
      title: title.value,
      hashTag: hashTag.value,
      bodyText: bodyText.value,
      createdAt: Date.now(),
      creatorId: uid,
      profileImg: photoURL,
      nickname: displayName,
    }).then(() => {
      alert("포스트 업로드 완료");
      // window.location.hash = "#fanLog";
    });

    const defaultImage = document.getElementById("coverView");

    defaultImage.src = "/assets/select_file.png";
    artistName.value = "";
    songName.value = "";
    emojiSelect.checked = false;
    // emojiSelect.prop("checked", false);
    title.value = "";
    hashTag.value = "";
    bodyText.value = "";

// <-------------------------- Trouble shooting -------------------------->

// 게시글을 저장(Create) 함수 : save_writing
// 게시글 불러오기 (Read) 함수 : getPostList

// 문제발생 >>> 게시글을 저장(Create) 하고 새로고침 해야 게시글이 피드에 불러와짐 (Read)
// 원인 >>> Create 함수와 Read 함수가 비동기여서 각각 따로 작동했기 때문
// 해결방법 >>> sync / await 을 활용해 Create 함수에 Read 함수를 종속시켜 동기로 만들기  
//            (Read 함수가 끝나야만 Create 함수 완료될 수 있게 함)

// <-------------------------- Trouble shooting -------------------------->

    await getPostList(event);
  } catch (error) {
    alert(error);
    console.log("error in addDoc:", error);
  }
};

더욱 더 공부할게 많고 알아야할게 많다고 느낀 프로젝트가 마무리가 됐다.

오늘 했던 프로젝트는 앞으로 팀이 또 바뀌겠지만 우리끼리 모여서 더 디벨롭 하기한 프로젝트. 앞으로 구현 못한 기능들, 그리고 하고싶던 기능들 마구마구 달 수 있을 때까지 더 열심히 해보자!