🔥 Firestore - await는 왜 사용할까? (팀프로젝트 3일차)

강의를 들으면서 firestore에 data를 저장하는법, 꺼내는 법, 그리고 갱신하는 방법은 알게됐다. 근데 왜 await를 사용하는지 궁금증이 생겼다.

🤔 await는 왜 써야할까?

1️⃣ await는 뭐하는 녀석일까

await는 비동기 코드에서 Promise가 처리될 때까지 기다리는 역할.

2️⃣ 동기와 비동기 코드의 구분

동기

: '직렬적'으로 작동하는 방식

비동기

: '병렬적'으로 작동하는 방식
즉, 비동기란 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다.

오른쪽은 동기, 왼쪽은 비동기의 방식이다.

3️⃣ 쓰는 이유

Firebase에서 데이터를 가져오거나, 추가할 때, 이 작업들은 비동기적으로 실행된다.

💡 완료되기 전에 다음 코드가 실행될 수도 있기 때문에, 데이터를 정확하게 받아오기 위해 await을 사용해야 해.

4️⃣ async await 에러 제어

await가 던진 에러는 throw가 던진 에러를 잡을 때처럼 try..catch를 사용해 잡을 수 있다.

try {
      await addDoc(collection(db, "commenting"), {
        text: comment,
        timestamp: new Date(),
      });
      console.log("댓글 게시 완료");
      $("#commenting").val(""); // 입력창 비우기
    } catch (error) {
      console.error("Error ", error);
      alert("댓글 저장에 실패했습니다.");
    }

위의 코드는 댓글 기능을 구현할 때 만들었던 try catch 문이다.
먼저 try로 해보고 만약에 안된다면? error를 catch해서 잡아줄 수 있다.
코딩할때 왜 안되지? 할때 콘솔창을 확인해서 에러를 잡을 수 있는 좋은 방법이다