🛵 [JS] | ⚙️ 비동기와 JS ENGINE , JS의 작동원리

사진 출처

✨ http://latentflip.com/loupe 👍

👆 자바스크립트 코드가 JS ENGINE에서 어떻게 작동되는지 보여주는 사이트

이 사이트는 그 저 빛....✨
이렇게 좋은 사이트 만들어주셔서 정말 정말 감사합니다~!!!

---

⚙️ JS의 작동원리, JS ENGINE

사진과 설명 출처

• 자바스크립트에서 비동기로 호출되는 함수들은 호출 스택(CALL STACK)에 쌓이지 않고 TASK QUEUE로 보내진다.
• 비동기 처리란 특정 코드가 종료되지 않았어도 대기하지 않고 다음 코드를 실행하는 자바스립트 특성이다.
• EVENTLOOP은 CALL STACK이 비어있을 때만 TASK QUEUE의 함수를 CALL STACK으로 가져온다.

• 콜백함수 : 다른 함수에 인수로 넘겨지는 함수

---

⚙️ 동기 vs 비동기

사진과 설명 출처

🔹 비동기

• 분산처리

• 다른 스레드에서 일을 하도록 시키고 나서
  그 일이 끝나는 것에 관심이 없고
  바로 다시 내 자리로 돌아와요.

• 작업을 다른 스레드로 시키고 기다리지 않아요.

• 해당 스레드에서 다른 일처리를 시작할 수 있어요.

• 일단 작업을 다른 곳으로 보내요.
• 그리고 그 일이 끝나던지 말던지 나는 전혀 관여하지 않아요.

👉 작업을 다른 쓰레드에서 하도록 시킨 후, 그 작업이 끝나길 "안 기다리고" 다음 일을 진행한다. 안 기다려도 다음 작업을 생성할 수 있다.

🔹 동기

👉 작업을 다른 스레드에서 하도록 시킨후, 다른 작업을 하지 못하게 block하고 막고서는, 그 작업이 긑나길 "기다렸다가" 다음 일을 진행한다. 그 작업이 끝나길 기다리고 있기 때문에 해당 스레드에서는 작업처리를 못하고 있다. 기다렸다가 다음 작업을 생성할 수 있다.

🔹 "비동기"라는 개념이 필요한 이유?

👉 서버와의 통신(네트워크 작업) 때문예요.

🔹 비동기 👉 큐(QUEUE)      🔹 동기 👉 스택(STACK)

---

⚙️ 직렬처리 vs 동시처리

사진과 설명 출처

🔹 직렬처리 큐 (직렬처리)

• 메인스레드에서 하던 작업을 다른 스레드로 보내긴 할 건데, 다른 하나의 스레드로만 보내는 개념이예요

👉 (보통 메인에서) 분산처리 시킨 작업을 "다른 한 개의 쓰레드에서" 처리해요. 순서가 중요한 작업을 처리할 때 사용해요.

🔹 동시처리 큐 (동시처리)

• 분산 처리에서 보낸 작업들이 한개의 스레드가 아닌 여러개의 스레드로 분산되어 처리돼요.

👉 (보통 메인에서) 분산처리 시킨 작업을 "다른 여러개의 스레드에서" 처리해요. 각자 독립적이지만 (중요도나 작업의 성격 등) 유사한 여러개의 작업을 처리할 때 사용해요.

🔹 "직렬처리"가 필요한 이유?

👉 작업에 순서가 필요할 수도 있기 때문예요.

🔹 "비동기" vs "동시"

"비동기" 👉 작업을 보내는 스레드와 관련된 말이예요. 메인 스레드에서 다른 스레드로 보낸 작업을 기다릴지 말지에 관련된 개념이예요.

"동시" 👉 메인스레드에서 다른 스레드로 보낼 때 보내지는 스레드가 한 개냐 여러 개냐에 관련된 개념이예요.

---

🔹 참고

🍃 INGG사이트의 [JS] Javascript 동작 원리와 비동기처리 라는 글의 설명과 사진을 이용했어요.

INGG사이트 바로가기

🍃 인프런 사이트의 [그림으로이해하는] 동기(sync) 비동기(async)의 개념에 대한 가장 직관적인 이해 라는 강의의 설명과 영상을 이용했어요.

강의 바로가기