JavaScript fetch는 왜 await를 두 번 할까

fetch 함수를 쓸 때 왜 await를 두 번 써야 할까요?

간단히 설명하면, 서버와 통신할 때 데이터가 두 단계로 나눠져서 오기 때문입니다.

첫 번째 await는 서버에서 응답이 올 때까지 기다립니다. 이때 HTTP 헤더(응답의 기본 정보)를 받게 됩니다. 이 때 서버가 에러를 보내도 이 단계는 정상적으로 완료됩니다.

두 번째 await는 실제 데이터(response body)를 JSON으로 변환하는 과정입니다. 서버에서 받은 데이터를 우리가 JavaScript에서 쓸 수 있는 형태로 바꿔 줍니다.

이렇게 나눠진 구조 덕분에 큰 데이터를 받을 때도 효율적으로 처리할 수 있으며, 데이터를 다 받기 전에도 상태 코드만 보고 에러를 확인할 수 있다는 장점도 있습니다.

실무에서는 편의성 때문에 axios를 더 많이 쓰긴 하지만, 종종 fetch를 써야할 상황에서는 이런 지식들을 알아두시면 도움이 될 것 같네요.

https://www.youtube.com/watch?v=Ki64Cnyf_cA