학습내용

Synchronous

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  alert('You clicked me!');

  let pElem = document.createElement('p');
  pElem.textContent = 'This is a newly-added paragraph.';
  document.body.appendChild(pElem);
});

JS는 single threaded이기 때문에 alert창에서 OK를 누를 때까지 textContent가 나타나지 않는다. Blocking, 사용자의 입력을 처리하느라 웹 앱이 프로세서에 대한 제어권을 브라우저에게 반환하지 않는 현상이다.

JavaScript is single threaded

• Thread는기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스이다. 각 thread는 한 번에 하나의 작업만 수행할 수 있다.
• JS는 싱글 thread를 가지고 있어서 CPU가 여러 개 여도 main thread라 불리는 단일 thread에서만 작업을 실행할 수 있다.

Asynchronous

외부 디바이스에서 어떤 종류의 리소스에 액세스하거나 가져오는 기능 등에 많이 사용한다. 예를 들어, 서버에서 이미지를 가져올 때 네트워크 환경, 다운로드 속도 등의 영향으로 delay가 생기면, 그 이미지를 이용해야만 하는 코드들에서 에러가 나기 때문이다.

Main thread: Task A                   Task B
    Promise:      |__async operation__|

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Concepts