1. 동기 vs 비동기
동기
- 코드 순차적으로 실행되는 것
비동기
- 코드가 순차적으로 실행되지 않고, 넘어가기도 하는 것
- 어떤 웹 페이지에서 정보를 가져오는데 동기로 수행한다면, 정보를 가져오는 동안 페이지가 멈춰있을 것
- 비동기로 수행한다면, 정보를 가져오는 것은 다른 곳에서 처리하기 때문에 웹 페이지는 작동하고, 정보를 가져오는 것이 끝나면 그걸 처리한다.
비동기로 수행한 이런 일이 끝났을 때 조치들을 취해야 하는데 (예를 들어, 비동기로 정보를 가져온 다음에 해당 정보를 화면에 표시하기), 이걸 어떻게 처리할 수 있을까?
2. Callback 함수
button.addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});위 코드에서
function() {
alert('버튼이 클릭되었습니다!');
}부분이 Callback 함수,
fetch('https://example.com/data')
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
});위 코드에서는
function(response) {
return response.json();
}와
function(data) {
console.log(data);
}가 Callback 함수이다.
Callback 함수란?
- 나중에 호출할 함수.
- 왜 나중에 호출하려고 할까?
- 프로그램에는 비동기적으로 동작해야 하는 함수들이 필요하다는 설명을 했음.
- 비동기적으로 동작하는 함수가 끝났을 때, 얘네 후처리를 어떻게 해야 하는가?
- 콜백 함수를 통해 해야 하는 일을 지시할 수 있음.
button.addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});- 다시, 위 코드에서는 addEventListener는 비동기 함수임.
- 이 함수는 바로 호출되지 않음.
- 그 안에 있는 콜백 함수가 등록되어 있음.
- 버튼이 클릭되었을 때, 전에 등록해놨던 콜백 함수가 호출됨.
fetch('https://example.com/data')
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
});- fetch는 비동기 함수이기 때문에, 결과가 바로 나오지 않음.
- 결과 나오면 후처리 해야하는데, 어떻게 지시하나? then 함수 안에 콜백 함수를 넣어서 지시함.
- response가 결과로 나오는데, response.json()을 리턴하겠다.
- 또 then 함수를 불러서 그 데이터를 출력함.
- 위의 addEventListener의 첫 번째 인자가 click이기 때문에, 클릭 시 해당 콜백 함수가 호출됨.
- 아래 fetch는 promise 객체를 반환하는데, then은 promise 객체의 상태가 reslove, 즉 요청이 성공적으로 완료되었을 때 실행됨.
3. 실제 작동 원리와 순서
- 자바스크립트는 단일 스레드임. 이 말은 call stack이 하나라는 뜻.
- 코드가 진행됨에 따라 함수가 Call stack에 쌓이고, 끝나면 없어지고를 반복함.
- 비동기 함수를 만났으면, Web API라는 곳에 가서 처리함.
- 만약 거기서 비동기 함수가 처리되었으면, 콜백 함수가 호출되어야 하는 당위성을 가지게 됨.
- 실행해야 하는 상태가 된 콜백 함수는 일단 Callback Queue로 이동함.
- 사실 계속 Event Loop라는 놈이 Call stack이랑 Callback Queue를 두리번거리고 있었음.
- Call stack이 비어있는 경우에, 즉 일단 지금 하던 단위 작업이 끝난 경우에, Callback Queue를 기웃거림.
- 만약 거기에 실행해야 하는 콜백 함수가 있다면, 그걸 Call Stack으로 가져옴 == 실행됨.
- 없다면 코드 계속 진행하며 Call stack에 함수 쌓고, 진행하는 것 반복.
4. Web API
- 비동기 함수들을 진행하는 곳
- 얘네는 멀티 스레드로 동작함
- 그래서 자바스크립트는 단일 스레드지만, 얘네 덕분에 멀티 스레드처럼 동작함.
출처
https://velog.io/@thms200/Event-Loop-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84
handsome