AJAX 비동기통신, 자바스크립트엔진 동작방식 이해하기

AJAX

• Asynchronous JavaScript and XML
• AJAX ( 비동기 방식의 자바스크립트 XML)
• AJAX Apps
  • 구글맵, VIBE, 네이버 검색 등
• 직관적이고 자연스러운 사용자 상호액션 방식
  • 기존 클릭이 필요하지 않음
• • 기존 → 서버요청, 대기, 전체화면 새로고침
  • AJAX → 업데이트가 필요한 부분만 변경화면의 일부분만 변경

동기를 사용한 예제 코드 

function foo() {
  console.log("foo");
}

//delay 시간동안 멈춤, 대기( 동기 )
function sleep(delay) {  
  var start = new Date().getTime();
  while (new Date().getTime() < start + delay);
}

function bar() {
  console.log("bar");
}

sleep(3000);
foo();
sleep(3000);
bar();

비동기 사용 예제 코드 

function foo() {
  console.log("foo");
}

function bar() {
  console.log("bar");
}

setTimeout(foo, 3000);
setTimeout(bar, 3000);

⇒ 3초 있다가 실행해줘, 두개 동시에 실행했으므로 3초 걸림

자바스크립트는 싱글스레드 -> 무조건 동기적 방식밖에 못씀
그래서 이를 해결하기 위해 AJAX 통신을 만들었다.

JS 가 당장 처리할 수 없는 것들은 WEB API 로 보낸다.
중요한 것은 들어가는 순서가 아니라 끝나는 순서!
						 [ WEB API ]
|  로봇청소기 돌려 - 먼지통 비우기   |
|  세탁기 돌려 - 빨래 꺼내           |

      WEB API 에서 미션을 TASK QUEUE 로 보내고, 이벤트루프가 감시중!

						[ TASK QUEUE ]
|  그릇 꺼내  , 빨래 꺼내,    먼지통 비워..|
 

 

 

자바스크립트 엔진

이렇게만 있다면 비동기가 될 수 없다.

자바스크립트는 브라우저 상에서 실행된다.

따라서 아래와 같은 그림이 된다.

 

브라우저에는 이벤트루프가 존재한다.

비동기함수이기 때문에 setTimeout(foo), setTimeout(bar) 둘다 실행되어 테스크큐에 할당된다.

이벤트루프는 테스트큐가 끝났는 지 지켜보다가(3초 뒤에 foo 를 실행하기로 했으므로)

끝나는 순간 콜스텍에 foo 를 추가해준다. bar 역시 마찬가지로 3초 지나는 순간 바로 추가된다.

setTimeout(foo, 4000);
setTimeout(bar, 3000);

만약 foo를 4초로 설정해주고, bar 를 3초로 설정해준다면

foo 를 먼저 읽고 실행하지만 bar 가 먼저 끝나므로 bar가 먼저 출력된 후 foo 가 출력된다

 

위의 설명을 다음 그림으로 다시 이해해보자

(1) 맨 처음 “로봇청소기 돌려→ (먼지)통 비우기”가 CallStack 에 담긴다.

         (= 스택에 담겼다가 통비우기(=콜백함수)는 바로 실행할 수 없으므로)

(2) Web API 로 통비우기를 넘겨준다. (당장 처리할 수 없는 일 넘겨)

(3) 서버와의 연결을 통해 응답을 받으면 테스크큐로 통비우기를 넘겨준다

(4) 이벤트루프가 콜스텍과 테스크큐를 지켜보다가 스택이 비워지면 테스크큐에 담긴 내용을 스택으로 넘긴다.

(5) 스택에 들어온 통비우기는 바로 실행할 수 있으므로 실행된다.

 

console.log('hello');

setTimeout(() => {
  console.log('kang');
}, 3000);

console.log('bye');

// hello
// bye
// kang

콜스텍 CallStack

현재 실행중인 코드가 담기는 스택구조의 메모리 영역

함수를 실행하면 함수에 대한 기록이 스택에 push 됨. 함수의 결과값이 반환되면(응답되면) pop

이벤트루프 EventLoop

이벤트루프는 CallStack 과 Task Queue 의 상태를 체크하여, CallStack 이 비었을 때, Task Queue 의 첫번째 콜백을 CallStack 으로 밀어 넣는다.