[Javascript] 콜백함수와 비동기 처리 part1

비동기 정말 어렵다.....  수업을 들어도 정말 이해가 안가는 녀석..

이번 정리를 통해 비동기 용어 개념은 확실히 알아놔야겠다. 

---

 

 

 

🔥 사전에 알아야 될 용어

 

- 동기

동기란 요청이 들어온 순서에 맞게 하나 씩 처리하는 방식으로, 

요청 들어온 작업이 끝날 때 까지 기다렸다가 응답을 즉시 처리하고 다음으로 넘어간다.

ex) 카페 알바생이 주문을 하나씩 받고 하나 완료 하면 다음 손님으로 넘어간다.

 

- 비동기

비동기란 하나의 요청에 따른 응답을 즉시 처리하지 않아도, 그 대기 시간동안 또 다른 요청에 대해

처리 가능한 방식이다.

요청 들어온 작업을 수행하는 대기시간 동안 다른 요청을 처리하다가 요청이 완료됬다는 이벤트 핸들러

(callback 함수)의 알림이 오면 처리한다.

ex) 카페 알바생이 손님들 음료를 만들다가 다른손님 주문을 추가로 받고 다시 음료를 만든다. 

 

-블로킹

블로킹은 자신의 수행결과가 끝날 때 까지 제어권을 갖고 있는 것을 의미한다.

 

-논블로킹

논블로킹은 자신이 호출되었을 때 제어권을 바로 자신을 호출한 쪽으로 넘기며, 자신을 호출한쪽에서

다른 일을 할 수 있도록 하는 것을 의미한다. 

 

💡 자바스크립트의 동작원리

 

자바스크립트는 싱글 스레드 기반의 언어이다.

싱글 스레드란 '한번에 하나의 작업만을 수행한다.' 라는 개념이다.

자바스크립트의 특징을 보면 비동기,동시성,논블로킹(Non Blocking) I/O 등이 있다.

 

그럼 한번에 하나의 작업만을 수행하면서 어떻게 동시성을 갖을 수 있을까?

그건 바로 자바스크립트가 비동기적으로 동작하기 때문에 싱글 스레드 기반이지만 동시에 많은 작업을

수행할 수 있기 때문이다.

 

여기서 중요한 점은 비동기로 동작하는 핵심요소는 자바스크립트 언어가 아니라 자바스크립트 런타임이다.

런타임이란 프로그래밍 언어가 구동되는 환경으로 브라우저 또는 nodeJS를 말한다. 

위의 이미지가 바로 자바스크립트 코드가 실행되면서 자바스크립트 런타임과 동작하는 요소들이다.

 

• 메모리 힙: 메모리 할당을 담당하는 곳
• 콜 스택: 코드가 호출되면서, 실행 컨텍스트가 쌓이는 곳
• Web APIs: DOM, AJAX, setTimeout 등 브라우저 자체에서 제공하는 API
• 이벤트 루프: 이벤트 발생 시 호출되는 콜백 함수들을 관리하여 콜백 큐에 전달하고, 콜백 큐에 담겨있는 콜백 함수들을 콜 스택에 넘겨준다.
• 콜백 큐: web api에서 비동기 작업들이 실행된 후 호출되는 콜백함수들이 기다리는 공간으로 이벤트 루프가 정해준 순서대로 줄을 서있으며, FIFO(First In First Out)방식