🌟JS:동기 비동기

동기 = 동시에 일어나는
비동기 = 동시에 일어나지 않는
요청의 결과가 그자리에서 동시에 일어나야 하지만 비동기는 그렇지 않다

js 동작원리
싱글 스레드 프로그래밍 언어 = 한번에 하나의 콜 스텍만을 가진다 
= 하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다

스텍은 구멍이 하나인 상자 큐는 구멍이 두개인 상자

동기 비동기

js는 싱글 스레드 프로그래밍 언어(하나의 콜 스택을 가졌다) 이고 동기적 언어로 알고 있습니다.
하나의 실행에 대한 결과를 받기까지 다른 실행을 하지 않습니다. 
보통 브라우저 환경에서 js코드가 실행되는데 브라우저는 싱글 스레드로 작동되는 
js엔진만 있는게 아니라 내장된 웹 api를 가지고 있습니다. 
js 코드내에서 비동기로 처리해야하는 요소가 생긴다면 js는 자신이 그 요소를 처리하지 않고 
web api로 넘깁니다. web api에서 해당 내용이 처리되고 콜백 큐로 들어갑니다.
여기서 이벤트루프라는 요소가 사용되는데 이벤트 루프는 js엔진의 콜 스택을 지속적으로 바라보고 있다가,
콜 스택이 비면 우선순위에따라 대기중인 큐에 대기중인 요소들을 콜 스택으로 넣어줍니다.

싱글 스레드를 사용하게 되면 동시성 문제를 신경쓰지 않아도 된다. 
사용자에게 있어서 화면이라는 자원에 여러 스레드가 동시에 접근하게 된다면 문제가
발생할 여지가 생기기 때문에 이를 사전에 방지 할 수 있다.


동기 동작 원리
1. 코드가 실행되면 순서대로 call stack에 실행할 함수가 쌓인다 (push)
2. 쌓인 반대 순서로 함수가 실행된다. (lifo)
3. 실행이 된 함수는 call stack에서 제거된다(pop)

비동기 동작 원리
1. call stack에서 비동기 함수가 호출되면 call stack에 먼저 쌓였다가 web api(=백그라운드)로 이동한 후 해당 함수가 등록되고 call stack에서 사라진다.
2. web api(백그라운드)에서 비동기 함수의 이벤트가 발생하면, 해당 콜백 함수는 callback queue에 push(이동)된다.
3. 이제 call stack이 비어있는지 이벤트 루프가 확인 하는데 만약 비어있으면, call stack에 callback queue에 있는 콜백 함수를 넘겨준다.(push)
4.call stack에 들어온 함수는 실행이 되고 실행이 끝나면 call stack에서 사라진다

자바스크립트의 코드는 이벤트 루프 기반으로 작동한다는 것입니다. 즉, 실행되는 함수를 
싱글 스레드 형식으로 처리하는 메인 '콜 스택'이 있고, 이 콜 스택이 비었을 때마다 
'콜백 큐'에서 대기 중인 함수를 콜 스택으로 불러와 실행시킵니다.

setTimeout이나 ajax 같은 비동기 함수가 호출되면, 해당 작업은 브라우저에 내장된 
WebAPI에게 넘겨집니다. 그 안에서 타이머가 동작을 하거나 네트워크 통신을 진행하고,
코드가 실행될 준비가 되면 콜백 큐에 해당 작업을 넣어줍니다. 그래서 사실상 
비동기 함수가 동기적인 함수들과 '동시'에 동작하는 것처럼 보이지만, 
이는 아주 재빠르게 콜 스택에 넘어와 실행되었기 때문입니다. 즉, 모든 건 
순차적으로 하나의 스레드(콜 스택) 안에서 돌아가고 우리는 그저 이 시간 차가 너무 작아서 
동시에 돌아간다고 착각을 하는 것입니다

web api

개발자가 브라우저 상에서 쉽게 개발할 수 있도록 도와주는 객체 모음들이다. 
웹 ap(돔 ajax settimeout)i를 이용해서 돔 요소를 조작하거나 일부 영역을 업데이트시키고 
비디오,오디오,그래픽 요소를 사용할 수 있다.
객체 기반으로 동작하고 엔트리 포인트가 존재한다