from.velog.io/@dek1313
🐺 동기 (Synchronous)
먼저 시작된 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 끝나면 다음 작업을 시작하는 방식이다.
::동기의 동작 원리
- 코드가 실행되면 순서대로 Call stack에 실행할 함수가 쌓인다(push)
- 쌓인 반대 순서대로 함수가 실행된다 (LIFO - last in first out)
- 실행이 된 함수는 Call stack에서 제거된다(pop)
예시
이런식으로 코드의 순서대로 위에서 아래로 차례대로 콘솔에 찍히게 된다.
이렇게 먼저 실행한 작업이 끝다고 다음 작업이 실행되는 것을 동기적 처리라고 한다.
🐗 비동기 (Asynchronous)
먼저 시작된 작업이 완료되지 않아도 새로운 작업을 시작하는 방식이다.
::비동기의 동작 원리
- Call stack에서 비동기 함수가 호출되면 Call stack에 먼저 쌓였다가 Web API나 백그라운드로 이동한 후 해당 함수가 등록되고 Call stack에서 제거된다
- Web API에서 비동기 함수의 이벤트가 발생하면, 해당 콜백 함수는 Callback Queue에 이동(push)한다.
- 여기서 Event Loop가 Call stack을 확인하는데 Call stack이 비어있다면 Call stack Queue에 있는 콜백 함수를 넘겨준다(push)
- Call stack에 들어온 함수는 실행되고 실행이 끝나면 Call stack에서 제거된다.
예시
setTimeout이라는 js내장함수를 이용하는데 그림처럼 쉬질 않는다.
이유는 함수 사용법이 틀렸기 때문이다.
setTimeout 함수 안에 2를 넣어줘야 비로소 1초 쉬고 3다음에 2가 출력이 된다.
::동기와 비동기
간단한 코드로는 크게 와닿질 않았는데 상황예시를 통해 동기와 비동기의 차이를 설명해보면 우리가 청소를 해야한다면
- 세탁기 돌리기
- 청소기 돌리기
- 설거지 하기
- 걸레질 하기
이렇게 간단한 순서를 생각해보면 세탁기를 돌리고 세탁기가 다 돌아갈 때까지 아무것도 하지않고 기다리는것이 동기이다. 어마어마하게 비효율적이지 않은가?
그렇다면 상식적으로 생각해보면 일단 세탁기를 돌리고 세탁기가 다 돌아갈 때까지 다른 일을 한다 청소기를 돌린다던가 설거지를 한다던가.. 이렇게 하나의 작업이 다 끝나기 전에 다른 작업을 실행하는 것이 비동기이다.
❓ 그럼 비동기 처리는 왜 필요한가
우리가 어떤 사이트를 방문했다고 가정하고, 화면에서 서버로 데이터를 요청했을 때 서버가 언제 요청에 대한 응답을 줄지 모르는데 무작정 기다릴 순 없기 때문이다. 시간은 금이니까... 사이트가 동기적 처리라고 생각해보자 1개의 요청을 보냈다면 뭐 참을만하다. 그러나 그 요청이 100개나 200개가 된다고 하면 그 웹 애플리케이션은 실행하는데만 족히 수십분은 걸리기 때문이다.
