Promise 기반 코드를 동기 코드처럼 순서대로 읽히게 작성합니다.
async 함수는 항상 Promise를 반환하고 await는 해당 Promise가 settled될 때까지 그 async 함수의 나머지만 잠시 멈춥니다. 페이지 전체 JavaScript가 멈추는 것은 아닙니다. reject는 await 지점에서 throw되므로 try/catch로 실패를 처리합니다.
코드를 읽을 때는 async function load(){ const value=await task(); } 부분부터 찾으세요. 현재 값과 실행 순서를 줄마다 적어 보면 문법을 외우지 않아도 결과를 예측할 수 있습니다.
결과가 나중에 도착해도 화면 전체를 멈추지 않아야 하는 작업에 사용합니다. 로딩, 성공, 빈 결과, 실패와 취소를 서로 다른 상태로 다루세요.
실행하기 전에 예상 결과를 짧게 적은 뒤 두 wait 작업을 Promise.all로 동시에 기다리고 결과를 합치세요. 실제 출력이 다르면 콘솔에 처음 나타난 오류와 그 직전 값을 차례로 확인하세요.
forEach의 async 콜백은 바깥에서 완료를 기다려주지 않습니다. 순차 처리는 for...of, 병렬 처리는 Promise.all을 고려하세요.
직접 바꿔보세요두 wait 작업을 Promise.all로 동시에 기다리고 결과를 합치세요.