비동기 작업 처리

동기와 비동기의 차이점

1. 동기적 실행:
   • 코드가 위에서 아래로 순차적으로 실행 (하나의 작업이 끝난 후에 다음 작업 실행)
   • `console.log()`와 같은 동기적인 함수는 호출 순서대로 즉시 실행
2. 비동기적 실행:
   • 비동기 함수는 즉시 실행을 시작하지만, 그 실행 결과가 완료될 때까지 기다리지 않고 다른 작업을 진행
   • `setTimeout()`, `setInterval()`, `fetch()`, `setDoc()`와 같은 함수들은 백그라운드에서 실행되며, 결과를 기다리는 동안 다른 코드실행
   • 비동기 함수가 `Promise`를 반환
   • `Promise` : 비동기적으로 실행하는 작업의 결과(성공 or 실패)를 나타내는 객체

---

 

비동기 코드를 동기적으로 실행하는 방법

1. `promise` / `.then()` / `.catch()`

• `.then()`은 `Promise`가 완료된 후 호출될 콜백을 지정하는 방식으로, 코드가 여러 줄로 나누어져 가독성이 떨어질 수 있음

$("#addCommentBtn").click(function () {
    let name = $('#name').val();
    let content = $('#content').val();
    let customId = Date.now().toString();
    const docRef = doc(db, "Dotori", customId);

    setDoc(docRef, {
        id: customId,
        name: name,
        coment: content
    }).then(() => {
        // 문서 저장이 완료되면 페이지를 리로드
        window.location.reload();
    }).catch(error => {
        console.error("문서 추가 중 오류 발생:", error);
    });
});

 

 

   

2. `async` / `await`

• `async`
  • 함수 앞에 async 키워드를 붙이면 해당 함수를 비동기 함수로 정의
  • 이 함수는 항상 Promise를 반환하며, 비동기 작업을 처리하는 데 사용
• `await`
  • `await`은 `async` 함수 내부에서만 사용할 수 있으며, `Promise`가 해결될 때까지 대기
  • `await` 뒤에 오는 `Promise`가 완료되면, 그 결과 값을 반환
  • 즉, 비동기 코드가 완료될 때까지 기다린 후에 다음 코드 실행

$("#addCommentBtn").click(async function () {
    let name = $('#name').val();
    let content = $('#content').val();
    let customId = Date.now().toString();
    const docRef = doc(db, "Dotori", customId);
    
    await setDoc(docRef, {
        id: customId,
        name: name,
        coment: content
    });
    
    window.location.reload();
})