웹 페이지에서 입력된 데이터를 Firebase DB에 저장하는 코드

 

 

// 'makeBtn' 버튼이 클릭되었을 때 실행되는 함수
$('#makeBtn').click(async function () {
//사용자가 입력한 값들을 변수에 저장
  let image = $('#image').val(); // 이미지 URL
  let title = $('#title').val(); // 영화 제목
  let star = $('#star').val(); //평점
  let comment = $('#comment').val(); // 코멘트

//Firestore에 추가할 데이터 객체 생성
  let doc = {
    image: image,
    title: title,
    star: star,
    comment: comment,
  };
  
  // Firestore의 're-movies' 컬렉션에 데이터 객체 추가
  await addDoc(collection(db, 're-movies'), doc);
  
  // 사용자에게 '저장 완료!' 알림 표시
  alert('저장 완료!');
  
  //페이지 새로고침
  window.location.reload();
});

 

 

여기서 

let doc = {
    'image': image,
    'title': title,
    'star': star,
    'comment': comment,
  };

 

이 코드는 데이터 객체를 만드는 코드이다.

Firestore에 저장할 데이터 객체(`doc`)를 생성한다.

 

await addDoc(collection(db, 're-movies'), doc);

 

Firestore의 're-movies' 컬렉션에 데이터 객체를 추가한다.

`await`를 사용하여 데이터가 추가될 때까지 기다린다.

 

 

여기서 처음보는 `async`라는 키워드가 있었는데 

이것은 함수에게 "이 함수는 어떤 부분에서는 기다릴 수 있는 작업이 있을거야."라고 알려주는 것이라 한다.

여기서는 `await` 키워드를 사용하여 Firestore에 데이터를 추가하는 작업이 끝날 때까지 기다리도록 만들었다.

그래서 함수에  `async`를 붙였다.

이렇게 함으로써, 데이터가 성공적으로 추가되기 전에는 알림을 표시하거나 페이지를 새로고침하지 않는다.

 

간단하게 말하면, 데이터를 추가하는 동안 다른 일을 할 수 있게 해주고, 데이터 추가가 끝나면 그때 알림을 표시하고 페이지를 새로고침하는 것이다.

 

예를들어, `addDoc` 함수는 서버에 데이터를 보내고 응답을 기다리는 동안 다른 작업을 수행할 수 있도록 해준다.

그리고 응답이 돌아오면 해당 작업이 재개된다.

 

 

그렇다면 왜 데이터가 성공적으로 추가되기 전까지 알림을 표시하거나 페이지를 새로고침 하지 않아야 할까?

만약 알림표시나 새로고침이 된다면 사용자는 실제로 데이터가 저장되었는지 확신을 할 수 없기 때문이다.

마치 물건을 포장하고 보내기 전에 "배송 완료!" 라고 외치는 것과 비슷하다. 

실제로 물건이 도착하기 전에는 확신할 수 없기 때문에, 사용자에게 혼란을 야기할 수 있다.

 

따라서 `await`키워드를 사용해 데이터가 성공적으로 추가된 후에야 다음 동작이 되도록 하는 것은, 

사용자에게 정확하게 확실한 피드백을 제공하는데 도움이 된다.