비동기 2 - 이벤트 루프

이번에는 이벤트 루프에 대해서 공부해 보겠다. 

---

 

 

 

 

이론 2 - 이벤트 루프

 

 

 

 

 

 

타이머 끝에 실행되거나 인터벌 간격으로 코드를 처리하는 경우가 있다. 

 

 

 

 

메인 스레드는 콜 스택을 이용해서 코드를 읽고 실행한다. 콜스택에서 함수 안에 함수를 호출하는 경우 함수가 스택에 쌓이게 된다. 이렇게 실행 컨텍스트가 쌓이게 된다.

비동기에서는 10초 후에 setTimeOut이 종료되면 Task queue로 들어간다. 이벤트 루프가 하는 일은 Task queue에 task가 남아있다면 이벤트 루프를 통해 task를 Call stack에 넣고 코드를 실행한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

내부적으로는 콘솔이 실행된다.

 

 

 

 

 

 

 

request()를 만나면 resquest 를 호출한다.

 

 

 

 

 

 

Task queue에 request가 끝나면 이벤트 루프에 resquest callback이 들어간다.

 

 

 

 

 

그러면 콘솔이 콜 스택에 찍힌다.

 

 

 

 

 

이후에는 끝나게 된다.

 

 

 

 

---

 

 

 

 

 

 

퀴즈 2 - 이벤트 루프

 

 

 

 

이 문제는 틀렸다. 다시 풀어보자.

---

 

 

 

 

---

 

 

 

 

 

실습 1 - 동기 비동기 타이머 구현하기

 

---

 

 

 

index.html

 

 

 

 

index.js

 

 

 

 

Counter.js

---

 

 

 

문제  풀기

 

1. 코드 실행하기

 

빨간색과 파란색 불이 번갈아서 들어오는데 지금은 번튼이 작동하지 않으니 이 코드를 작성해 보겠다.

 

---

 

 

 

 

2. increamentSync 함수 구현하기

incrementSync는 현재 시간을 구한다. 3초 안에 동기 처리를 끝내야 하므로 while 문을 활용한다. 만약 현재 시간이 12분이라면 12분 1초, 2초에 실행될 것이다.

현재 시간에서 지난 시간까지 3초가 넘으면 동기를 멈추는 코드를 작성한다. 동기 동작을 기다린 후에는 count를 증가한다.

 

---

 

 

 

 

3. increamentAsync 함수 구현

increamentAsync의 경우 setTimeOut을 호출하고 두 번째 인자로 시간을 넣으면 이 콜백을 호출한다. 3초 후에 count를 증가하고 콜백을 호출하도록 구현한다.

---

 

 

 

 

4. 작성한 코드 실행하기

 

동기가 되면 브라우저가 3초 동안 멈추고 실행이 된다.

 

 

 

 

멈추는 동안 비동기 동작은 실행이 되면서 계속 숫자가 증가하고 파란색과 빨간색이 연속적으로 나온다.

 

 

 

 

 

제출이 잘 되었다.

---

 

 

 

 

 

 

학습을 마치고

비동기 통신이 어떻게 작동이 되는지 원리를 조금 알 수 있었다. 완전히 다는 이해하지 못했지만 계속해서 공부하면 지금보다 훨씬 많은 것들 깨달을 수 있을 것 같다.

이제 점심시간이 많이 지났지만 한 단원만 더 학습하고 점심을 먹고 쉬어야겠다.