[JavaScript] 비동기 처리 & Callback

Gomao·2023년 3월 25일

JavaScript web

Web programming

목록 보기

5/17

비동기 처리의 개념

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 방식을 말함. (↔ 동기 처리 : 실행을 멈춤)

비동기 처리 방법 1. setTimeout

setTimeout() 은 Web API의 한 종류이다.
실행 식은 아래와 같다.

setTimeout(func,delay)

여기서 func는 실행할 함수 delay는 실행 대기시간(단위: ms) 이다.

그럼 아래 코드를 실행하면 어떻게 나올까?
console.log('1');

setTimeout(function() {
	console.log('2');
}, 3000);

console.log('3');
이것을 출력하면 아래와 같이 나온다.
1
3
2
만약 여기서 delay를 매우 짧게, 아니면 0을 준다면?
아니면 setTimeout 뒤에 나오는 작업이 100만개 이상이라면?
그러면 2가 먼저 출력되는 경우가 있을까?

결론부터 말해서 그런 경우는 절대 존재하지 않는다.
setTimeout 함수를 이용해서 비동기적으로 선언된 명령은
그렇지 않은 다른 모든 실행이 끝난 후에 나온다.

정확한 이유를 알게 되었다.(3/28 내용 추가)

내용 추가!!! setTimeout은 콜스택이 비어있을 때 실행된다!!
다음에 나올 Promise는 상위함수가 종료되기 전에 실행된다.
이 차이점을 알아야 한다.

비동기 처리 방법 2. ajax

조금 어려운 내용이라 추후에 추가한다. 안 배웠음 ㅠㅠ

콜백(callbak)함수는 뭐지?

그렇다고 한다.
요약하자면, 함수 내에서 인자로 전달되는 함수를 말한다.

이해를 돕기 위해 예제를 하나만 준비했다.

어떻게 출력될까?
실행 결과
gomao
cutehane
분명 console.log를 실행하는 것은 cutehane 함수에만 들어있는데,
무언가가 두번 출력이 되었다. 왜냐하면..
gomao함수 내에서 cutehane() 를 통해 callback 함수를 실행해 준 것이다!

이 함수의 논리 구조는 아래와 같다.
1. 11줄에 있는 gomao()를 실행함
2. 2줄에 있는 function gomao가 실행됨
	2-1) gomao함수 내에서 cutehane()를 실행함
    2-2) 현재 시점에서 str은 1줄에서 정의된 "gomao"임
    2-3) 따라서 function cutehane를 실행하게 되면,
    2-4) 현재 저장되어있는 str을 출력함 (첫 번째 gomao 출력)
    2-5) 그리고 4줄에서 str을 다시 "cutehane"로 다시 정의함
    ------------여기까지가 gomao()에 대한 실행이다
3. 12줄에 있는 cutehane()를 실행함
	3-1) 현재 저장되어있는 str을 출력함 (두 번째 cutehane 출력)
사실 이 코드는 callback도 callback 이지만 
hoisting에 대한 핵심적인 내용을 담고 있기도 하다.

아무튼 다시 callback으로 돌아와서,

그러면 callback 함수는 왜 쓸까?

그러니까, "비동기 처리 중에 코드 흐름을 의도대로 제어하기 위해서" 라는 건데,
예시로 알아보자.

위에 setTimeout 실행 예시를 기준으로 생각해보자.

undefined
실행 대기 중...0초 경과
실행 대기 중...1초 경과
실행 대기 중...2초 경과
실행 대기 중...3초 경과

for문이 시작되자 마자 answer = str(입력한 값)을 넣었지만,
setTimeout을 통해 비동기적으로 처리했기 때문에,
return answer을 하는 순간에는 아직 answer = str이 안 들어와서,
단순히 let answer로 선언해두기만 한 변수가 undefined로 출력된다.
이런 문제를 callback함수를 사용해서 해결할 수 있다.

실행 되고있니?
실행 대기 중...0초 경과
실행 대기 중...1초 경과
실행 대기 중...2초 경과
실행 완료

논리 흐름이 어떻게 다른지 보자.

1. callback 함수는 str을 입력받아 console.log(str) 을 실행하도록 하였고,
2. setTimeout을 통해 비동기적으로 str에 대기 경과시간을 입력하도록 하였지만,
3. 10줄에 있는 cb(str)을 통해, 현재 저장된 str을 출력하고 나서 넘어간다!

마치 비동기적으로 동작하는 setTimeout이 동기적으로 동작한 것이다.