동기와 비동기

동기(synchronous)와 비동기(asynchronous)의 개념

자바스크립트는 동기적으로 작동한다.

일반적으로 각 코드 블록이 이전 블록이 끝난 이후에 순차적으로 실행

 

💡비동기는 왜 필요할까?

어떤 명령을 실행할 때 그 명령이 언제 끝날지 예측하기 어렵거나 또는 주가 되는 작업이 아닐 때 사용

웹 브라우저와 서버가 통신할 때 언제 끝날 지 예측하기 힘들다. (인터넷이 느리거나, 서버가 느리거나)

통신이 끝날 때까지 아무것도 못하고 있는 것보다는 다른 일을 하고 있다가 통신이 끝났을 때 콜백이 호출되면서 작업을 나중에 하면 훨씬 효율적

(예시1) 네이버에서 네트워크 탭 열고 검색창에 ㅅ만 입력하고 통신한 것들 확인(비동기 통신, 새로고침 현상 안 일어남)

(예시2) 네이버 지도 같은 경우 모든 데이터를 가져오기 전에 화면에 먼저 표시됨

동기적으로 동작한다면 데이터를 가져오기 전까지 사용자는 빈 화면만 보고 있어야 함

 

📍비동기 통신 예 - fetch()

Fetch API를 사용하면 웹 브라우저가 웹 서버에 HTTP 요청을 할 수 있음

const data = fetch('api-url'); // fetch를 사용하여 어떤 URL에서 데이터를 가져온다고 가정
console.log('Finished');
console.log(data);

만약 동기적으로 동작한다면, fetch작업이 완료된 후에 다음 행이 실행될거라 예상하지만

실제로는 fetch가 호출된 직후 바로 다음 행에 있는 두 console.log()도 실행

이러한 현상이 발생하는 이유는 fetch가 비동기적으로 수행되기 때문

즉, fetch가 완료될 때까지 코드 실행을 중지하는게 아니라 계속해서 다음 행을 실행

 

이를 해결하기 위해 콜백 또는 프로미스를 사용하면 fetch가 무언가를 반환하는 시점까지 기다리게 할 수 있다.