동기와 비동기

🔴 프론트엔드에서 비동기를 왜, 어떻게 처리해야 할까?

• 사용자와의 상호작용을 이끄는 프론트엔드 영역에서는 주기적으로 발생하는 인터랙션을 처리하면서 자연스레 대기 시간이 발생함. 대기시간이 반복적으로 발생하면 웹 이용률의 하락을 이끌 것임
• 무언가를 기다려야 하는 건 유저가 아닌 브라우저의 역할

🔴 Promise와 Async Function은 왜, 어떻게 사용할까?

• 기존 콜백 방식의 신뢰성, 비동기 코드 자체의 가독성을 해결하기 위함

🔆동기와 비동기

• 동기
  • 요청을 보낸 후 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 방식
• 비동기
  • 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식
  • HTTP 요청(GET, POST ...), 이벤트 핸들러(click, over ...), setTimeout, setInterval 이 있음

💡 즉, 동기 = 기다린다 || 비동기 = 안기다린다

🔆비동기 처리 방법

1. Callback 비동기 처리의 한계

문제 1. 낮은 신뢰성

문제 2. 낮은 가독성

→ 콜백 지옥: 비동기 작업을 중첩하면 콜백 함수를 계속 중첩해야 하는데, 이렇게 되면 코드의 들여쓰기 수준이 깊어지고 가독성이 떨어지며 유지 관리가 어려워짐

fetchData(function (data1) {
  processData1(data1, function (data2) {
    processData2(data2, function (data3) {
      // ...
    });
  });
});

2. Promise 객체

• Promise 객체는 자바스크립트에서 비동기 처리에서 사용되는 객체
• 미래에 값을 반환할 수도 있는 함수를 캡슐화한 객체
• 내부에서 비동기 요청이 끝나고 나면 결과 값을 연결된 콜백으로 보내줌
• 비동기 요청 수행에 대한 3가지의 상태를 가지고 있음
  • Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
  • Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태
  • Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

🔆Async Function: async/await

• firebase에서 비동기 작업을 수행할 때 .then 및 .catch 블록을 사용하지 않고 async/await를 사용하여 비동기 작업을 처리하는 것이 좋음. 이렇게 하면 비동기 작업이 완료되기를 기다릴 수 있으며 작업의 결과를 반환할 수 있음
• 비동기 실행 방식에서 동기 실행 방식으로 변경해주기 위함
• async 키워드를 사용해 함수를 정의
• 함수 내에서 await 문을 만나면 함수의 실행을 일시 중지
• await 뒤에 있는 프로미스의 수행 결과 값을 받아 함수 재진행
• 에러처리: try..catch 문 사용

(참고) https://velog.io/@yeeunk90/ReactJS-동기와-비동기